@lensui/lens-table 0.1.21 → 0.1.23

package/dist/index.js

@@ -716,48 +716,6 @@ function createRowDragHandleSvg() {
   }
   return svg;
 }
-function createHeaderDragHandleSvg() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 14 14");
-  svg.setAttribute("aria-hidden", "true");
-  for (const cy of [2.5, 7, 11.5]) {
-    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-    circle.setAttribute("cx", "7");
-    circle.setAttribute("cy", String(cy));
-    circle.setAttribute("r", "1.25");
-    svg.appendChild(circle);
-  }
-  return svg;
-}
-function createHeaderSortSvg(direction) {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 14 14");
-  svg.setAttribute("aria-hidden", "true");
-  for (const [value, active] of [
-    ["M3 5.5 7 1.5l4 4Z", direction === "asc"],
-    ["M3 8.5 7 12.5l4-4Z", direction === "desc"]
-  ]) {
-    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    path.setAttribute("d", value);
-    if (active) path.classList.add("is-active");
-    svg.appendChild(path);
-  }
-  return svg;
-}
-function createHeaderSearchSvg(active) {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 14 14");
-  svg.setAttribute("aria-hidden", "true");
-  if (active) svg.classList.add("is-active");
-  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  circle.setAttribute("cx", "5.5");
-  circle.setAttribute("cy", "5.5");
-  circle.setAttribute("r", "4.25");
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "m8.75 8.75 2.25 2.25");
-  svg.append(circle, path);
-  return svg;
-}
 
 // src/Table.tsx
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -961,6 +919,8 @@ function paintGrid(options) {
   const getColumnX = (index) => {
     return columns[index].fixed === "left" ? leftOffsets.get(index) ?? 0 : columns[index].fixed === "right" ? width - (rightOffsets.get(index) ?? 0) - metrics[index].width : (scrollableLefts.get(index) ?? leftFixedWidth) - scrollLeft;
   };
+  const displayedContentRight = columns.reduce((right, _column, index) => Math.max(right, getColumnX(index) + metrics[index].width), 0);
+  const trailingBlankStart = displayedContentRight > 0 && displayedContentRight < width ? displayedContentRight : null;
   const getRowDragOffset = (rowIndex) => {
     if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
     if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
@@ -969,6 +929,15 @@ function paintGrid(options) {
     return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
   };
   const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
+  if (striped && trailingBlankStart !== null) {
+    const rowStart = Math.max(0, range.rowStart);
+    for (let rowIndex = rowStart; rowIndex < range.rowEnd; rowIndex += 1) {
+      if (rowIndex % 2 === 0 || rowDragPreview?.sourceIndex === rowIndex) continue;
+      const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
+      ctx.fillStyle = colors.stripe;
+      ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
+    }
+  }
   const paintBodyColumns = (layer) => {
     const rowStart = Math.max(0, range.rowStart - Math.max(0, options.maxRowSpan - 1));
     for (let rowIndex = rowStart; rowIndex < range.rowEnd; rowIndex += 1) {
@@ -1284,6 +1253,10 @@ function paintGrid(options) {
     ctx.fillStyle = colors.grid;
     ctx.fillRect(rightFixedLeft - 1, 0, 1, height);
   }
+  if (!verticalBorderless && trailingBlankStart !== null) {
+    ctx.fillStyle = colors.grid;
+    ctx.fillRect(Math.round(trailingBlankStart) - 1, 0, 1, height);
+  }
   ctx.fillStyle = colors.grid;
   if (!horizontalBorderless && !frameBorderless) ctx.fillRect(0, 0, width, 1);
   if (!verticalBorderless && !frameBorderless) {
@@ -1418,6 +1391,13 @@ function useControllableValue(value, defaultValue, onChange) {
 
 // src/Table.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
+  const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
+  return Math.max(0, Math.min(columnCount - 1, insertionIndex));
+}
+function resolveColumnDropPlacement(edge) {
+  return edge === "right" ? "after" : "before";
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -1742,6 +1722,7 @@ function TableInner({
   const rowAnchorRef = useRef2(null);
   const columnAnchorRef = useRef2(null);
   const columnDragRef = useRef2(null);
+  const columnOrderDragRef = useRef2(null);
   const dragGuideRef = useRef2(null);
   const rowDragGuideRef = useRef2(null);
   const selectionFocusRef = useRef2(null);
@@ -3004,291 +2985,104 @@ function TableInner({
   }, [bodyTop, rowHeight, rows.length]);
   useEffect2(() => {
     const canvas = canvasRef.current;
-    if (!canvas || !columnDraggable && !rowDraggable) return;
-    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => {
-      if (edge === "right") return targetIndex;
-      const destinationIndex = targetIndex - (sourceIndex < targetIndex ? 1 : 0);
-      return Math.max(0, Math.min(columns.length - 1, destinationIndex));
-    };
-    const getColumnDropPlacement = (sourceIndex, targetIndex, edge) => {
-      if (edge !== "right") return "before";
-      return targetIndex < sourceIndex ? "before" : "after";
-    };
-    const getHeaderColumn = (clientX, clientY) => {
-      const rect = canvas.getBoundingClientRect();
-      const headerY = fixedHeader ? 0 : -scrollRef.current.top;
-      const localY = clientY - rect.top;
-      if (localY < headerY || localY >= headerY + headerHeight) return -1;
-      return locateColumn(clientX);
-    };
-    const getHeaderDragCell = (clientX, clientY) => {
-      const cell = locateHeaderCell(clientX, clientY);
-      if (!cell) return null;
-      return locateHeaderCellDragHandle(clientX, cell) && !locateHeaderResizeCell(clientX, clientY) ? cell : null;
-    };
+    if (!canvas || !rowDraggable) return;
     const cleanupDrag = draggable({
       element: canvas,
       canDrag: ({ input }) => {
-        const headerDragCell = columnDraggable ? getHeaderDragCell(input.clientX, input.clientY) : null;
-        if (headerDragCell) return true;
         const columnIndex = locateColumn(input.clientX);
-        return rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(input.clientY) >= 0;
-      },
-      getInitialData: ({ input }) => {
-        const headerDragCell = columnDraggable ? getHeaderDragCell(input.clientX, input.clientY) : null;
-        if (!headerDragCell) {
-          return { type: "table-row", sourceIndex: locateRow(input.clientY) };
-        }
-        const sourceIndex = headerDragCell.startIndex;
-        columnDragPreviewRef.current = { sourceIndex, targetIndex: sourceIndex };
-        validColumnDropRef.current = null;
-        return {
-          type: "table-column",
-          sourceIndex,
-          sourceKey: headerDragCell.key,
-          parentKey: headerDragCell.parentKey,
-          headerLevel: headerDragCell.level,
-          headerKind: headerDragCell.leaf ? "column" : "group",
-          fixed: columns[headerDragCell.startIndex]?.fixed
-        };
+        return columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(input.clientY) >= 0;
       },
+      getInitialData: ({ input }) => ({ type: "table-row", sourceIndex: locateRow(input.clientY) }),
       onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
         const sourceIndex = Number(source.data.sourceIndex);
         const canvasRect = canvas.getBoundingClientRect();
         const input = location.current.input;
-        const previewOffset = source.data.type === "table-row" ? {
+        const previewOffset = {
           x: Math.max(0, Math.min(canvasRect.width, input.clientX - canvasRect.left)) + 2,
           y: Math.max(0, Math.min(rowHeight, input.clientY - canvasRect.top - bodyTop - sourceIndex * rowHeight + scrollRef.current.top)) + 2
-        } : {
-          x: Math.max(0, Math.min(metrics[sourceIndex].width, input.clientX - canvasRect.left - getDisplayedColumnLeft(sourceIndex))),
-          y: Math.max(0, Math.min(canvasRect.height, input.clientY - canvasRect.top))
         };
         setCustomNativeDragPreview({
           nativeSetDragImage,
           getOffset: () => previewOffset,
           render: ({ container }) => {
-            if (source.data.type === "table-row") {
-              const frame = document.createElement("div");
-              frame.className = "rvg-row-drag-preview-frame";
-              frame.style.width = `${canvasRect.width + 4}px`;
-              frame.style.height = `${rowHeight + 4}px`;
-              const preview2 = document.createElement("div");
-              preview2.className = "rvg-row-drag-preview";
-              preview2.style.width = `${canvasRect.width}px`;
-              preview2.style.height = `${rowHeight}px`;
-              const row = rows[sourceIndex];
-              const rowKey2 = getRowKey(row, sourceIndex);
-              columns.forEach((column2, columnIndex) => {
-                const left = getDisplayedColumnLeft(columnIndex);
-                const columnWidth2 = metrics[columnIndex].width;
-                if (left + columnWidth2 <= 0 || left >= canvasRect.width) return;
-                const cell = document.createElement("div");
-                cell.className = "rvg-row-drag-preview-cell";
-                cell.style.left = `${left}px`;
-                cell.style.width = `${columnWidth2}px`;
-                cell.style.justifyContent = column2.align === "right" ? "flex-end" : column2.align === "center" ? "center" : "flex-start";
-                if (column2.rowDragHandle) {
-                  cell.appendChild(createRowDragHandleSvg());
-                } else if (column2.rowSelection) {
-                  const checkbox = document.createElement("span");
-                  checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
-                  checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
-                  cell.appendChild(checkbox);
-                } else {
-                  cell.textContent = getCellLabel(sourceIndex, columnIndex);
-                }
-                if (selection?.rowKey === rowKey2 && selection.columnKey === column2.key) {
-                  cell.classList.add("is-selected");
-                }
-                preview2.appendChild(cell);
-              });
-              frame.appendChild(preview2);
-              container.appendChild(frame);
-              return () => frame.remove();
-            }
+            const frame = document.createElement("div");
+            frame.className = "rvg-row-drag-preview-frame";
+            frame.style.width = `${canvasRect.width + 4}px`;
+            frame.style.height = `${rowHeight + 4}px`;
             const preview = document.createElement("div");
-            preview.className = "rvg-column-drag-preview";
-            const columnWidth = metrics[sourceIndex].width;
-            preview.style.width = `${columnWidth}px`;
-            preview.style.height = `${canvasRect.height}px`;
-            const column = columns[sourceIndex];
-            const header = document.createElement("div");
-            header.className = "rvg-column-drag-preview-header";
-            header.style.top = `${fixedHeader ? 0 : -scrollRef.current.top}px`;
-            header.style.height = `${headerHeight}px`;
-            header.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-            header.textContent = column.title;
-            const visibleActions = getVisibleHeaderActions(column, columnWidth, columnDraggable, measureHeaderTitleWidth(sourceIndex), headerActionSlotWidth);
-            let actionRight = 2;
-            if (visibleActions.drag) {
-              const icon = createHeaderDragHandleSvg();
-              icon.classList.add("rvg-preview-header-icon");
-              icon.style.width = `${headerActionSize}px`;
-              icon.style.height = `${headerActionSize}px`;
-              icon.style.right = `${actionRight}px`;
-              header.appendChild(icon);
-              actionRight += headerActionSlotWidth;
-            }
-            if (visibleActions.sort) {
-              const direction = sortState?.columnKey === column.key ? sortState.direction : null;
-              const icon = createHeaderSortSvg(direction);
-              icon.classList.add("rvg-preview-header-icon");
-              icon.style.width = `${headerActionSize}px`;
-              icon.style.height = `${headerActionSize}px`;
-              icon.style.right = `${actionRight}px`;
-              header.appendChild(icon);
-              actionRight += headerActionSlotWidth;
-            }
-            if (visibleActions.filter) {
-              const icon = createHeaderSearchSvg(Boolean(filterValues[column.key]));
-              icon.classList.add("rvg-preview-header-icon", "rvg-preview-header-search-icon");
-              icon.style.width = `${headerActionSize}px`;
-              icon.style.height = `${headerActionSize}px`;
-              icon.style.right = `${actionRight}px`;
-              header.appendChild(icon);
-            }
-            preview.appendChild(header);
-            for (let rowIndex = domRange.rowStart; rowIndex < domRange.rowEnd; rowIndex += 1) {
-              const row = rows[rowIndex];
-              const rowKey2 = getRowKey(row, rowIndex);
+            preview.className = "rvg-row-drag-preview";
+            preview.style.width = `${canvasRect.width}px`;
+            preview.style.height = `${rowHeight}px`;
+            const row = rows[sourceIndex];
+            const rowKey2 = getRowKey(row, sourceIndex);
+            columns.forEach((column, columnIndex) => {
+              const left = getDisplayedColumnLeft(columnIndex);
+              const columnWidth = metrics[columnIndex].width;
+              if (left + columnWidth <= 0 || left >= canvasRect.width) return;
               const cell = document.createElement("div");
-              cell.className = "rvg-column-drag-preview-cell";
-              cell.style.top = `${bodyTop + rowIndex * rowHeight - scrollRef.current.top}px`;
-              cell.style.height = `${rowHeight}px`;
+              cell.className = "rvg-row-drag-preview-cell";
+              cell.style.left = `${left}px`;
+              cell.style.width = `${columnWidth}px`;
               cell.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-              const key = `${typeof rowKey2}:${String(rowKey2)}\0${column.key}`;
-              if (selectedRowKeySet.has(rowKey2) || selectedColumnKeySet.has(column.key)) {
-                cell.classList.add("is-axis-selected");
-              }
-              if (!insertedRowKeys.has(rowKey2) && editedCellKeys.has(key)) cell.classList.add("is-edited");
-              if (selection?.rowKey === rowKey2 && selection.columnKey === column.key) {
-                cell.classList.remove("is-edited");
-                cell.classList.add("is-selected");
+              if (column.rowDragHandle) {
+                cell.appendChild(createRowDragHandleSvg());
+              } else if (column.rowSelection) {
+                const checkbox = document.createElement("span");
+                checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
+                checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
+                cell.appendChild(checkbox);
+              } else {
+                cell.textContent = getCellLabel(sourceIndex, columnIndex);
               }
-              cell.textContent = getCellLabel(rowIndex, sourceIndex);
+              if (selection?.rowKey === rowKey2 && selection.columnKey === column.key) cell.classList.add("is-selected");
               preview.appendChild(cell);
-            }
-            container.appendChild(preview);
-            return () => preview.remove();
+            });
+            frame.appendChild(preview);
+            container.appendChild(frame);
+            return () => frame.remove();
           }
         });
       },
       onDragStart: ({ source }) => {
+        const sourceIndex = Number(source.data.sourceIndex);
         suppressClickRef.current = true;
         hideDragTooltips();
         document.documentElement.classList.add("rvg-is-dragging");
         canvas.style.cursor = "move";
-        if (source.data.type === "table-row") {
-          const sourceIndex = Number(source.data.sourceIndex);
-          setRowDragPreview({ sourceIndex, targetIndex: sourceIndex });
-        }
+        setRowDragPreview({ sourceIndex, targetIndex: sourceIndex });
       },
       onDrag: ({ source, location }) => {
         const target = location.current.dropTargets[0]?.data;
         const sourceIndex = Number(source.data.sourceIndex);
-        if (source.data.type === "table-row") {
-          const rawTargetIndex = Number(target?.targetIndex);
-          if (!Number.isInteger(rawTargetIndex)) {
-            setRowDragPreview(null);
-            return setRowDragGuide(null);
-          }
-          const edge2 = target?.rowEdge;
-          let targetIndex2 = rawTargetIndex + (edge2 === "bottom" ? 1 : 0);
-          if (sourceIndex < targetIndex2) targetIndex2 -= 1;
-          targetIndex2 = Math.max(0, Math.min(rows.length - 1, targetIndex2));
-          setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex2 ? current : { sourceIndex, targetIndex: targetIndex2 });
-          setRowDragGuide(bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top + (edge2 === "bottom" ? rowHeight : 0));
-          return;
-        }
-        const targetIndex = Number(target?.targetIndex);
-        if (!Number.isInteger(targetIndex) || target?.headerKind !== source.data.headerKind || target?.parentKey !== source.data.parentKey || target?.fixed !== source.data.fixed) {
-          validColumnDropRef.current = null;
-          setColumnDropTarget(null);
-          setDragGuide(null);
-          return;
-        }
-        const edge = target?.columnEdge;
-        const destinationIndex = getColumnDropIndex(sourceIndex, targetIndex, edge);
-        columnDragPreviewRef.current = { sourceIndex, targetIndex: destinationIndex };
-        if (destinationIndex === sourceIndex) {
-          validColumnDropRef.current = null;
-          setColumnDropTarget(null);
-          setDragGuide(null);
-          return;
-        }
-        validColumnDropRef.current = {
-          sourceIndex,
-          targetIndex: destinationIndex,
-          rawTargetIndex: targetIndex,
-          targetKey: String(target.targetKey),
-          headerKind: source.data.headerKind === "group" ? "group" : "column",
-          parentKey: typeof source.data.parentKey === "string" ? source.data.parentKey : void 0,
-          fixed: source.data.fixed === "left" || source.data.fixed === "right" ? source.data.fixed : void 0,
-          columnEdge: edge === "right" ? "right" : "left"
-        };
-        const siblingCells = headerCells.filter((cell) => cell.level === Number(source.data.headerLevel) && (cell.leaf ? "column" : "group") === source.data.headerKind && cell.parentKey === source.data.parentKey && columns[cell.startIndex]?.fixed === source.data.fixed);
-        const targetEndIndex = Number.isInteger(target?.targetEndIndex) ? Number(target.targetEndIndex) : targetIndex;
-        const hoveredTargetCell = siblingCells.find((cell) => cell.startIndex === targetIndex && cell.endIndex === targetEndIndex);
-        if (!hoveredTargetCell) {
-          validColumnDropRef.current = null;
-          setColumnDropTarget(null);
-          setDragGuide(null);
-          return;
-        }
-        const highlightedCell = edge === "right" ? hoveredTargetCell : siblingCells.filter((cell) => cell.endIndex < hoveredTargetCell.startIndex).sort((left, right) => right.endIndex - left.endIndex)[0] ?? hoveredTargetCell;
-        setColumnDropTarget({ startIndex: highlightedCell.startIndex, endIndex: highlightedCell.endIndex });
-        const targetLeft = Number(target?.targetLeft);
-        const targetWidth = Number(target?.targetWidth);
-        if (!Number.isFinite(targetLeft) || !Number.isFinite(targetWidth)) {
-          validColumnDropRef.current = null;
-          setColumnDropTarget(null);
-          setDragGuide(null);
+        const rawTargetIndex = Number(target?.targetIndex);
+        if (!Number.isInteger(rawTargetIndex)) {
+          setRowDragPreview(null);
+          setRowDragGuide(null);
           return;
         }
-        const guideTop = headerRowOffsets[Number(source.data.headerLevel)] ?? 0;
-        setDragGuide(edge === "right" ? targetLeft + targetWidth : targetLeft, guideTop);
+        const edge = target?.rowEdge;
+        let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
+        if (sourceIndex < targetIndex) targetIndex -= 1;
+        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
+        setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex, targetIndex });
+        setRowDragGuide(bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top + (edge === "bottom" ? rowHeight : 0));
       },
       onDrop: ({ source, location }) => {
-        document.documentElement.classList.remove("rvg-is-dragging");
         const target = location.current.dropTargets[0]?.data;
         const sourceIndex = Number(source.data.sourceIndex);
-        if (source.data.type === "table-row") {
-          const rawTargetIndex = Number(target?.targetIndex);
-          let targetIndex = rawTargetIndex + (target?.rowEdge === "bottom" ? 1 : 0);
-          if (sourceIndex < targetIndex) targetIndex -= 1;
-          targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
-          scrollerRef.current?.classList.add("rvg-row-drop-settling");
-          setRowDragPreview(null);
-          setRowDragGuide(null);
-          canvas.style.cursor = "default";
-          if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex) applyRowOrder(sourceIndex, targetIndex);
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
-          });
-          window.setTimeout(() => {
-            suppressClickRef.current = false;
-          }, 0);
-          return;
-        }
-        const validDrop = validColumnDropRef.current;
+        const rawTargetIndex = Number(target?.targetIndex);
+        let targetIndex = rawTargetIndex + (target?.rowEdge === "bottom" ? 1 : 0);
+        if (sourceIndex < targetIndex) targetIndex -= 1;
+        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
+        scrollerRef.current?.classList.add("rvg-row-drop-settling");
+        setRowDragPreview(null);
+        setRowDragGuide(null);
+        document.documentElement.classList.remove("rvg-is-dragging");
         canvas.style.cursor = "default";
-        setDragGuide(null);
-        setColumnDropTarget(null);
-        columnDragPreviewRef.current = null;
-        validColumnDropRef.current = null;
-        if (validDrop) {
-          applyColumnOrder(
-            validDrop.sourceIndex - utilityColumnCount,
-            validDrop.targetIndex - utilityColumnCount,
-            {
-              type: validDrop.headerKind,
-              sourceKey: String(source.data.sourceKey),
-              targetKey: validDrop.targetKey,
-              parentKey: validDrop.parentKey,
-              placement: getColumnDropPlacement(validDrop.sourceIndex, validDrop.rawTargetIndex, validDrop.columnEdge)
-            }
-          );
-        }
+        if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex) applyRowOrder(sourceIndex, targetIndex);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
+        });
         window.setTimeout(() => {
           suppressClickRef.current = false;
         }, 0);
@@ -3296,43 +3090,14 @@ function TableInner({
     });
     const cleanupDrop = dropTargetForElements({
       element: canvas,
-      canDrop: ({ source }) => source.data.type === "table-column" || source.data.type === "table-row",
+      canDrop: ({ source }) => source.data.type === "table-row",
       getDropEffect: () => "move",
-      getData: ({ input, element, source }) => {
-        if (source.data.type === "table-row") {
-          const targetIndex2 = locateRow(input.clientY);
-          if (targetIndex2 < 0) return { targetIndex: -1 };
-          const rowTop = bodyTop + targetIndex2 * rowHeight - scrollRef.current.top;
-          const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
-          return attachClosestEdge({ targetIndex: targetIndex2, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
-        }
-        const hoveredColumnIndex = locateColumn(input.clientX);
-        const targetCell = locateHeaderCell(input.clientX, input.clientY) ?? headerCells.find((cell) => hoveredColumnIndex >= cell.startIndex && hoveredColumnIndex <= cell.endIndex && cell.level === Number(source.data.headerLevel) && (cell.leaf ? "column" : "group") === source.data.headerKind && cell.parentKey === source.data.parentKey);
-        if (!targetCell) return { targetIndex: -1 };
-        let targetIndex = targetCell.startIndex;
-        const targetFixed = columns[targetCell.startIndex]?.fixed;
-        const headerKind = targetCell.leaf ? "column" : "group";
-        if (source.data.headerKind !== headerKind || source.data.parentKey !== targetCell.parentKey || source.data.fixed !== targetFixed) return { targetIndex: -1 };
-        if (columns[targetIndex].rowSelection || columns[targetIndex].rowDragHandle || columns[targetIndex].rowNumber) {
-          const fixedSide = columns[Number(source.data.sourceIndex)]?.fixed;
-          targetIndex = columns.findIndex((column, index) => index > targetIndex && column.fixed === fixedSide && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-          if (targetIndex < 0) return { targetIndex: -1 };
-          return { targetIndex, columnEdge: "left" };
-        }
-        const left = getHeaderCellLeft(targetCell);
-        const targetWidth = targetCell.leaf ? metrics[targetIndex].width : getHeaderCellWidth(targetCell);
-        const columnEdge = input.clientX - canvas.getBoundingClientRect().left < left + targetWidth / 2 ? "left" : "right";
-        return attachClosestEdge({
-          targetIndex,
-          targetEndIndex: targetCell.endIndex,
-          targetKey: targetCell.key,
-          parentKey: targetCell.parentKey,
-          headerKind,
-          fixed: targetFixed,
-          targetLeft: left,
-          targetWidth,
-          columnEdge
-        }, { element, input, allowedEdges: ["left", "right"] });
+      getData: ({ input, element }) => {
+        const targetIndex = locateRow(input.clientY);
+        if (targetIndex < 0) return { targetIndex: -1 };
+        const rowTop = bodyTop + targetIndex * rowHeight - scrollRef.current.top;
+        const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
+        return attachClosestEdge({ targetIndex, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
       }
     });
     return () => {
@@ -3340,7 +3105,7 @@ function TableInner({
       cleanupDrag();
       cleanupDrop();
     };
-  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
+  }, [applyRowOrder, bodyTop, columns, getCellLabel, getDisplayedColumnLeft, getRowKey, hideDragTooltips, locateColumn, locateRow, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setRowDragGuide]);
   const locateCell = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3787,6 +3552,113 @@ function TableInner({
     setResizeGuideX(null);
     setResizeGuideTop(0);
   }, []);
+  const clearColumnOrderPointerDrag = useCallback2((canvas) => {
+    columnOrderDragRef.current = null;
+    columnDragPreviewRef.current = null;
+    validColumnDropRef.current = null;
+    setColumnDropTarget(null);
+    setDragGuide(null);
+    document.documentElement.classList.remove("rvg-is-dragging");
+    canvas.style.cursor = "default";
+  }, [setDragGuide]);
+  const handleColumnOrderPointerDown = useCallback2((event) => {
+    if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
+    const sourceCell = locateHeaderCell(event.clientX, event.clientY);
+    if (!sourceCell || locateHeaderResizeCell(event.clientX, event.clientY)) return;
+    if (sourceCell.leaf && locateHeaderAction(event.clientX, sourceCell.startIndex)) return;
+    const sourceColumn = columns[sourceCell.startIndex];
+    if (!sourceColumn || sourceColumn.rowSelection || sourceColumn.rowDragHandle || sourceColumn.rowNumber) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    columnOrderDragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      active: false,
+      sourceCell
+    };
+  }, [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";
+    }
+    event.preventDefault();
+    const sourceCell = drag.sourceCell;
+    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) {
+      validColumnDropRef.current = null;
+      setColumnDropTarget(null);
+      setDragGuide(null);
+      return;
+    }
+    const targetColumn = columns[targetCell.startIndex];
+    if (!targetColumn || targetColumn.rowSelection || targetColumn.rowDragHandle || targetColumn.rowNumber || targetCell.leaf !== sourceCell.leaf || targetCell.parentKey !== sourceCell.parentKey || targetColumn.fixed !== columns[sourceCell.startIndex]?.fixed) {
+      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(
+      sourceCell.startIndex,
+      targetCell.startIndex,
+      columnEdge,
+      columns.length
+    );
+    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
+    if (destinationIndex === sourceCell.startIndex) {
+      validColumnDropRef.current = null;
+      setColumnDropTarget(null);
+      setDragGuide(null);
+      return;
+    }
+    validColumnDropRef.current = {
+      sourceIndex: sourceCell.startIndex,
+      targetIndex: destinationIndex,
+      rawTargetIndex: targetCell.startIndex,
+      targetKey: targetCell.key,
+      headerKind: sourceCell.leaf ? "column" : "group",
+      parentKey: sourceCell.parentKey,
+      fixed: targetColumn.fixed,
+      columnEdge
+    };
+    setColumnDropTarget({ startIndex: targetCell.startIndex, endIndex: targetCell.endIndex });
+    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
+  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
+  const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
+    const drag = columnOrderDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    const validDrop = validColumnDropRef.current;
+    if (apply && drag.active && validDrop) {
+      applyColumnOrder(
+        validDrop.sourceIndex - utilityColumnCount,
+        validDrop.targetIndex - utilityColumnCount,
+        {
+          type: validDrop.headerKind,
+          sourceKey: drag.sourceCell.key,
+          targetKey: validDrop.targetKey,
+          parentKey: validDrop.parentKey,
+          placement: resolveColumnDropPlacement(validDrop.columnEdge)
+        }
+      );
+    }
+    const wasActive = drag.active;
+    clearColumnOrderPointerDrag(event.currentTarget);
+    if (wasActive) window.setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+  }, [applyColumnOrder, clearColumnOrderPointerDrag, utilityColumnCount]);
   const queueSortStateChange = useCallback2((next) => {
     setSortState(next);
   }, []);
@@ -3796,7 +3668,7 @@ function TableInner({
     const isAxisSelected = selectedColumnKeySet.has(column.key);
     const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
     const hoveredColumnClassName = hoveredHeaderColumnIndex === columnIndex ? " is-header-hovered" : "";
-    const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
+    const top = column.renderHeader ? headerLeafTop + 8 + Math.max(0, (16 - headerActionSize) / 2) : headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
     const icons = [];
@@ -4600,7 +4472,7 @@ function TableInner({
               hideDragTooltips();
               return;
             }
-            if (columnDragRef.current) return;
+            if (columnDragRef.current || columnOrderDragRef.current?.active) return;
             const rect = event.currentTarget.getBoundingClientRect();
             const localY = event.clientY - rect.top;
             const headerY = fixedHeader ? 0 : -scrollRef.current.top;
@@ -4717,20 +4589,22 @@ function TableInner({
               event.currentTarget.style.cursor = "move";
             }
             handleColumnPointerDown(event);
+            if (!columnDragRef.current) handleColumnOrderPointerDown(event);
             beginRangeDrag(event);
           },
           onPointerMove: (event) => {
             handleColumnPointerMove(event);
+            handleColumnOrderPointerMove(event);
             updateRangeDrag(event);
           },
           onPointerUp: (event) => {
-            document.documentElement.classList.remove("rvg-is-dragging");
             handleColumnPointerUp(event);
+            finishColumnOrderPointerDrag(event, true);
             endRangeDrag(event);
           },
           onPointerCancel: (event) => {
-            document.documentElement.classList.remove("rvg-is-dragging");
             handleColumnPointerUp(event);
+            finishColumnOrderPointerDrag(event, false);
             endRangeDrag(event);
           },
           onClick: (event) => {