@lensui/lens-table 0.1.28 → 0.1.30

package/dist/index.cjs

@@ -765,7 +765,7 @@ function getDisplayLabel(column, row, rowIndex) {
 }
 
 // src/core/layout.ts
-var DEFAULT_COLUMN_WIDTH = 140;
+var DEFAULT_COLUMN_WIDTH = 100;
 var HEADER_ACTION_SLOT_WIDTH = 16;
 function isDataColumn(column) {
   return !column.rowSelection && !column.rowDragHandle && !column.rowNumber;
@@ -1788,6 +1788,7 @@ function TableInner({
   const columnAnchorRef = (0, import_react5.useRef)(null);
   const columnDragRef = (0, import_react5.useRef)(null);
   const columnOrderDragRef = (0, import_react5.useRef)(null);
+  const columnOrderLongPressTimerRef = (0, import_react5.useRef)(null);
   const dragGuideRef = (0, import_react5.useRef)(null);
   const rowDragGuideRef = (0, import_react5.useRef)(null);
   const selectionFocusRef = (0, import_react5.useRef)(null);
@@ -2337,8 +2338,8 @@ function TableInner({
       borderStrong: readThemeColor(themeStyles, "--rvg-color-border-strong", "#b8bec4"),
       selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
       selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
-      axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
-      axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
+      axisSelectionFill: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
+      axisSelectionText: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       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"),
@@ -2349,7 +2350,7 @@ function TableInner({
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -3624,6 +3625,10 @@ function TableInner({
     event.currentTarget.style.cursor = "default";
   }, []);
   const clearColumnOrderPointerDrag = (0, import_react5.useCallback)((canvas) => {
+    if (columnOrderLongPressTimerRef.current) {
+      clearTimeout(columnOrderLongPressTimerRef.current);
+      columnOrderLongPressTimerRef.current = null;
+    }
     columnOrderDragRef.current = null;
     setColumnDragPreview(null);
     validColumnDropRef.current = null;
@@ -3632,6 +3637,43 @@ function TableInner({
     document.documentElement.classList.remove("rvg-is-dragging");
     canvas.style.cursor = "default";
   }, [setDragGuide]);
+  const updateColumnDragPreview = (0, import_react5.useCallback)((sourceCell, clientX, canvas) => {
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 100;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = canvas.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, clientX - rootRect.left - previewWidth / 2)),
+      width: previewWidth
+    });
+  }, [columns, getCellLabel, metrics, rows, viewport.width]);
+  const activateColumnOrderPointerDrag = (0, import_react5.useCallback)((canvas, clientX) => {
+    const drag = columnOrderDragRef.current;
+    if (!drag || drag.active) return;
+    if (columnOrderLongPressTimerRef.current) {
+      clearTimeout(columnOrderLongPressTimerRef.current);
+      columnOrderLongPressTimerRef.current = null;
+    }
+    drag.active = true;
+    suppressClickRef.current = true;
+    hideDragTooltips();
+    document.documentElement.classList.add("rvg-is-dragging");
+    canvas.style.cursor = "move";
+    updateColumnDragPreview(drag.sourceCell, clientX, canvas);
+  }, [hideDragTooltips, updateColumnDragPreview]);
   const handleColumnOrderPointerDown = (0, import_react5.useCallback)((event) => {
     if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
     const sourceCell = locateHeaderCell(event.clientX, event.clientY);
@@ -3647,31 +3689,25 @@ function TableInner({
       active: false,
       sourceCell
     };
-  }, [columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
+    if (columnOrderLongPressTimerRef.current) clearTimeout(columnOrderLongPressTimerRef.current);
+    const canvas = event.currentTarget;
+    const pointerId = event.pointerId;
+    columnOrderLongPressTimerRef.current = setTimeout(() => {
+      const drag = columnOrderDragRef.current;
+      if (!drag || drag.pointerId !== pointerId || drag.active) return;
+      activateColumnOrderPointerDrag(canvas, drag.startX);
+    }, 320);
+  }, [activateColumnOrderPointerDrag, columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
   const handleColumnOrderPointerMove = (0, import_react5.useCallback)((event) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId || columnDragRef.current) return;
     if (!drag.active) {
       if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 4) return;
-      drag.active = true;
-      suppressClickRef.current = true;
-      hideDragTooltips();
-      document.documentElement.classList.add("rvg-is-dragging");
-      event.currentTarget.style.cursor = "move";
+      activateColumnOrderPointerDrag(event.currentTarget, event.clientX);
     }
     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
-    });
+    updateColumnDragPreview(sourceCell, event.clientX, event.currentTarget);
     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) {
@@ -3687,20 +3723,39 @@ function TableInner({
       setDragGuide(null);
       return;
     }
+    if (targetCell.startIndex === sourceCell.startIndex && targetCell.endIndex === sourceCell.endIndex) {
+      validColumnDropRef.current = null;
+      setColumnDropTarget(null);
+      setDragGuide(null);
+      return;
+    }
     const targetLeft = getHeaderCellLeft(targetCell);
     const targetWidth = getHeaderCellWidth(targetCell);
     const localX = event.clientX - event.currentTarget.getBoundingClientRect().left;
-    const columnEdge = localX < targetLeft + targetWidth / 2 ? "left" : "right";
-    const destinationIndex = resolveColumnDropIndex(
+    let columnEdge = localX < targetLeft + targetWidth / 2 ? "left" : "right";
+    let destinationIndex = resolveColumnDropIndex(
       sourceCell.startIndex,
       targetCell.startIndex,
       columnEdge,
       columns.length
     );
+    if (destinationIndex === sourceCell.startIndex && targetCell.startIndex !== sourceCell.startIndex) {
+      columnEdge = targetCell.startIndex < sourceCell.startIndex ? "left" : "right";
+      destinationIndex = resolveColumnDropIndex(
+        sourceCell.startIndex,
+        targetCell.startIndex,
+        columnEdge,
+        columns.length
+      );
+    }
+    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);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3713,13 +3768,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    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, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
+  }, [activateColumnOrderPointerDrag, columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, locateColumn, locateHeaderCell, setDragGuide, updateColumnDragPreview]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -4575,7 +4624,10 @@ function TableInner({
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  const draggingSelectedColumn = Boolean(
+    columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "canvas",
@@ -5238,21 +5290,24 @@ function TableInner({
         className: "rvg-column-drag-preview",
         style: {
           left: columnDragPreview.left,
-          top: columnDragPreview.top,
+          top: 0,
           width: columnDragPreview.width,
-          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+          height: renderHeight
         },
         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))}`
-          ))
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
         ]
       }
     ),

package/dist/index.css

@@ -17,6 +17,8 @@
   --rvg-color-selection-fill: #edf4ff;
   --rvg-color-axis-selection-fill: #e8f2ff;
   --rvg-color-axis-selection-text: var(--rvg-color-text);
+  --rvg-color-axis-selection-drag-fill: #d8e8f8;
+  --rvg-color-axis-selection-drag-text: #325b88;
   --rvg-color-column-drop-target-fill: #e2edf9;
   --rvg-color-range-fill: #e8f1ff;
   --rvg-color-row-hover-fill: #f6f9fc;
@@ -777,6 +779,10 @@
   background: var(--rvg-color-axis-selection-fill);
   color: var(--rvg-color-axis-selection-text);
 }
+.rvg-root.is-dragging-selected-column .rvg-header-title.is-axis-selected {
+  background: var(--rvg-color-axis-selection-drag-fill);
+  color: var(--rvg-color-axis-selection-drag-text);
+}
 .rvg-text-fixed-shadow {
   position: absolute;
   z-index: 4;
@@ -1511,10 +1517,10 @@
   position: absolute;
   z-index: 11;
   overflow: hidden;
-  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;
+  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 38%, var(--rvg-color-grid));
+  background: var(--rvg-color-bg);
+  box-shadow: 0 6px 18px rgba(50, 91, 136, 0.18);
+  opacity: 0.94;
   pointer-events: none;
   box-sizing: border-box;
 }
@@ -1539,10 +1545,13 @@
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header {
-  background: color-mix(in srgb, var(--rvg-color-primary) 10%, var(--rvg-color-header-bg));
+  background: var(--rvg-color-header-bg);
   color: var(--rvg-color-text);
   font-weight: 600;
 }
+.rvg-column-drag-preview-cell.is-striped {
+  background: var(--rvg-color-stripe);
+}
 .rvg-column-drag-preview-header .rvg-preview-header-icon {
   position: absolute;
   top: 50%;

package/dist/index.js

@@ -735,7 +735,7 @@ function getDisplayLabel(column, row, rowIndex) {
 }
 
 // src/core/layout.ts
-var DEFAULT_COLUMN_WIDTH = 140;
+var DEFAULT_COLUMN_WIDTH = 100;
 var HEADER_ACTION_SLOT_WIDTH = 16;
 function isDataColumn(column) {
   return !column.rowSelection && !column.rowDragHandle && !column.rowNumber;
@@ -1758,6 +1758,7 @@ function TableInner({
   const columnAnchorRef = useRef2(null);
   const columnDragRef = useRef2(null);
   const columnOrderDragRef = useRef2(null);
+  const columnOrderLongPressTimerRef = useRef2(null);
   const dragGuideRef = useRef2(null);
   const rowDragGuideRef = useRef2(null);
   const selectionFocusRef = useRef2(null);
@@ -2307,8 +2308,8 @@ function TableInner({
       borderStrong: readThemeColor(themeStyles, "--rvg-color-border-strong", "#b8bec4"),
       selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
       selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
-      axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
-      axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
+      axisSelectionFill: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
+      axisSelectionText: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       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"),
@@ -2319,7 +2320,7 @@ function TableInner({
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
-  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+  }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -3594,6 +3595,10 @@ function TableInner({
     event.currentTarget.style.cursor = "default";
   }, []);
   const clearColumnOrderPointerDrag = useCallback2((canvas) => {
+    if (columnOrderLongPressTimerRef.current) {
+      clearTimeout(columnOrderLongPressTimerRef.current);
+      columnOrderLongPressTimerRef.current = null;
+    }
     columnOrderDragRef.current = null;
     setColumnDragPreview(null);
     validColumnDropRef.current = null;
@@ -3602,6 +3607,43 @@ function TableInner({
     document.documentElement.classList.remove("rvg-is-dragging");
     canvas.style.cursor = "default";
   }, [setDragGuide]);
+  const updateColumnDragPreview = useCallback2((sourceCell, clientX, canvas) => {
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 100;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = canvas.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, clientX - rootRect.left - previewWidth / 2)),
+      width: previewWidth
+    });
+  }, [columns, getCellLabel, metrics, rows, viewport.width]);
+  const activateColumnOrderPointerDrag = useCallback2((canvas, clientX) => {
+    const drag = columnOrderDragRef.current;
+    if (!drag || drag.active) return;
+    if (columnOrderLongPressTimerRef.current) {
+      clearTimeout(columnOrderLongPressTimerRef.current);
+      columnOrderLongPressTimerRef.current = null;
+    }
+    drag.active = true;
+    suppressClickRef.current = true;
+    hideDragTooltips();
+    document.documentElement.classList.add("rvg-is-dragging");
+    canvas.style.cursor = "move";
+    updateColumnDragPreview(drag.sourceCell, clientX, canvas);
+  }, [hideDragTooltips, updateColumnDragPreview]);
   const handleColumnOrderPointerDown = useCallback2((event) => {
     if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
     const sourceCell = locateHeaderCell(event.clientX, event.clientY);
@@ -3617,31 +3659,25 @@ function TableInner({
       active: false,
       sourceCell
     };
-  }, [columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
+    if (columnOrderLongPressTimerRef.current) clearTimeout(columnOrderLongPressTimerRef.current);
+    const canvas = event.currentTarget;
+    const pointerId = event.pointerId;
+    columnOrderLongPressTimerRef.current = setTimeout(() => {
+      const drag = columnOrderDragRef.current;
+      if (!drag || drag.pointerId !== pointerId || drag.active) return;
+      activateColumnOrderPointerDrag(canvas, drag.startX);
+    }, 320);
+  }, [activateColumnOrderPointerDrag, columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
   const handleColumnOrderPointerMove = useCallback2((event) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId || columnDragRef.current) return;
     if (!drag.active) {
       if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 4) return;
-      drag.active = true;
-      suppressClickRef.current = true;
-      hideDragTooltips();
-      document.documentElement.classList.add("rvg-is-dragging");
-      event.currentTarget.style.cursor = "move";
+      activateColumnOrderPointerDrag(event.currentTarget, event.clientX);
     }
     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
-    });
+    updateColumnDragPreview(sourceCell, event.clientX, event.currentTarget);
     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) {
@@ -3657,20 +3693,39 @@ function TableInner({
       setDragGuide(null);
       return;
     }
+    if (targetCell.startIndex === sourceCell.startIndex && targetCell.endIndex === sourceCell.endIndex) {
+      validColumnDropRef.current = null;
+      setColumnDropTarget(null);
+      setDragGuide(null);
+      return;
+    }
     const targetLeft = getHeaderCellLeft(targetCell);
     const targetWidth = getHeaderCellWidth(targetCell);
     const localX = event.clientX - event.currentTarget.getBoundingClientRect().left;
-    const columnEdge = localX < targetLeft + targetWidth / 2 ? "left" : "right";
-    const destinationIndex = resolveColumnDropIndex(
+    let columnEdge = localX < targetLeft + targetWidth / 2 ? "left" : "right";
+    let destinationIndex = resolveColumnDropIndex(
       sourceCell.startIndex,
       targetCell.startIndex,
       columnEdge,
       columns.length
     );
+    if (destinationIndex === sourceCell.startIndex && targetCell.startIndex !== sourceCell.startIndex) {
+      columnEdge = targetCell.startIndex < sourceCell.startIndex ? "left" : "right";
+      destinationIndex = resolveColumnDropIndex(
+        sourceCell.startIndex,
+        targetCell.startIndex,
+        columnEdge,
+        columns.length
+      );
+    }
+    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);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3683,13 +3738,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    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, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
+  }, [activateColumnOrderPointerDrag, columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, locateColumn, locateHeaderCell, setDragGuide, updateColumnDragPreview]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -4545,7 +4594,10 @@ function TableInner({
   };
   const currentScroll = scrollRef.current;
   const scrollerBottom = Math.max(0, bottomSummaryHeight - horizontalScrollbarHeight);
-  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  const draggingSelectedColumn = Boolean(
+    columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
+  );
+  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ jsxs7("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx7(
         "canvas",
@@ -5208,21 +5260,24 @@ function TableInner({
         className: "rvg-column-drag-preview",
         style: {
           left: columnDragPreview.left,
-          top: columnDragPreview.top,
+          top: 0,
           width: columnDragPreview.width,
-          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+          height: renderHeight
         },
         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))}`
-          ))
+          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
         ]
       }
     ),

package/package.json

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