@lensui/lens-table 0.1.29 → 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,41 +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 sourceColumn = columns[sourceCell.startIndex];
-    const previewContext = event.currentTarget.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, event.clientX - rootRect.left - previewWidth / 2)),
-      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) {
@@ -3697,16 +3723,31 @@ 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;
@@ -3727,7 +3768,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, 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;
@@ -4583,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",

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;

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,41 +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 sourceColumn = columns[sourceCell.startIndex];
-    const previewContext = event.currentTarget.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, event.clientX - rootRect.left - previewWidth / 2)),
-      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) {
@@ -3667,16 +3693,31 @@ 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;
@@ -3697,7 +3738,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, 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;
@@ -4553,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",

package/package.json

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