@lensui/lens-table 0.1.25 → 0.1.28

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,9 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, _edge, _cells) {
+  return { 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;
@@ -1783,7 +1809,6 @@ function TableInner({
   const contextMenuRef = (0, import_react5.useRef)(null);
   const suppressClickRef = (0, import_react5.useRef)(false);
   const hasCompletedLoadRef = (0, import_react5.useRef)(!loading);
-  const columnDragPreviewRef = (0, import_react5.useRef)(null);
   const validColumnDropRef = (0, import_react5.useRef)(null);
   const hoveredHeaderActionRef = (0, import_react5.useRef)(null);
   const hoveredRowIndexRef = (0, import_react5.useRef)(null);
@@ -1817,6 +1842,7 @@ function TableInner({
   const [editing, setEditing] = (0, import_react5.useState)(null);
   const [draft, setDraft] = (0, import_react5.useState)("");
   const [rowDragPreview, setRowDragPreview] = (0, import_react5.useState)(null);
+  const [columnDragPreview, setColumnDragPreview] = (0, import_react5.useState)(null);
   const [columnDropTarget, setColumnDropTarget] = (0, import_react5.useState)(null);
   (0, import_react5.useEffect)(() => {
     if (!loading) hasCompletedLoadRef.current = true;
@@ -2316,7 +2342,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;
@@ -3599,7 +3625,7 @@ function TableInner({
   }, []);
   const clearColumnOrderPointerDrag = (0, import_react5.useCallback)((canvas) => {
     columnOrderDragRef.current = null;
-    columnDragPreviewRef.current = null;
+    setColumnDragPreview(null);
     validColumnDropRef.current = null;
     setColumnDropTarget(null);
     setDragGuide(null);
@@ -3635,6 +3661,17 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
+    const previewRowCount = Math.min(rows.length, 6);
+    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
+      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      width: previewWidth
+    });
     const hoveredColumnIndex = locateColumn(event.clientX);
     const targetCell = locateHeaderCell(event.clientX, event.clientY) ?? headerCells.find((cell) => hoveredColumnIndex >= cell.startIndex && hoveredColumnIndex <= cell.endIndex && cell.level === sourceCell.level && cell.leaf === sourceCell.leaf && cell.parentKey === sourceCell.parentKey && columns[cell.startIndex]?.fixed === columns[sourceCell.startIndex]?.fixed);
     if (!targetCell) {
@@ -3660,7 +3697,6 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
       setColumnDropTarget(null);
@@ -3677,9 +3713,13 @@ 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]);
+  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -3832,7 +3872,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 +4234,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 +4601,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;
@@ -5184,6 +5231,31 @@ function TableInner({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    columnDragPreview && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "rvg-column-drag-preview",
+        style: {
+          left: columnDragPreview.left,
+          top: columnDragPreview.top,
+          width: columnDragPreview.width,
+          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              className: "rvg-column-drag-preview-cell",
+              style: { top: headerLeafHeight + rowIndex * rowHeight, height: rowHeight },
+              children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+            },
+            `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+          ))
+        ]
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {

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;
@@ -1508,12 +1508,14 @@
   background: var(--rvg-color-danger);
 }
 .rvg-column-drag-preview {
-  position: relative;
+  position: absolute;
+  z-index: 11;
   overflow: hidden;
-  border: 1px solid #a9c8f5;
-  background: #fff;
-  box-shadow: var(--rvg-shadow-popover);
-  opacity: 0.94;
+  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 32%, var(--rvg-color-grid));
+  background: color-mix(in srgb, var(--rvg-color-primary) 4%, var(--rvg-color-bg));
+  box-shadow: 0 8px 22px rgba(50, 91, 136, 0.2);
+  opacity: 0.96;
+  pointer-events: none;
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header,
@@ -1537,8 +1539,8 @@
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header {
-  background: var(--rvg-color-header-bg);
-  color: var(--rvg-color-muted);
+  background: color-mix(in srgb, var(--rvg-color-primary) 10%, var(--rvg-color-header-bg));
+  color: var(--rvg-color-text);
   font-weight: 600;
 }
 .rvg-column-drag-preview-header .rvg-preview-header-icon {

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,9 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
+function resolveColumnDropHighlightRange(target, _edge, _cells) {
+  return { 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;
@@ -1753,7 +1779,6 @@ function TableInner({
   const contextMenuRef = useRef2(null);
   const suppressClickRef = useRef2(false);
   const hasCompletedLoadRef = useRef2(!loading);
-  const columnDragPreviewRef = useRef2(null);
   const validColumnDropRef = useRef2(null);
   const hoveredHeaderActionRef = useRef2(null);
   const hoveredRowIndexRef = useRef2(null);
@@ -1787,6 +1812,7 @@ function TableInner({
   const [editing, setEditing] = useState4(null);
   const [draft, setDraft] = useState4("");
   const [rowDragPreview, setRowDragPreview] = useState4(null);
+  const [columnDragPreview, setColumnDragPreview] = useState4(null);
   const [columnDropTarget, setColumnDropTarget] = useState4(null);
   useEffect2(() => {
     if (!loading) hasCompletedLoadRef.current = true;
@@ -2286,7 +2312,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;
@@ -3569,7 +3595,7 @@ function TableInner({
   }, []);
   const clearColumnOrderPointerDrag = useCallback2((canvas) => {
     columnOrderDragRef.current = null;
-    columnDragPreviewRef.current = null;
+    setColumnDragPreview(null);
     validColumnDropRef.current = null;
     setColumnDropTarget(null);
     setDragGuide(null);
@@ -3605,6 +3631,17 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
+    const previewRowCount = Math.min(rows.length, 6);
+    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
+      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      width: previewWidth
+    });
     const hoveredColumnIndex = locateColumn(event.clientX);
     const targetCell = locateHeaderCell(event.clientX, event.clientY) ?? headerCells.find((cell) => hoveredColumnIndex >= cell.startIndex && hoveredColumnIndex <= cell.endIndex && cell.level === sourceCell.level && cell.leaf === sourceCell.leaf && cell.parentKey === sourceCell.parentKey && columns[cell.startIndex]?.fixed === columns[sourceCell.startIndex]?.fixed);
     if (!targetCell) {
@@ -3630,7 +3667,6 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
       setColumnDropTarget(null);
@@ -3647,9 +3683,13 @@ 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]);
+  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -3802,7 +3842,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 +4204,7 @@ function TableInner({
           children: /* @__PURE__ */ jsx7(
             "span",
             {
+              style: { width: "100%" },
               ref: (node) => {
                 if (node) {
                   customHeaderContentRefs.current.set(column.key, node);
@@ -4526,8 +4571,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;
@@ -5154,6 +5201,31 @@ function TableInner({
       }
     ),
     /* @__PURE__ */ jsx7("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    columnDragPreview && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "rvg-column-drag-preview",
+        style: {
+          left: columnDragPreview.left,
+          top: columnDragPreview.top,
+          width: columnDragPreview.width,
+          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "rvg-column-drag-preview-cell",
+              style: { top: headerLeafHeight + rowIndex * rowHeight, height: rowHeight },
+              children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+            },
+            `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+          ))
+        ]
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ jsx7(
       "div",
       {

package/package.json

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