@lensui/lens-table 0.1.25 → 0.1.27

package/dist/index.cjs

@@ -882,7 +882,7 @@ var COLORS = {
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
-  columnDropTargetFill: "#eeeeee",
+  columnDropTargetFill: "#e2edf9",
   stripe: "#fafbfc"
 };
 function ellipsizeText(context, text, maxWidth) {
@@ -966,15 +966,17 @@ function paintGrid(options) {
       const row = rows[rowIndex];
       const rowKey = getRowKey(row, rowIndex);
       const trailingRowStyle = options.rowStyle?.(row, rowIndex);
-      let fill = striped && rowIndex % 2 === 1 ? colors.stripe : null;
-      if (trailingRowStyle?.backgroundColor) fill = trailingRowStyle.backgroundColor;
-      if (selectedRowKeys.has(rowKey)) fill = colors.axisSelectionFill;
-      if (hoveredRowIndex === rowIndex) fill = colors.rowHoverFill;
-      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) fill = colors.insertedFill;
-      if (!fill) continue;
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = fill;
-      ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      const paintTrailingLayer = (fill) => {
+        if (!fill) return;
+        ctx.fillStyle = fill;
+        ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      };
+      if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
+      paintTrailingLayer(trailingRowStyle?.backgroundColor);
+      if (selectedRowKeys.has(rowKey)) paintTrailingLayer(colors.axisSelectionFill);
+      if (hoveredRowIndex === rowIndex) paintTrailingLayer(colors.rowHoverFill);
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) paintTrailingLayer(colors.insertedFill);
     }
   }
   const paintBodyColumns = (layer) => {
@@ -999,6 +1001,7 @@ function paintGrid(options) {
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
         const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
+        const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
         const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -1020,10 +1023,6 @@ function paintGrid(options) {
           ctx.fillStyle = colors.rowHoverFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
-          ctx.fillStyle = colors.columnDropTargetFill;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
-        }
         if (highlightInsertedRows && insertedRowKeys.has(rowKey)) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1048,6 +1047,10 @@ function paintGrid(options) {
           ctx.fillStyle = annotation.color;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (isColumnDropTarget) {
+          ctx.fillStyle = colors.columnDropTargetFill;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
@@ -1057,14 +1060,14 @@ function paintGrid(options) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1161,7 +1164,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1224,6 +1227,25 @@ function paintGrid(options) {
     paintExtendedColumnSelection("scroll");
     paintExtendedColumnSelection("left");
     paintExtendedColumnSelection("right");
+    const paintExtendedColumnDropTarget = (layer) => {
+      if (!columnDropTarget) return;
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.columnDropTargetFill;
+      for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnDropTarget("scroll");
+    paintExtendedColumnDropTarget("left");
+    paintExtendedColumnDropTarget("right");
     if (!verticalBorderless) {
       paintExtendedColumnLines("scroll");
       paintExtendedColumnLines("left");
@@ -1245,11 +1267,12 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
       if (isAxisSelected) {
         ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+      if (isColumnDropTarget) {
         ctx.fillStyle = colors.columnDropTargetFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
@@ -1278,7 +1301,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
+        ctx.fillStyle = isColumnDropTarget ? colors.muted : isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -1437,6 +1460,11 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, edge, cells) {
+  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
+  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
+  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -2316,7 +2344,7 @@ function TableInner({
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
-      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#eeeeee"),
+      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#e2edf9"),
       stripe: stripedColor ?? readThemeColor(themeStyles, "--rvg-color-stripe", "#fafbfc")
     };
     const scroll = scrollRef.current;
@@ -3677,7 +3705,11 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    setColumnDropTarget({ startIndex: targetCell.startIndex, endIndex: targetCell.endIndex });
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
     setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
   }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
@@ -3832,7 +3864,11 @@ function TableInner({
       const rect = target.getBoundingClientRect();
       if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) continue;
       const label = target.dataset.rvgTooltip?.trim();
-      if (!label) return null;
+      if (!label) return false;
+      const visibleText = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+      const candidates = [target, ...target.querySelectorAll("*")];
+      const truncated = candidates.some((candidate) => candidate.scrollWidth > candidate.clientWidth + 1 || candidate.scrollHeight > candidate.clientHeight + 1);
+      if (!truncated && label.replace(/\s+/g, " ").trim() === visibleText) return false;
       const rawLeft = rect.left - canvasRect.left;
       return {
         key: `content:${columnIndex}:${label}:${Math.round(rawLeft)}:${Math.round(rect.top - canvasRect.top)}`,
@@ -4190,6 +4226,7 @@ function TableInner({
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
+              style: { width: "100%" },
               ref: (node) => {
                 if (node) {
                   customHeaderContentRefs.current.set(column.key, node);
@@ -4556,8 +4593,10 @@ function TableInner({
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
             const hoveredDragColumnIndex = hoveredHeaderCell?.startIndex ?? columnIndex;
-            const hoveredContentTooltip = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
-            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredContentTooltip && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
+            const customHeaderTooltipMatch = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredContentTooltip = customHeaderTooltipMatch || null;
+            const hoveredCustomContent = customHeaderTooltipMatch !== null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredCustomContent && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
             const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredContentTooltip ? { columnIndex, action: "content" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
             const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredContentTooltip ? hoveredContentTooltip : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
             const previousHover = hoveredHeaderActionRef.current;

package/dist/index.css

@@ -17,7 +17,7 @@
   --rvg-color-selection-fill: #edf4ff;
   --rvg-color-axis-selection-fill: #e8f2ff;
   --rvg-color-axis-selection-text: var(--rvg-color-text);
-  --rvg-color-column-drop-target-fill: #eeeeee;
+  --rvg-color-column-drop-target-fill: #e2edf9;
   --rvg-color-range-fill: #e8f1ff;
   --rvg-color-row-hover-fill: #f6f9fc;
   --rvg-color-hover: #f1f4f8;

package/dist/index.js

@@ -852,7 +852,7 @@ var COLORS = {
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
-  columnDropTargetFill: "#eeeeee",
+  columnDropTargetFill: "#e2edf9",
   stripe: "#fafbfc"
 };
 function ellipsizeText(context, text, maxWidth) {
@@ -936,15 +936,17 @@ function paintGrid(options) {
       const row = rows[rowIndex];
       const rowKey = getRowKey(row, rowIndex);
       const trailingRowStyle = options.rowStyle?.(row, rowIndex);
-      let fill = striped && rowIndex % 2 === 1 ? colors.stripe : null;
-      if (trailingRowStyle?.backgroundColor) fill = trailingRowStyle.backgroundColor;
-      if (selectedRowKeys.has(rowKey)) fill = colors.axisSelectionFill;
-      if (hoveredRowIndex === rowIndex) fill = colors.rowHoverFill;
-      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) fill = colors.insertedFill;
-      if (!fill) continue;
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
-      ctx.fillStyle = fill;
-      ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      const paintTrailingLayer = (fill) => {
+        if (!fill) return;
+        ctx.fillStyle = fill;
+        ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+      };
+      if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
+      paintTrailingLayer(trailingRowStyle?.backgroundColor);
+      if (selectedRowKeys.has(rowKey)) paintTrailingLayer(colors.axisSelectionFill);
+      if (hoveredRowIndex === rowIndex) paintTrailingLayer(colors.rowHoverFill);
+      if (highlightInsertedRows && insertedRowKeys.has(rowKey)) paintTrailingLayer(colors.insertedFill);
     }
   }
   const paintBodyColumns = (layer) => {
@@ -969,6 +971,7 @@ function paintGrid(options) {
         const cellWidth = getCellWidth(columnIndex, colSpan);
         const cellHeight = rowHeight * rowSpan;
         const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
+        const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
         const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
         const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -990,10 +993,6 @@ function paintGrid(options) {
           ctx.fillStyle = colors.rowHoverFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
-          ctx.fillStyle = colors.columnDropTargetFill;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
-        }
         if (highlightInsertedRows && insertedRowKeys.has(rowKey)) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1018,6 +1017,10 @@ function paintGrid(options) {
           ctx.fillStyle = annotation.color;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (isColumnDropTarget) {
+          ctx.fillStyle = colors.columnDropTargetFill;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
@@ -1027,14 +1030,14 @@ function paintGrid(options) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
         if (rowSpan > 1) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
-          const mergedFill = annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
+          const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
           ctx.fillStyle = mergedFill;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1131,7 +1134,7 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1194,6 +1197,25 @@ function paintGrid(options) {
     paintExtendedColumnSelection("scroll");
     paintExtendedColumnSelection("left");
     paintExtendedColumnSelection("right");
+    const paintExtendedColumnDropTarget = (layer) => {
+      if (!columnDropTarget) return;
+      ctx.save();
+      if (layer === "scroll") {
+        ctx.beginPath();
+        ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
+        ctx.clip();
+      }
+      ctx.fillStyle = colors.columnDropTargetFill;
+      for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
+        if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
+        if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
+        ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
+      }
+      ctx.restore();
+    };
+    paintExtendedColumnDropTarget("scroll");
+    paintExtendedColumnDropTarget("left");
+    paintExtendedColumnDropTarget("right");
     if (!verticalBorderless) {
       paintExtendedColumnLines("scroll");
       paintExtendedColumnLines("left");
@@ -1215,11 +1237,12 @@ function paintGrid(options) {
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
       const isAxisSelected = selectedColumnKeys.has(columns[columnIndex].key);
+      const isColumnDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
       if (isAxisSelected) {
         ctx.fillStyle = colors.axisSelectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
-      if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+      if (isColumnDropTarget) {
         ctx.fillStyle = colors.columnDropTargetFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
@@ -1248,7 +1271,7 @@ function paintGrid(options) {
         ctx.beginPath();
         ctx.rect(x + 2, headerY + headerLeafTop + 1, Math.max(0, clipWidth - 4), headerLeafHeight - 2);
         ctx.clip();
-        ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.muted;
+        ctx.fillStyle = isColumnDropTarget ? colors.muted : isAxisSelected ? colors.axisSelectionText : colors.muted;
         ctx.textAlign = titleAlign === "right" ? "right" : titleAlign === "center" ? "center" : "left";
         ctx.fillText(title, textX, headerY + headerLeafTop + headerLeafHeight / 2);
         ctx.restore();
@@ -1407,6 +1430,11 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, edge, cells) {
+  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
+  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
+  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -2286,7 +2314,7 @@ function TableInner({
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
-      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#eeeeee"),
+      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#e2edf9"),
       stripe: stripedColor ?? readThemeColor(themeStyles, "--rvg-color-stripe", "#fafbfc")
     };
     const scroll = scrollRef.current;
@@ -3647,7 +3675,11 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    setColumnDropTarget({ startIndex: targetCell.startIndex, endIndex: targetCell.endIndex });
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
     setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
   }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
@@ -3802,7 +3834,11 @@ function TableInner({
       const rect = target.getBoundingClientRect();
       if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) continue;
       const label = target.dataset.rvgTooltip?.trim();
-      if (!label) return null;
+      if (!label) return false;
+      const visibleText = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+      const candidates = [target, ...target.querySelectorAll("*")];
+      const truncated = candidates.some((candidate) => candidate.scrollWidth > candidate.clientWidth + 1 || candidate.scrollHeight > candidate.clientHeight + 1);
+      if (!truncated && label.replace(/\s+/g, " ").trim() === visibleText) return false;
       const rawLeft = rect.left - canvasRect.left;
       return {
         key: `content:${columnIndex}:${label}:${Math.round(rawLeft)}:${Math.round(rect.top - canvasRect.top)}`,
@@ -4160,6 +4196,7 @@ function TableInner({
           children: /* @__PURE__ */ jsx7(
             "span",
             {
+              style: { width: "100%" },
               ref: (node) => {
                 if (node) {
                   customHeaderContentRefs.current.set(column.key, node);
@@ -4526,8 +4563,10 @@ function TableInner({
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
             const hoveredDragColumnIndex = hoveredHeaderCell?.startIndex ?? columnIndex;
-            const hoveredContentTooltip = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
-            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredContentTooltip && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
+            const customHeaderTooltipMatch = inHeader && !hoveredAction && !hoveredDragHandle ? locateCustomHeaderTooltip(event.clientX, event.clientY, columnIndex) : null;
+            const hoveredContentTooltip = customHeaderTooltipMatch || null;
+            const hoveredCustomContent = customHeaderTooltipMatch !== null;
+            const hoveredTitle = inHeader && !hoveredAction && !hoveredDragHandle && !hoveredCustomContent && hoveredHeaderCell && Boolean(hoveredHeaderCell.column.title) && isPointerOnHeaderTitle(event.clientX, event.clientY, hoveredHeaderCell) && (tooltipConfig.header || hoveredHeaderCell.leaf && isHeaderTitleTruncated(hoveredHeaderCell.startIndex));
             const nextHover = hoveredAction ? { columnIndex, action: hoveredAction } : hoveredDragHandle ? { columnIndex: hoveredDragColumnIndex, action: "drag" } : hoveredContentTooltip ? { columnIndex, action: "content" } : hoveredTitle ? { columnIndex: hoveredHeaderCell.startIndex, action: "title" } : null;
             const nextTooltip = hoveredAction && hoveredHeaderCell ? createHeaderTooltip(hoveredAction, columnIndex, hoveredHeaderCell) : hoveredDragHandle && hoveredHeaderCell ? createHeaderTooltip("drag", hoveredDragColumnIndex, hoveredHeaderCell) : hoveredContentTooltip ? hoveredContentTooltip : hoveredTitle && hoveredHeaderCell ? createHeaderTooltip("title", hoveredHeaderCell.startIndex, hoveredHeaderCell) : null;
             const previousHover = hoveredHeaderActionRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",