@lensui/lens-table 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -57,6 +57,7 @@ var ZH_CN_GRID_LABELS = {
   sortDesc: "\u5F53\u524D\uFF1A\u964D\u5E8F",
   sortBoth: "\u5347\u5E8F / \u964D\u5E8F",
   dragColumn: "\u62D6\u52A8\u5217\u6392\u5E8F",
+  revealSelectedCell: "\u5B9A\u4F4D\u5230\u9009\u4E2D\u5355\u5143\u683C",
   previousYear: "\u4E0A\u4E00\u5E74",
   nextYear: "\u4E0B\u4E00\u5E74",
   previousMonth: "\u4E0A\u4E2A\u6708",
@@ -125,6 +126,7 @@ var EN_US_GRID_LABELS = {
   sortDesc: "Current: descending",
   sortBoth: "Ascending / descending",
   dragColumn: "Drag column to reorder",
+  revealSelectedCell: "Reveal selected cell",
   previousYear: "Previous year",
   nextYear: "Next year",
   previousMonth: "Previous month",
@@ -316,16 +318,6 @@ function ContextMenuIcon({ type }) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "rvg-context-menu-svg", viewBox: "0 0 16 16", "aria-hidden": "true", children: paths[type].map((path) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: path }, path)) });
 }
-function RowDragHandleIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 16 16", focusable: "false", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "4", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "4", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "8", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "8", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "12", r: "1" })
-  ] });
-}
 function LoadingSpinnerIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 12a8 8 0 1 1-3.1-6.3" }) });
 }
@@ -333,7 +325,6 @@ function LoadingSpinnerIcon() {
 // src/components/editors/ChoiceEditor.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCancel }) {
-  const editorStyle = typeof style.width === "number" ? { ...style, width: Math.max(0, style.width - 1) } : style;
   const collection = (0, import_select.createListCollection)({
     items: options,
     itemToValue: (item) => item.value,
@@ -343,7 +334,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
     import_select.Select.Root,
     {
       className: "rvg-choice-editor",
-      style: editorStyle,
+      style,
       collection,
       value: value ? [value] : [],
       defaultOpen: true,
@@ -754,6 +745,48 @@ 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
 var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -774,6 +807,7 @@ function getDisplayLabel(column, row, rowIndex) {
 
 // src/core/layout.ts
 var DEFAULT_COLUMN_WIDTH = 140;
+var HEADER_ACTION_SLOT_WIDTH = 16;
 function isDataColumn(column) {
   return !column.rowSelection && !column.rowDragHandle && !column.rowNumber;
 }
@@ -788,7 +822,7 @@ function getHeaderTitleRequiredWidth(column, titleWidth) {
   return minimumReadableTitleWidth + (column.align === "center" ? 20 : 22);
 }
 function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26) {
-  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / 18));
+  const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / HEADER_ACTION_SLOT_WIDTH));
   const candidates = [
     isColumnFilterable(column) ? "filter" : null,
     isColumnSortable(column) ? "sort" : null,
@@ -867,12 +901,15 @@ var COLORS = {
   grid: "#e3e6e8",
   text: "#202124",
   muted: "#5f6368",
+  icon: "#9aa0a6",
+  borderStrong: "#b8bec4",
   selection: "#1677ff",
   selectionFill: "#edf4ff",
   axisSelectionFill: "#e8f2ff",
   rowHoverFill: "#f6f9fc",
   editedFill: "#fff1b8",
   insertedFill: "#c8ead4",
+  columnDropTargetFill: "#eeeeee",
   stripe: "#fafbfc"
 };
 function ellipsizeText(context, text, maxWidth) {
@@ -892,7 +929,7 @@ function ellipsizeText(context, text, maxWidth) {
   return `${text.slice(0, start)}${ellipsis}`;
 }
 function paintGrid(options) {
-  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview } = options;
+  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
@@ -914,6 +951,7 @@ function paintGrid(options) {
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
   const rightFixedWidth = columns.reduce((value, column, index) => column.fixed === "right" ? value + metrics[index].width : value, 0);
   const rightFixedLeft = width - rightFixedWidth;
+  const rightFixedBoundaryInset = rightFixedWidth > 0 && !verticalBorderless ? 1 : 0;
   const leftOffsets = /* @__PURE__ */ new Map();
   let leftOffset = 0;
   for (let index = 0; index < columns.length; index += 1) {
@@ -937,11 +975,19 @@ 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 getRowDragOffset = (rowIndex) => {
+    if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
+    if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
+      return rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0;
+    }
+    return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
+  };
+  const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
   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) {
       if (rowDragPreview?.sourceIndex === rowIndex) continue;
-      const shift = rowDragPreview ? rowDragPreview.sourceIndex < rowDragPreview.targetIndex ? rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0 : rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0 : 0;
+      const shift = getRowDragOffset(rowIndex);
       const y = bodyTop + rowIndex * rowHeight - scrollTop + shift;
       const row = rows[rowIndex];
       const rowKey = getRowKey(row, rowIndex);
@@ -974,6 +1020,10 @@ function paintGrid(options) {
           ctx.fillStyle = colors.rowHoverFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
+        if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+          ctx.fillStyle = colors.columnDropTargetFill;
+          ctx.fillRect(x, y, cellWidth, cellHeight);
+        }
         if (highlightInsertedRows && insertedRowKeys.has(rowKey)) {
           ctx.fillStyle = colors.insertedFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
@@ -1000,6 +1050,7 @@ function paintGrid(options) {
         }
         ctx.fillStyle = colors.grid;
         if (!verticalBorderless) ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
+        if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
@@ -1026,6 +1077,59 @@ function paintGrid(options) {
           if (columnIndex === rangeColumnStart) ctx.fillRect(x, y, 2, cellHeight);
           if (columnIndex === rangeColumnEnd) ctx.fillRect(x + cellWidth - 2, y, 2, cellHeight);
         }
+        if (column.rowDragHandle) {
+          const iconLeft = x + (cellWidth - 16) / 2;
+          const iconTop = y + (cellHeight - 16) / 2;
+          ctx.fillStyle = colors.icon;
+          ctx.beginPath();
+          for (const circleX of [5, 11]) {
+            for (const circleY of [4, 8, 12]) {
+              ctx.moveTo(iconLeft + circleX + 1, iconTop + circleY);
+              ctx.arc(iconLeft + circleX, iconTop + circleY, 1, 0, Math.PI * 2);
+            }
+          }
+          ctx.fill();
+        }
+        if (column.rowSelection) {
+          const iconLeft = x + (cellWidth - 16) / 2;
+          const iconTop = y + (cellHeight - 16) / 2;
+          const checked = selectedRowKeys.has(rowKey);
+          ctx.save();
+          ctx.lineWidth = 1;
+          if (rowSelectionMode === "single") {
+            ctx.beginPath();
+            ctx.arc(iconLeft + 8, iconTop + 8, 6.25, 0, Math.PI * 2);
+            ctx.fillStyle = colors.background;
+            ctx.fill();
+            ctx.strokeStyle = checked ? colors.selection : colors.borderStrong;
+            ctx.stroke();
+            if (checked) {
+              ctx.beginPath();
+              ctx.arc(iconLeft + 8, iconTop + 8, 3.25, 0, Math.PI * 2);
+              ctx.fillStyle = colors.selection;
+              ctx.fill();
+            }
+          } else {
+            ctx.beginPath();
+            ctx.roundRect(iconLeft + 1.5, iconTop + 1.5, 13, 13, 3);
+            ctx.fillStyle = checked ? colors.selection : colors.background;
+            ctx.fill();
+            ctx.strokeStyle = checked ? colors.selection : colors.borderStrong;
+            ctx.stroke();
+            if (checked) {
+              ctx.beginPath();
+              ctx.moveTo(iconLeft + 4.1, iconTop + 8);
+              ctx.lineTo(iconLeft + 6.45, iconTop + 10.35);
+              ctx.lineTo(iconLeft + 11.9, iconTop + 5.15);
+              ctx.strokeStyle = colors.background;
+              ctx.lineWidth = 1.75;
+              ctx.lineCap = "round";
+              ctx.lineJoin = "round";
+              ctx.stroke();
+            }
+          }
+          ctx.restore();
+        }
         if (!column.rowDragHandle && !column.rowSelection && !column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
           let label = "";
           try {
@@ -1081,6 +1185,10 @@ function paintGrid(options) {
         ctx.fillStyle = colors.selectionFill;
         ctx.fillRect(x, headerY, metric.width, headerHeight);
       }
+      if (columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex) {
+        ctx.fillStyle = colors.columnDropTargetFill;
+        ctx.fillRect(x, headerY, metric.width, headerHeight);
+      }
       ctx.fillStyle = colors.grid;
       if (!verticalBorderless) ctx.fillRect(x + metric.width - 1, headerY, 1, headerHeight);
       ctx.fillRect(x, headerY + headerHeight - 1, metric.width, 1);
@@ -1089,7 +1197,7 @@ function paintGrid(options) {
         ctx.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
         const titleWidth = ctx.measureText(column.title).width;
         const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
+        const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
         const contentWidth = Math.max(0, metric.width - actionWidth);
         const padding = 10;
         const clipWidth = contentWidth;
@@ -1137,28 +1245,28 @@ function paintGrid(options) {
     const markerBottom = Math.min(bottom, height);
     const startX = getColumnX(columnStart);
     const endX = getColumnX(columnEnd) + metrics[columnEnd].width;
-    const visibleLeft = columns[columnStart].fixed === "left" ? Math.max(0, startX) : Math.max(leftFixedWidth - 1, startX);
+    const visibleLeft = columns[columnStart].fixed === "left" ? Math.max(0, startX) : Math.max(leftFixedWidth, startX);
     const visibleRight = columns[columnEnd].fixed === "right" ? Math.min(width, endX) : Math.min(rightFixedLeft, endX);
     ctx.fillStyle = colors.selection;
     if (markerBottom > markerTop) {
       if (columns[columnStart].fixed === void 0 && startX < leftFixedWidth) {
-        ctx.fillRect(Math.max(0, leftFixedWidth - 1), markerTop, 2, markerBottom - markerTop);
+        ctx.fillRect(Math.max(0, leftFixedWidth), markerTop, 2, markerBottom - markerTop);
       }
       if (columns[columnEnd].fixed === void 0 && endX > rightFixedLeft) {
-        ctx.fillRect(Math.max(0, rightFixedLeft - 1), markerTop, 2, markerBottom - markerTop);
+        ctx.fillRect(Math.max(0, rightFixedLeft - 2 - rightFixedBoundaryInset), markerTop, 2, markerBottom - markerTop);
       }
     }
     if (visibleRight > visibleLeft) {
       if (top < clipTop) ctx.fillRect(visibleLeft, clipTop, visibleRight - visibleLeft, 2);
       if (bottom > height) ctx.fillRect(visibleLeft, height - 2, visibleRight - visibleLeft, 2);
     } else if (top < clipTop || bottom > height) {
-      const markerX = endX <= leftFixedWidth ? Math.max(0, leftFixedWidth - 1) : Math.max(0, rightFixedLeft - 1);
+      const markerX = endX <= leftFixedWidth ? Math.max(0, leftFixedWidth) : Math.max(0, rightFixedLeft - 2 - rightFixedBoundaryInset);
       ctx.fillRect(markerX, top < clipTop ? clipTop : height - 2, 2, 2);
     }
   }
   const selectedRow = selection ? rows[selection.rowIndex] : void 0;
   const hasValidSelection = Boolean(selection && selectedRow && getRowKey(selectedRow, selection.rowIndex) === selection.rowKey);
-  if (selection && hasValidSelection && !selectionRange) {
+  if (selection && hasValidSelection && !selectionRange && !rowDragPreview) {
     const metric = metrics[selection.columnIndex];
     if (metric) {
       const fixedSide = columns[selection.columnIndex].fixed;
@@ -1167,22 +1275,22 @@ function paintGrid(options) {
       const selectionWidth = getCellWidth(selection.columnIndex, span?.colSpan ?? 1);
       const selectionHeight = rowHeight * (span?.rowSpan ?? 1);
       const x = Math.round(getColumnX(selection.columnIndex));
-      const y = Math.round(bodyTop + selection.rowIndex * rowHeight - scrollTop);
+      const y = Math.round(bodyTop + selection.rowIndex * rowHeight - scrollTop + getRowDragOffset(selection.rowIndex));
       const borderWidth = 2;
       const visibleLeft = fixedSide === "left" ? 0 : leftFixedWidth;
       const selectionAreaRight = fixedSide === "right" ? width : width - rightFixedWidth;
       const visibleRight = x + selectionWidth;
       const visibleBottom = y + selectionHeight;
       const selectionTop = fixedHeader ? bodyTop : 0;
-      const selectionClipTop = fixedHeader ? Math.max(0, selectionTop - 1) : selectionTop;
+      const selectionClipTop = selectionTop;
       const hiddenAboveHeader = visibleBottom <= selectionTop;
       const hiddenBelowViewport = y >= height;
       const hiddenBehindLeft = !isFixed && visibleRight <= visibleLeft;
       const hiddenBehindRight = !isFixed && x >= selectionAreaRight;
-      const leftMarkerX = Math.max(0, leftFixedWidth - 1);
+      const leftMarkerX = Math.max(0, leftFixedWidth);
       if ((hiddenAboveHeader || hiddenBelowViewport) && (hiddenBehindLeft || hiddenBehindRight)) {
         const markerSize = 2;
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth;
+        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
         const markerY = hiddenAboveHeader ? selectionClipTop : height - markerSize;
         ctx.fillStyle = colors.selection;
         ctx.fillRect(markerX, markerY, markerSize, markerSize);
@@ -1190,7 +1298,7 @@ function paintGrid(options) {
       }
       ctx.save();
       ctx.beginPath();
-      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth - 1);
+      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth);
       const clipRight = Math.min(width, selectionAreaRight + 1);
       ctx.rect(clipLeft, selectionClipTop, clipRight - clipLeft, height - selectionClipTop);
       ctx.clip();
@@ -1208,14 +1316,14 @@ function paintGrid(options) {
       if (hiddenBehindLeft || hiddenBehindRight) {
         const markerTop = Math.max(y - borderWidth, selectionTop);
         const markerBottom = Math.min(y + selectionHeight + 1, height);
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth;
+        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
         ctx.fillRect(markerX, markerTop, borderWidth, Math.max(0, markerBottom - markerTop));
       }
       if (hiddenAboveHeader || hiddenBelowViewport || hiddenBehindLeft || hiddenBehindRight) {
         ctx.restore();
         return;
       }
-      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft - 1);
+      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft);
       const borderRight = Math.min(x + selectionWidth - 1, selectionAreaRight - borderWidth, width - borderWidth);
       const borderTop = Math.max(y - borderWidth, selectionClipTop);
       const borderBottom = Math.min(y + selectionHeight - 1, height - borderWidth);
@@ -1277,6 +1385,40 @@ function flattenDataColumns(columns, inheritedFixed, insideGroup = false) {
     return flattenDataColumns(column.children, column.fixed ?? inheritedFixed, true);
   });
 }
+function reconcileColumns(current, incoming) {
+  const incomingByKey = new Map(incoming.map((column) => [column.key, column]));
+  const ordered = current.flatMap((column) => {
+    const replacement = incomingByKey.get(column.key);
+    if (!replacement) return [];
+    incomingByKey.delete(column.key);
+    return [{
+      ...replacement,
+      children: replacement.children ? reconcileColumns(column.children ?? [], replacement.children) : void 0
+    }];
+  });
+  incoming.forEach((column) => {
+    if (incomingByKey.has(column.key)) ordered.push(column);
+  });
+  return ordered;
+}
+function reorderColumns(columns, detail) {
+  const reorder = (items) => {
+    const sourceIndex = items.findIndex((column2) => column2.key === detail.sourceKey);
+    const targetIndex = items.findIndex((column2) => column2.key === detail.targetKey);
+    if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) return items;
+    const next = items.slice();
+    const [column] = next.splice(sourceIndex, 1);
+    let insertIndex = targetIndex + (detail.placement === "after" ? 1 : 0);
+    if (sourceIndex < insertIndex) insertIndex -= 1;
+    next.splice(insertIndex, 0, column);
+    return next;
+  };
+  if (!detail.parentKey) return reorder(columns);
+  return columns.map((column) => {
+    if (column.key === detail.parentKey && column.children) return { ...column, children: reorder(column.children) };
+    return column.children ? { ...column, children: reorderColumns(column.children, detail) } : column;
+  });
+}
 function buildHeaderCells(sourceColumns, utilityColumnCount, depth) {
   const cells = [];
   let leafIndex = utilityColumnCount;
@@ -1324,6 +1466,25 @@ var createEmptyCellSpanLookup = () => ({
   covered: /* @__PURE__ */ new Map(),
   maxRowSpan: 1
 });
+var summaryFunctionIds = /* @__PURE__ */ new WeakMap();
+var nextSummaryFunctionId = 1;
+function getSummaryFunctionId(fn) {
+  if (!fn) return "";
+  const existing = summaryFunctionIds.get(fn);
+  if (existing !== void 0) return existing;
+  const next = nextSummaryFunctionId;
+  nextSummaryFunctionId += 1;
+  summaryFunctionIds.set(fn, next);
+  return next;
+}
+function getSummarySignature(columns) {
+  return columns.filter((column) => Boolean(column.summary)).map((column) => [
+    column.key,
+    String(column.dataIndex ?? ""),
+    typeof column.summary === "function" ? getSummaryFunctionId(column.summary) : "sum",
+    getSummaryFunctionId(column.formatter)
+  ].join("
")).join("");
+}
 async function calculateSummaryValues(columns, rows) {
   const values = /* @__PURE__ */ new Map();
   for (const column of columns) {
@@ -1362,7 +1523,7 @@ function resolveContextMenuSection(section, defaults) {
   return defaults;
 }
 function Table({
-  columns: sourceColumns,
+  columns: columnProps,
   rows: sourceRows,
   rowKey,
   width = "100%",
@@ -1391,23 +1552,21 @@ function Table({
   rowSelection,
   selectedRowKeys,
   defaultSelectedRowKeys,
-  onSelectedRowKeysChange,
+  onSelectedRowChange,
   columnSelection,
   selectedColumnKeys,
   defaultSelectedColumnKeys,
-  onSelectedColumnKeysChange,
+  onSelectedColumnChange,
   columnDraggable = true,
-  columnResizable = false,
-  onColumnOrderChange,
+  columnResizable = true,
+  onColumnsReorder,
   onColumnResize,
   rowDraggable = false,
-  onRowOrderChange,
+  onRowsReorder,
   onInsertRows,
   onDeleteRows,
-  sortState = null,
-  onSortStateChange,
-  filterValues = {},
-  onFilterValuesChange,
+  onSortChange,
+  onFilterChange,
   onCellChange,
   onCellContextMenu,
   contextMenu: contextMenuConfig = true,
@@ -1416,6 +1575,10 @@ function Table({
   style,
   ariaLabel = "Data grid"
 }) {
+  const [sourceColumns, setSourceColumns] = (0, import_react5.useState)(columnProps);
+  (0, import_react5.useEffect)(() => {
+    setSourceColumns((current) => reconcileColumns(current, columnProps));
+  }, [columnProps]);
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const headerDepth = (0, import_react5.useMemo)(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
@@ -1496,7 +1659,6 @@ function Table({
   const frameRef = (0, import_react5.useRef)(null);
   const textFrameRef = (0, import_react5.useRef)(null);
   const toastTimerRef = (0, import_react5.useRef)(null);
-  const sortDebounceRef = (0, import_react5.useRef)(null);
   const headerTooltipTimerRef = (0, import_react5.useRef)(null);
   const cellTooltipTimerRef = (0, import_react5.useRef)(null);
   const pendingHeaderTooltipKeyRef = (0, import_react5.useRef)("");
@@ -1508,6 +1670,7 @@ function Table({
   const dragGuideRef = (0, import_react5.useRef)(null);
   const rowDragGuideRef = (0, import_react5.useRef)(null);
   const selectionFocusRef = (0, import_react5.useRef)(null);
+  const selectionEdgeTargetRef = (0, import_react5.useRef)(null);
   const verticalScrollbarRef = (0, import_react5.useRef)(null);
   const verticalScrollbarThumbRef = (0, import_react5.useRef)(null);
   const verticalScrollbarDragRef = (0, import_react5.useRef)(null);
@@ -1526,6 +1689,7 @@ function Table({
   const suppressClickRef = (0, import_react5.useRef)(false);
   const hasCompletedLoadRef = (0, import_react5.useRef)(!loading);
   const columnDragPreviewRef = (0, import_react5.useRef)(null);
+  const validColumnDropRef = (0, import_react5.useRef)(null);
   const hoveredHeaderActionRef = (0, import_react5.useRef)(null);
   const hoveredRowIndexRef = (0, import_react5.useRef)(null);
   const [viewport, setViewport] = (0, import_react5.useState)({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
@@ -1533,11 +1697,8 @@ function Table({
   const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
   const [scrollPosition, setScrollPosition] = (0, import_react5.useState)({ left: 0, top: 0 });
   const scrollRef = (0, import_react5.useRef)({ left: 0, top: 0 });
-  const [selection, setSelection] = useControllableValue(selectedCell, defaultSelectedCell, onSelectedCellChange);
-  const [selectionRange, setSelectionRange] = (0, import_react5.useState)(null);
-  const rangeDragRef = (0, import_react5.useRef)(null);
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
-    if (!onSelectedRowKeysChange) return;
+    if (!onSelectedRowChange) return;
     const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
     if (missing.size > 0) {
       for (let index = 0; index < rows.length && missing.size > 0; index += 1) {
@@ -1554,12 +1715,13 @@ function Table({
       const index = rowIndexByKeyRef.current.get(key);
       return row && index !== void 0 ? [{ row, index }] : [];
     });
-    onSelectedRowKeysChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
+    onSelectedRowChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
   });
-  const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange);
+  const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnChange);
   const [editing, setEditing] = (0, import_react5.useState)(null);
   const [draft, setDraft] = (0, import_react5.useState)("");
   const [rowDragPreview, setRowDragPreview] = (0, import_react5.useState)(null);
+  const [columnDropTarget, setColumnDropTarget] = (0, import_react5.useState)(null);
   (0, import_react5.useEffect)(() => {
     if (!loading) hasCompletedLoadRef.current = true;
   }, [loading]);
@@ -1628,6 +1790,8 @@ function Table({
     return () => observer.disconnect();
   }, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
   const [filterEditor, setFilterEditor] = (0, import_react5.useState)(null);
+  const [filterValues, setFilterValues] = (0, import_react5.useState)({});
+  const [sortState, setSortState] = (0, import_react5.useState)(null);
   const [contextMenu, setContextMenu] = (0, import_react5.useState)(null);
   const [insertCounts, setInsertCounts] = (0, import_react5.useState)({ before: 1, after: 1 });
   const [confirmAction, setConfirmAction] = (0, import_react5.useState)(null);
@@ -1640,7 +1804,20 @@ function Table({
   const [hoveredHeaderAction, setHoveredHeaderAction] = (0, import_react5.useState)(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0, import_react5.useState)(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = (0, import_react5.useState)(null);
-  const [displaySortState, setDisplaySortState] = (0, import_react5.useState)(sortState);
+  const hideDragTooltips = (0, import_react5.useCallback)(() => {
+    if (headerTooltipTimerRef.current !== null) {
+      clearTimeout(headerTooltipTimerRef.current);
+      headerTooltipTimerRef.current = null;
+    }
+    if (cellTooltipTimerRef.current !== null) {
+      clearTimeout(cellTooltipTimerRef.current);
+      cellTooltipTimerRef.current = null;
+    }
+    pendingHeaderTooltipKeyRef.current = "";
+    pendingCellTooltipKeyRef.current = "";
+    setVisibleHeaderTooltip(null);
+    setHoveredCellTooltip(null);
+  }, []);
   const [editedCellKeys, setEditedCellKeys] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
   const [cellAnnotations, setCellAnnotations] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
   const [annotationType, setAnnotationType] = (0, import_react5.useState)("corner");
@@ -1652,6 +1829,7 @@ function Table({
   const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
   const [pendingInserts, setPendingInserts] = (0, import_react5.useState)(() => []);
   const [insertedRowKeys, setInsertedRowKeys] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
+  const [rowOrderKeys, setRowOrderKeys] = (0, import_react5.useState)(null);
   const settledPendingInsertIdsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
   const getDataRowKey = (0, import_react5.useCallback)((row, index) => {
     return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
@@ -1666,7 +1844,7 @@ function Table({
     }
     return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
   }, [getDataRowKey, sourceRows]);
-  const rows = (0, import_react5.useMemo)(() => {
+  const orderedRows = (0, import_react5.useMemo)(() => {
     let next = sourceRows;
     if (pendingInserts.length > 0) {
       const activeInserts = pendingInserts.filter((insert) => {
@@ -1685,9 +1863,91 @@ function Table({
         insertedOffset += insert.rows.length;
       });
     }
-    if (pendingDeletedRowKeys.size === 0) return next;
-    return next.filter((row, index) => !pendingDeletedRowKeys.has(getDataRowKey(row, index)));
-  }, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, sourceRows]);
+    if (pendingDeletedRowKeys.size > 0) {
+      next = next.filter((row, index) => !pendingDeletedRowKeys.has(getDataRowKey(row, index)));
+    }
+    if (!rowOrderKeys) return next;
+    const rowsByKey = new Map(next.map((row, index) => [getDataRowKey(row, index), row]));
+    const ordered = rowOrderKeys.flatMap((key) => {
+      const row = rowsByKey.get(key);
+      if (!row) return [];
+      rowsByKey.delete(key);
+      return [row];
+    });
+    next.forEach((row, index) => {
+      const key = getDataRowKey(row, index);
+      if (rowsByKey.has(key)) ordered.push(row);
+    });
+    return ordered;
+  }, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, rowOrderKeys, sourceRows]);
+  const activeFilterValues = (0, import_react5.useMemo)(() => Object.fromEntries(
+    Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
+  ), [filterValues]);
+  const filteredRows = (0, import_react5.useMemo)(() => {
+    if (Object.keys(activeFilterValues).length === 0) return orderedRows;
+    if (onFilterChange) return onFilterChange(orderedRows, activeFilterValues);
+    return orderedRows.filter((row, rowIndex) => Object.entries(activeFilterValues).every(([columnKey, query]) => {
+      const column = columns.find((candidate) => candidate.key === columnKey);
+      if (!column) return true;
+      return getDisplayLabel(column, row, rowIndex).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
+    }));
+  }, [activeFilterValues, columns, onFilterChange, orderedRows]);
+  const rows = (0, import_react5.useMemo)(() => {
+    if (!sortState) return filteredRows;
+    if (onSortChange) return onSortChange(filteredRows, sortState);
+    const column = columns.find((candidate) => candidate.key === sortState.columnKey);
+    if (!column) return filteredRows;
+    const direction = sortState.direction === "asc" ? 1 : -1;
+    return filteredRows.slice().sort((left, right) => {
+      const leftValue = column.dataIndex === void 0 ? void 0 : left[column.dataIndex];
+      const rightValue = column.dataIndex === void 0 ? void 0 : right[column.dataIndex];
+      const result = typeof leftValue === "number" && typeof rightValue === "number" ? leftValue - rightValue : getDisplayLabel(column, left, 0).localeCompare(getDisplayLabel(column, right, 0), language);
+      return result * direction;
+    });
+  }, [columns, filteredRows, language, onSortChange, sortState]);
+  const resolveSelectionTarget = (0, import_react5.useCallback)((target) => {
+    if (target == null) return target;
+    const columnIndex = columns.findIndex((column) => column.key === target.columnKey);
+    const rowIndex = target.rowKey !== void 0 ? rows.findIndex((row2, index) => getDataRowKey(row2, index) === target.rowKey) : target.rowIndex ?? -1;
+    const row = rows[rowIndex];
+    if (columnIndex < 0 || !row) return null;
+    return {
+      rowIndex,
+      columnIndex,
+      rowKey: getDataRowKey(row, rowIndex),
+      columnKey: target.columnKey
+    };
+  }, [columns, getDataRowKey, rows]);
+  const resolvedSelectedCell = (0, import_react5.useMemo)(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
+  const resolvedDefaultSelectedCell = (0, import_react5.useMemo)(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
+  const handleSelectedCellChange = (0, import_react5.useCallback)((next) => {
+    if (!onSelectedCellChange) return;
+    if (!next) {
+      onSelectedCellChange(null);
+      return;
+    }
+    const row = rows[next.rowIndex];
+    const column = columns[next.columnIndex];
+    const value = row && column?.dataIndex !== void 0 ? row[column.dataIndex] : void 0;
+    onSelectedCellChange({ ...next, value });
+  }, [columns, onSelectedCellChange, rows]);
+  const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
+  const [selectionRange, setSelectionRange] = (0, import_react5.useState)(null);
+  const rangeDragRef = (0, import_react5.useRef)(null);
+  const applyRowOrder = (0, import_react5.useCallback)((sourceIndex, targetIndex) => {
+    if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
+    const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
+    const [entry] = nextEntries.splice(sourceIndex, 1);
+    nextEntries.splice(targetIndex, 0, entry);
+    const nextRows = nextEntries.map(({ row }) => row);
+    setRowOrderKeys(nextEntries.map(({ key }) => key));
+    onRowsReorder?.(nextRows, { sourceIndex, targetIndex });
+  }, [getDataRowKey, onRowsReorder, rows]);
+  const applyColumnOrder = (0, import_react5.useCallback)((sourceIndex, targetIndex, detail) => {
+    const nextColumns = reorderColumns(sourceColumns, detail);
+    setSourceColumns(nextColumns);
+    onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
+  }, [onColumnsReorder, sourceColumns]);
   (0, import_react5.useEffect)(() => {
     if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
     setPendingInserts((current) => {
@@ -1755,7 +2015,8 @@ function Table({
   const getScrollableColumnLeft = (0, import_react5.useCallback)((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
   const hasRowSelectionColumn = (0, import_react5.useMemo)(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const hasSummaryRow = (0, import_react5.useMemo)(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
+  const summarySignature = (0, import_react5.useMemo)(() => getSummarySignature(columns), [columns]);
+  const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
@@ -1764,21 +2025,21 @@ function Table({
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
   const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
   const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
-  const [summaryState, setSummaryState] = (0, import_react5.useState)(() => ({ columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
-  const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.columns !== columns || summaryState.rows !== rows);
-  const summaryValues = hasSummaryRow && summaryState.columns === columns && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
+  const [summaryState, setSummaryState] = (0, import_react5.useState)(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
+  const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
+  const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
   (0, import_react5.useEffect)(() => {
     let cancelled = false;
     if (!hasSummaryRow) {
-      setSummaryState((current) => current.columns === null && current.rows === null && current.values.size === 0 && !current.pending ? current : { columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false });
+      setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
       return () => {
         cancelled = true;
       };
     }
     setSummaryState((current) => ({
-      columns,
+      signature: summarySignature,
       rows,
-      values: current.columns === columns && current.rows === rows ? current.values : /* @__PURE__ */ new Map(),
+      values: current.signature === summarySignature && current.rows === rows ? current.values : /* @__PURE__ */ new Map(),
       pending: true
     }));
     if (loading) {
@@ -1791,13 +2052,13 @@ function Table({
       if (cancelled) return;
       const values = await calculateSummaryValues(columns, rows);
       if (cancelled) return;
-      setSummaryState({ columns, rows, values, pending: false });
+      setSummaryState({ signature: summarySignature, rows, values, pending: false });
     };
     void run();
     return () => {
       cancelled = true;
     };
-  }, [columns, hasSummaryRow, loading, rows]);
+  }, [hasSummaryRow, loading, rows, summarySignature]);
   const domRange = (0, import_react5.useMemo)(() => {
     if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     const currentScroll2 = scrollRef.current;
@@ -1928,22 +2189,177 @@ function Table({
       grid: readThemeColor(themeStyles, "--rvg-color-grid", "#e3e6e8"),
       text: readThemeColor(themeStyles, "--rvg-color-text", "#202124"),
       muted: readThemeColor(themeStyles, "--rvg-color-muted", "#5f6368"),
+      icon: readThemeColor(themeStyles, "--rvg-color-icon", "#9aa0a6"),
+      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"),
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
+      columnDropTargetFill: readThemeColor(themeStyles, "--rvg-color-column-drop-target-fill", "#eeeeee"),
       stripe: stripedColor ?? readThemeColor(themeStyles, "--rvg-color-stripe", "#fafbfc")
     };
     const scroll = scrollRef.current;
     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, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, colors: themeColors });
-  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, 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 });
+  }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, 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]);
+  const drawImmediately = (0, import_react5.useCallback)(() => {
+    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    frameRef.current = null;
+    draw();
+  }, [draw]);
+  const getSelectionHorizontalVisibility = (0, import_react5.useCallback)((scrollLeft) => {
+    if (!selection || selectionRange) return "visible";
+    const column = columns[selection.columnIndex];
+    if (!column || column.fixed !== void 0) return "visible";
+    const span = getCellSpan(selection.rowIndex, selection.columnIndex);
+    const left = getScrollableColumnLeft(selection.columnIndex) - scrollLeft;
+    const right = left + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
+    if (right <= fixedWidth) return "hidden-left";
+    if (left >= viewport.width - rightFixedWidth) return "hidden-right";
+    return "visible";
+  }, [columns, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, rightFixedWidth, selection, selectionRange, viewport.width]);
+  const getSelectionEdgeIndicator = (0, import_react5.useCallback)((scrollLeft, scrollTop) => {
+    if (!selection || selectionRange) return null;
+    const row = rows[selection.rowIndex];
+    const metric = metrics[selection.columnIndex];
+    const column = columns[selection.columnIndex];
+    if (!row || !metric || !column || getRowKey(row, selection.rowIndex) !== selection.rowKey) return null;
+    const span = getCellSpan(selection.rowIndex, selection.columnIndex);
+    const rawLeft = column.fixed === "left" ? leftFixedOffsets.get(selection.columnIndex) ?? 0 : column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(selection.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(selection.columnIndex) - scrollLeft;
+    const rawRight = rawLeft + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
+    const rawTop = bodyTop + selection.rowIndex * rowHeight - scrollTop;
+    const rawBottom = rawTop + rowHeight * (span?.rowSpan ?? 1);
+    const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
+    const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
+    const verticalStart = fixedHeader ? bodyTop : 0;
+    const hiddenLeft = column.fixed === void 0 && rawRight <= horizontalStart;
+    const hiddenRight = column.fixed === void 0 && rawLeft >= horizontalEnd;
+    const hiddenTop = rawBottom <= verticalStart;
+    const hiddenBottom = rawTop >= renderHeight;
+    if (!hiddenLeft && !hiddenRight && !hiddenTop && !hiddenBottom) return null;
+    const borderWidth = 2;
+    const cornerLength = 10;
+    const hitSlop = 6;
+    const targetSize = borderWidth + hitSlop * 2;
+    const rightBoundaryInset = rightFixedWidth > 0 && hasVerticalBorders ? 1 : 0;
+    const markerX = hiddenLeft ? horizontalStart : horizontalEnd - borderWidth - rightBoundaryInset;
+    const markerY = hiddenTop ? verticalStart : renderHeight - borderWidth;
+    if (hiddenLeft || hiddenRight) {
+      let markerTop = Math.max(rawTop - borderWidth, verticalStart);
+      let markerBottom = Math.min(rawBottom + 1, renderHeight);
+      const topClip = Math.max(0, verticalStart - (rawTop - borderWidth));
+      const bottomClip = Math.max(0, rawBottom + 1 - renderHeight);
+      if (topClip > 0 || bottomClip > 0) {
+        const foldAtTop = topClip > 0;
+        const fold = Math.min(cornerLength, foldAtTop ? topClip : bottomClip);
+        if (fold > borderWidth) {
+          const cornerWidth = fold;
+          const cornerHeight = Math.max(cornerLength, markerBottom - markerTop);
+          const cornerOnLeft = hiddenLeft;
+          const shapeLeft = cornerOnLeft ? markerX : markerX + borderWidth - cornerWidth;
+          const shapeTop = foldAtTop ? verticalStart : renderHeight - cornerHeight;
+          return {
+            side: `${foldAtTop ? "top" : "bottom"}-${cornerOnLeft ? "left" : "right"}`,
+            orientation: "corner",
+            style: {
+              left: shapeLeft - hitSlop,
+              top: shapeTop - hitSlop,
+              width: cornerWidth + hitSlop * 2,
+              height: cornerHeight + hitSlop * 2
+            },
+            corner: { width: cornerWidth, height: cornerHeight }
+          };
+        }
+      }
+      if (markerBottom <= markerTop) return null;
+      return {
+        side: hiddenLeft ? "left" : "right",
+        orientation: "vertical",
+        viewportEdge: hiddenLeft && horizontalStart === 0 ? "left" : hiddenRight && horizontalEnd === viewport.width ? "right" : void 0,
+        style: {
+          left: markerX - hitSlop,
+          top: markerTop,
+          width: targetSize,
+          height: markerBottom - markerTop
+        }
+      };
+    }
+    const horizontalMarkerEnd = horizontalEnd - rightBoundaryInset;
+    let markerLeft = Math.max(rawLeft - borderWidth, horizontalStart);
+    let markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
+    const leftClip = Math.max(0, horizontalStart - (rawLeft - borderWidth));
+    const rightClip = Math.max(0, rawRight + 1 - horizontalMarkerEnd);
+    if (leftClip > 0 || rightClip > 0) {
+      const foldAtLeft = leftClip > 0;
+      const fold = Math.min(cornerLength, foldAtLeft ? leftClip : rightClip);
+      if (fold > borderWidth) {
+        const cornerWidth = Math.max(cornerLength, markerRight - markerLeft);
+        const cornerHeight = fold;
+        const shapeLeft = foldAtLeft ? horizontalStart : horizontalMarkerEnd - cornerWidth;
+        const shapeTop = hiddenTop ? verticalStart : renderHeight - cornerHeight;
+        return {
+          side: `${hiddenTop ? "top" : "bottom"}-${foldAtLeft ? "left" : "right"}`,
+          orientation: "corner",
+          style: {
+            left: shapeLeft - hitSlop,
+            top: shapeTop - hitSlop,
+            width: cornerWidth + hitSlop * 2,
+            height: cornerHeight + hitSlop * 2
+          },
+          corner: { width: cornerWidth, height: cornerHeight }
+        };
+      }
+    }
+    if (markerRight <= markerLeft) return null;
+    return {
+      side: hiddenTop ? "top" : "bottom",
+      orientation: "horizontal",
+      viewportEdge: hiddenTop && verticalStart === 0 ? "top" : hiddenBottom ? "bottom" : void 0,
+      style: {
+        left: markerLeft,
+        top: markerY - hitSlop,
+        width: markerRight - markerLeft,
+        height: targetSize
+      }
+    };
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  const syncSelectionEdgeTarget = (0, import_react5.useCallback)((scrollLeft, scrollTop) => {
+    const target = selectionEdgeTargetRef.current;
+    if (!target) return;
+    const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
+    if (!indicator) {
+      target.style.visibility = "hidden";
+      return;
+    }
+    const orientationChanged = !target.classList.contains(`is-${indicator.orientation}`);
+    target.className = `rvg-selection-edge-target is-${indicator.orientation} is-${indicator.side}${indicator.viewportEdge ? ` is-viewport-${indicator.viewportEdge}` : ""}${orientationChanged ? " is-shape-syncing" : ""}`;
+    target.style.left = `${Number(indicator.style.left)}px`;
+    target.style.top = `${Number(indicator.style.top)}px`;
+    target.style.width = `${Number(indicator.style.width)}px`;
+    target.style.height = `${Number(indicator.style.height)}px`;
+    if (indicator.corner) {
+      target.style.setProperty("--rvg-corner-width", `${indicator.corner.width}px`);
+      target.style.setProperty("--rvg-corner-height", `${indicator.corner.height}px`);
+      target.style.setProperty("--rvg-corner-hover-width-extension", "4px");
+      target.style.setProperty("--rvg-corner-hover-height-extension", "4px");
+    } else {
+      target.style.removeProperty("--rvg-corner-width");
+      target.style.removeProperty("--rvg-corner-height");
+      target.style.removeProperty("--rvg-corner-hover-width-extension");
+      target.style.removeProperty("--rvg-corner-hover-height-extension");
+    }
+    target.style.visibility = "visible";
+    if (orientationChanged) {
+      void target.offsetWidth;
+      target.classList.remove("is-shape-syncing");
+    }
+  }, [getSelectionEdgeIndicator]);
   (0, import_react5.useLayoutEffect)(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -1970,11 +2386,7 @@ function Table({
       }
     };
   }, [scheduleDraw]);
-  (0, import_react5.useEffect)(() => {
-    setDisplaySortState(sortState);
-  }, [sortState]);
   (0, import_react5.useEffect)(() => () => {
-    if (sortDebounceRef.current !== null) clearTimeout(sortDebounceRef.current);
     if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
     if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
     if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
@@ -2194,7 +2606,13 @@ function Table({
     }
     const nextThumbLeft = Math.max(0, Math.min(trackWidth - thumbWidth, event.clientX - trackRect.left - thumbWidth / 2));
     const maxThumbLeft = Math.max(1, trackWidth - thumbWidth);
-    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * maxScrollLeft;
+    const previousScrollLeft = scroller.scrollLeft;
+    const nextScrollLeft = nextThumbLeft / maxThumbLeft * maxScrollLeft;
+    const visibilityChanged = getSelectionHorizontalVisibility(previousScrollLeft) !== getSelectionHorizontalVisibility(nextScrollLeft);
+    scroller.scrollLeft = nextScrollLeft;
+    scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
+    syncSelectionEdgeTarget(scroller.scrollLeft, scroller.scrollTop);
+    if (visibilityChanged) drawImmediately();
     updateCustomScrollbars();
     horizontalScrollbarDragRef.current = {
       pointerId: event.pointerId,
@@ -2204,7 +2622,7 @@ function Table({
       thumbWidth,
       maxScrollLeft
     };
-  }, [showCustomScrollbar, updateCustomScrollbars]);
+  }, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
   const handleHorizontalScrollbarPointerMove = (0, import_react5.useCallback)((event) => {
     const drag = horizontalScrollbarDragRef.current;
     const scroller = scrollerRef.current;
@@ -2212,9 +2630,15 @@ function Table({
     event.preventDefault();
     const maxThumbLeft = Math.max(1, drag.trackWidth - drag.thumbWidth);
     const nextThumbLeft = Math.max(0, Math.min(maxThumbLeft, drag.startLeft + event.clientX - drag.startX));
-    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * drag.maxScrollLeft;
+    const previousScrollLeft = scroller.scrollLeft;
+    const nextScrollLeft = nextThumbLeft / maxThumbLeft * drag.maxScrollLeft;
+    const visibilityChanged = getSelectionHorizontalVisibility(previousScrollLeft) !== getSelectionHorizontalVisibility(nextScrollLeft);
+    scroller.scrollLeft = nextScrollLeft;
+    scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
+    syncSelectionEdgeTarget(scroller.scrollLeft, scroller.scrollTop);
+    if (visibilityChanged) drawImmediately();
     updateCustomScrollbars();
-  }, [updateCustomScrollbars]);
+  }, [drawImmediately, getSelectionHorizontalVisibility, syncSelectionEdgeTarget, updateCustomScrollbars]);
   const handleHorizontalScrollbarPointerUp = (0, import_react5.useCallback)((event) => {
     const drag = horizontalScrollbarDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -2229,6 +2653,7 @@ function Table({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {
       const row = rows[selection.rowIndex];
@@ -2250,9 +2675,9 @@ function Table({
           focus.style.display = "none";
         } else {
           const borderWidth = 2;
-          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
+          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
           const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
+          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
           const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
@@ -2282,7 +2707,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, updateCustomScrollbars, viewport.width]);
+  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars, viewport.width]);
   const locateColumn = (0, import_react5.useCallback)((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -2336,12 +2761,12 @@ function Table({
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = columnRight - (visibleActions.drag ? 18 : 4);
+    let right = columnRight - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
     if (visibleActions.sort) {
-      if (localX >= right - 18 && localX < right) return "sort";
-      right -= 18;
+      if (localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "sort";
+      right -= HEADER_ACTION_SLOT_WIDTH;
     }
-    if (visibleActions.filter && localX >= right - 18 && localX < right) return "filter";
+    if (visibleActions.filter && localX >= right - HEADER_ACTION_SLOT_WIDTH && localX < right) return "filter";
     return null;
   }, [columnDraggable, columns, getDisplayedColumnLeft, measureHeaderTitleWidth, metrics]);
   const isHeaderTitleTruncated = (0, import_react5.useCallback)((columnIndex) => {
@@ -2351,7 +2776,7 @@ function Table({
     const metric = metrics[columnIndex];
     const titleWidth = measureHeaderTitleWidth(columnIndex);
     const visibleActions = getVisibleHeaderActions(column, metric.width, columnDraggable, titleWidth);
-    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
+    const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
     return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
   }, [columnDraggable, columns, measureHeaderTitleWidth, metrics]);
   const locateHeaderDragHandle = (0, import_react5.useCallback)((clientX, columnIndex) => {
@@ -2370,6 +2795,30 @@ function Table({
     return fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
   const getHeaderCellWidth = (0, import_react5.useCallback)((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
+  const getHeaderCellEdgeFromMetrics = (0, import_react5.useCallback)((startIndex, endIndex, edge, nextMetrics) => {
+    const fixedSide = columns[startIndex]?.fixed;
+    const width2 = nextMetrics.slice(startIndex, endIndex + 1).reduce((total, metric) => total + metric.width, 0);
+    let left;
+    if (fixedSide === "left") {
+      left = 0;
+      for (let index = 0; index < startIndex; index += 1) {
+        if (columns[index].fixed === "left") left += nextMetrics[index]?.width ?? 0;
+      }
+    } else if (fixedSide === "right") {
+      let rightOffset = 0;
+      for (let index = columns.length - 1; index > startIndex; index -= 1) {
+        if (columns[index].fixed === "right") rightOffset += nextMetrics[index]?.width ?? 0;
+      }
+      left = viewport.width - rightOffset - width2;
+    } else {
+      left = 0;
+      for (let index = 0; index < startIndex; index += 1) {
+        if (columns[index].fixed === void 0) left += nextMetrics[index]?.width ?? 0;
+      }
+      left += fixedWidth - scrollRef.current.left;
+    }
+    return left + (edge === "right" ? width2 : 0);
+  }, [columns, fixedWidth, viewport.width]);
   const locateHeaderResizeHit = (0, import_react5.useCallback)((clientX, clientY) => {
     if (!columnResizable || !canvasRef.current) return null;
     const rect = canvasRef.current.getBoundingClientRect();
@@ -2380,6 +2829,7 @@ function Table({
     const level = getHeaderLevelAtY(localY, headerY);
     let closest = null;
     let distance = 6;
+    let priority = -1;
     for (const cell of headerCells) {
       if (cell.level !== level) continue;
       if (columns[cell.startIndex]?.rowSelection || columns[cell.startIndex]?.rowDragHandle || columns[cell.startIndex]?.rowNumber) continue;
@@ -2387,8 +2837,10 @@ function Table({
       const edge = fixedSide === "right" && cell.leaf ? "left" : "right";
       const edgeX = getHeaderCellLeft(cell) + (edge === "right" ? getHeaderCellWidth(cell) : 0);
       const nextDistance = Math.abs(localX - edgeX);
-      if (nextDistance < distance) {
+      const nextPriority = fixedSide === "right" ? 2 : fixedSide === "left" ? 1 : 0;
+      if (nextDistance < distance || nextDistance === distance && nextPriority > priority) {
         distance = nextDistance;
+        priority = nextPriority;
         closest = { cell, edge };
       }
     }
@@ -2480,6 +2932,7 @@ function Table({
         }
         const sourceIndex = headerDragCell.startIndex;
         columnDragPreviewRef.current = { sourceIndex, targetIndex: sourceIndex };
+        validColumnDropRef.current = null;
         return {
           type: "table-column",
           sourceIndex,
@@ -2490,13 +2943,26 @@ function Table({
           fixed: columns[headerDragCell.startIndex]?.fixed
         };
       },
-      onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
+      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" ? {
+          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))
+        };
         (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
           nativeSetDragImage,
+          getOffset: () => previewOffset,
           render: ({ container }) => {
-            const canvasRect = canvas.getBoundingClientRect();
             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`;
@@ -2522,10 +2988,14 @@ function Table({
                 } else {
                   cell.textContent = getCellLabel(sourceIndex, columnIndex);
                 }
+                if (selection?.rowKey === rowKey2 && selection.columnKey === column2.key) {
+                  cell.classList.add("is-selected");
+                }
                 preview2.appendChild(cell);
               });
-              container.appendChild(preview2);
-              return () => preview2.remove();
+              frame.appendChild(preview2);
+              container.appendChild(frame);
+              return () => frame.remove();
             }
             const preview = document.createElement("div");
             preview.className = "rvg-column-drag-preview";
@@ -2539,6 +3009,29 @@ function Table({
             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));
+            let actionRight = 2;
+            if (visibleActions.drag) {
+              const icon = createHeaderDragHandleSvg();
+              icon.classList.add("rvg-preview-header-icon");
+              icon.style.right = `${actionRight}px`;
+              header.appendChild(icon);
+              actionRight += HEADER_ACTION_SLOT_WIDTH;
+            }
+            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.right = `${actionRight}px`;
+              header.appendChild(icon);
+              actionRight += HEADER_ACTION_SLOT_WIDTH;
+            }
+            if (visibleActions.filter) {
+              const icon = createHeaderSearchSvg(Boolean(filterValues[column.key]));
+              icon.classList.add("rvg-preview-header-icon", "rvg-preview-header-search-icon");
+              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];
@@ -2567,6 +3060,8 @@ function Table({
       },
       onDragStart: ({ source }) => {
         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);
@@ -2592,30 +3087,66 @@ function Table({
         }
         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);
+          return;
+        }
         const guideTop = headerRowOffsets[Number(source.data.headerLevel)] ?? 0;
         setDragGuide(edge === "right" ? targetLeft + targetWidth : targetLeft, guideTop);
       },
       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 rawTargetIndex2 = Number(target?.targetIndex);
-          let targetIndex2 = rawTargetIndex2 + (target?.rowEdge === "bottom" ? 1 : 0);
-          if (sourceIndex < targetIndex2) targetIndex2 -= 1;
-          targetIndex2 = Math.max(0, Math.min(rows.length - 1, targetIndex2));
+          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(rawTargetIndex2) && sourceIndex !== targetIndex2) onRowOrderChange?.(sourceIndex, targetIndex2);
+          if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex) applyRowOrder(sourceIndex, targetIndex);
           requestAnimationFrame(() => {
             requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
           });
@@ -2624,21 +3155,22 @@ function Table({
           }, 0);
           return;
         }
-        const rawTargetIndex = Number(target?.targetIndex);
-        const targetIndex = columnDragPreviewRef.current?.targetIndex ?? (Number.isInteger(rawTargetIndex) ? getColumnDropIndex(sourceIndex, rawTargetIndex, target?.columnEdge) : rawTargetIndex);
+        const validDrop = validColumnDropRef.current;
         canvas.style.cursor = "default";
         setDragGuide(null);
+        setColumnDropTarget(null);
         columnDragPreviewRef.current = null;
-        if (Number.isInteger(rawTargetIndex) && Number.isInteger(targetIndex) && sourceIndex !== targetIndex && target?.headerKind === source.data.headerKind && target?.parentKey === source.data.parentKey && target?.fixed === source.data.fixed) {
-          onColumnOrderChange?.(
-            sourceIndex - utilityColumnCount,
-            targetIndex - utilityColumnCount,
+        validColumnDropRef.current = null;
+        if (validDrop) {
+          applyColumnOrder(
+            validDrop.sourceIndex - utilityColumnCount,
+            validDrop.targetIndex - utilityColumnCount,
             {
-              type: source.data.headerKind === "group" ? "group" : "column",
+              type: validDrop.headerKind,
               sourceKey: String(source.data.sourceKey),
-              targetKey: String(target.targetKey),
-              parentKey: typeof source.data.parentKey === "string" ? source.data.parentKey : void 0,
-              placement: getColumnDropPlacement(sourceIndex, rawTargetIndex, target.columnEdge)
+              targetKey: validDrop.targetKey,
+              parentKey: validDrop.parentKey,
+              placement: getColumnDropPlacement(validDrop.sourceIndex, validDrop.rawTargetIndex, validDrop.columnEdge)
             }
           );
         }
@@ -2650,6 +3182,7 @@ function Table({
     const cleanupDrop = (0, import_adapter.dropTargetForElements)({
       element: canvas,
       canDrop: ({ source }) => source.data.type === "table-column" || source.data.type === "table-row",
+      getDropEffect: () => "move",
       getData: ({ input, element, source }) => {
         if (source.data.type === "table-row") {
           const targetIndex2 = locateRow(input.clientY);
@@ -2658,7 +3191,8 @@ function Table({
           const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
           return (0, import_closest_edge.attachClosestEdge)({ targetIndex: targetIndex2, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
         }
-        const targetCell = locateHeaderCell(input.clientX, input.clientY);
+        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;
@@ -2675,6 +3209,7 @@ function Table({
         const columnEdge = input.clientX - canvas.getBoundingClientRect().left < left + targetWidth / 2 ? "left" : "right";
         return (0, import_closest_edge.attachClosestEdge)({
           targetIndex,
+          targetEndIndex: targetCell.endIndex,
           targetKey: targetCell.key,
           parentKey: targetCell.parentKey,
           headerKind,
@@ -2686,10 +3221,11 @@ function Table({
       }
     });
     return () => {
+      document.documentElement.classList.remove("rvg-is-dragging");
       cleanupDrag();
       cleanupDrop();
     };
-  }, [bodyTop, columnDraggable, columns, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerHeight, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, metrics, onColumnOrderChange, onRowOrderChange, rowDraggable, rowHeight, rows, selectedRowKeySet, setDragGuide, setRowDragGuide, utilityColumnCount]);
+  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
   const locateCell = (0, import_react5.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -2997,18 +3533,28 @@ function Table({
   const editorStyle = (0, import_react5.useMemo)(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
-    const fixedSide = columns[editing.columnIndex].fixed;
+    const column = columns[editing.columnIndex];
+    if (!metric || !column) return void 0;
+    const fixedSide = column.fixed;
     const span = getCellSpan(editing.rowIndex, editing.columnIndex);
     const cellWidth = getCellDisplayWidth(editing.columnIndex, span?.colSpan ?? 1);
     const cellHeight = rowHeight * (span?.rowSpan ?? 1);
     const cellLeft = fixedSide === "left" ? leftFixedOffsets.get(editing.columnIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(editing.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(editing.columnIndex) - scrollRef.current.left;
+    const cellTop = bodyTop + editing.rowIndex * rowHeight - scrollRef.current.top;
+    const horizontalStart = fixedSide === void 0 ? fixedWidth : 0;
+    const horizontalEnd = fixedSide === void 0 ? viewport.width - rightFixedWidth : viewport.width;
+    const verticalStart = fixedHeader ? bodyTop : 0;
+    const visibleLeft = Math.max(cellLeft, horizontalStart);
+    const visibleRight = Math.min(cellLeft + cellWidth, horizontalEnd, viewport.width);
+    const visibleTop = Math.max(cellTop, verticalStart);
+    const visibleBottom = Math.min(cellTop + cellHeight, renderHeight);
     return {
-      left: (fixedSide ? cellLeft : Math.max(cellLeft, fixedWidth)) + 1,
-      top: Math.max(fixedHeader ? bodyTop : 0, bodyTop + editing.rowIndex * rowHeight - scrollRef.current.top) + 1,
-      width: cellWidth - 2,
-      height: cellHeight - 2
+      left: visibleLeft,
+      top: visibleTop,
+      width: Math.max(0, visibleRight - visibleLeft),
+      height: Math.max(0, visibleBottom - visibleTop)
     };
-  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rowHeight, viewport.width]);
+  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
   const handleColumnPointerDown = (0, import_react5.useCallback)((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
@@ -3028,9 +3574,10 @@ function Table({
         columnIndex: resizeIndex,
         startX: event.clientX,
         startWidth: startWidths.reduce((total, width2) => total + width2, 0),
-        startGuideX,
         guideTop: headerRowOffsets[resizeCell.level] ?? 0,
         resizeEdge,
+        resizeStartIndex: resizeCell.startIndex,
+        resizeEndIndex: resizeCell.endIndex,
         resizeIndices,
         startWidths
       };
@@ -3047,6 +3594,12 @@ function Table({
     const minWidth = getMinimumColumnWidth(column, columnDraggable);
     const pointerDelta = Math.round(event.clientX - drag.startX);
     const delta = drag.resizeEdge === "left" ? -pointerDelta : pointerDelta;
+    const setGuideFromWidths = (nextWidths) => {
+      const widthByIndex = new Map(drag.resizeIndices.map((columnIndex, index) => [columnIndex, nextWidths[index]]));
+      const nextColumns = columns.map((column2, index) => widthByIndex.has(index) ? { ...column2, width: widthByIndex.get(index) } : column2);
+      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: viewport.width });
+      setResizeGuideX(getHeaderCellEdgeFromMetrics(drag.resizeStartIndex, drag.resizeEndIndex, drag.resizeEdge, nextMetrics));
+    };
     if (drag.resizeIndices.length > 1) {
       const minWidths = drag.resizeIndices.map((index) => getMinimumColumnWidth(columns[index], columnDraggable));
       const minTotalWidth = minWidths.reduce((total, width3) => total + width3, 0);
@@ -3063,13 +3616,13 @@ function Table({
       drag.resizeIndices.forEach((columnIndex, index) => {
         resizeColumn(columns[columnIndex].key, nextWidths[index]);
       });
-      setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - targetTotalWidth : targetTotalWidth - drag.startWidth));
+      setGuideFromWidths(nextWidths);
       return;
     }
     const width2 = Math.max(minWidth, Math.round(drag.startWidth + delta));
     resizeColumn(column.key, width2);
-    setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - width2 : width2 - drag.startWidth));
-  }, [columnDraggable, columns, resizeColumn]);
+    setGuideFromWidths([width2]);
+  }, [columnDraggable, columns, getHeaderCellEdgeFromMetrics, resizeColumn, viewport.width]);
   const handleColumnPointerUp = (0, import_react5.useCallback)((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
@@ -3079,19 +3632,14 @@ function Table({
     setResizeGuideTop(0);
   }, []);
   const queueSortStateChange = (0, import_react5.useCallback)((next) => {
-    setDisplaySortState(next);
-    if (sortDebounceRef.current !== null) clearTimeout(sortDebounceRef.current);
-    sortDebounceRef.current = setTimeout(() => {
-      sortDebounceRef.current = null;
-      onSortStateChange?.(next);
-    }, 200);
-  }, [onSortStateChange]);
+    setSortState(next);
+  }, []);
   const renderHeaderIcons = (columnIndex, left) => {
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
     const top = headerLeafTop + (headerLeafHeight - 14) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-    let right = left + metrics[columnIndex].width - (visibleActions.drag ? 18 : 4);
+    let right = left + metrics[columnIndex].width - (visibleActions.drag ? HEADER_ACTION_SLOT_WIDTH : 2);
     const icons = [];
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
@@ -3101,11 +3649,11 @@ function Table({
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
-      const direction = displaySortState?.columnKey === column.key ? displaySortState.direction : null;
+      const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${hovered ? " is-hovered" : ""}`, style: { left: right - 16, top }, direction }, "sort")
       );
-      right -= 18;
+      right -= HEADER_ACTION_SLOT_WIDTH;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
@@ -3132,7 +3680,7 @@ function Table({
       if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
       const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
       const visibleActions = cell?.leaf || !cell ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18 : columnDraggable ? 18 : 0;
+      const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
       const contentWidth2 = Math.max(0, cellWidth - actionWidth);
       const maxTextWidth = Math.max(0, contentWidth2 - 20);
       const textWidth = Math.min(titleWidth, maxTextWidth);
@@ -3151,7 +3699,7 @@ function Table({
       anchorLeft = anchorX;
       label = labels.dragColumn;
     } else if (action === "sort") {
-      const direction = displaySortState?.columnKey === column.key ? displaySortState.direction : null;
+      const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       label = direction === "asc" ? labels.sortAsc : direction === "desc" ? labels.sortDesc : labels.sortBoth;
       anchorX = cellLeft + cellWidth - 22;
       anchorLeft = anchorX;
@@ -3171,7 +3719,7 @@ function Table({
       label,
       placement
     };
-  }, [baseHeaderHeight, columnDraggable, columns, displaySortState, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, metrics, scrollPosition.top, viewport.width]);
+  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, metrics, scrollPosition.top, sortState, viewport.width]);
   const isPointerOnHeaderTitle = (0, import_react5.useCallback)((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -3186,7 +3734,7 @@ function Table({
     if (context) context.font = "600 13px Inter, ui-sans-serif, system-ui, sans-serif";
     const titleWidth = context?.measureText(column.title).width ?? column.title.length * 13;
     const visibleActions = cell.leaf ? getVisibleHeaderActions(column, cellWidth, columnDraggable, titleWidth) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18 : columnDraggable ? 18 : 0;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable ? HEADER_ACTION_SLOT_WIDTH : 0;
     const contentWidth2 = Math.max(0, cellWidth - actionWidth);
     const textWidth = Math.min(titleWidth, Math.max(0, contentWidth2 - 20));
     const textLeft = column.align === "right" ? cellLeft + contentWidth2 - 10 - textWidth : column.align === "center" ? cellLeft + contentWidth2 / 2 - textWidth / 2 : cellLeft + 10;
@@ -3426,7 +3974,9 @@ function Table({
     });
     setPendingInserts((current) => [...current, pending]);
     try {
-      await Promise.resolve(onInsertRows({ rowIndex: sourceRowIndex >= 0 ? sourceRowIndex : cell.rowIndex, row, position, count, insertedRows }));
+      const nextRows = sourceRows.slice();
+      nextRows.splice(insertIndex, 0, ...insertedRows);
+      await Promise.resolve(onInsertRows(nextRows, insertedRows));
       await waitForPaint();
       setInsertBusy(false);
     } catch (error) {
@@ -3453,28 +4003,10 @@ function Table({
     const currentScrollTop = scrollRef.current.top;
     const top = (fixedHeader ? 0 : bodyTop) + rowIndex * rowHeight - currentScrollTop;
     if (column.rowSelection) {
-      const rowKey2 = getRowKey(rows[rowIndex], rowIndex);
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          className: "rvg-row-selection-icon",
-          style: { left, top, width: cellWidth, height: cellHeight, opacity: isDraggedSource ? 0 : 1, transform: `translateY(${dragOffset}px)` },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionIcon, { checked: selectedRowKeySet.has(rowKey2), radio: rowSelectionMode === "single" })
-        },
-        `selection:${String(rowKey2)}`
-      );
+      return null;
     }
     if (column.rowDragHandle) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          className: "rvg-row-drag-icon",
-          style: { left, top, width: cellWidth, height: cellHeight, opacity: isDraggedSource ? 0 : 1, transform: `translateY(${dragOffset}px)` },
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowDragHandleIcon, {})
-        },
-        `drag:${String(getRowKey(rows[rowIndex], rowIndex))}`
-      );
+      return null;
     }
     if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
       const row = rows[rowIndex];
@@ -3501,6 +4033,7 @@ function Table({
   };
   const renderHeaderTitle = (columnIndex, left) => {
     const column = columns[columnIndex];
+    const isDropTarget = Boolean(columnDropTarget && columnIndex >= columnDropTarget.startIndex && columnIndex <= columnDropTarget.endIndex);
     const currentScrollTop = scrollRef.current.top;
     const headerTop = fixedHeader ? 0 : -currentScrollTop;
     const leafTop = headerTop + headerLeafTop;
@@ -3508,7 +4041,7 @@ function Table({
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: "rvg-header-title",
+          className: `rvg-header-title${isDropTarget ? " is-drop-target" : ""}`,
           style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: column.title })
         },
@@ -3531,11 +4064,11 @@ function Table({
     }
     if (column.renderHeader) {
       const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex));
-      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18;
+      const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH;
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: "rvg-header-title is-custom",
+          className: `rvg-header-title is-custom${isDropTarget ? " is-drop-target" : ""}`,
           "data-level": headerDepth - 1,
           "data-measure-key": column.key,
           style: {
@@ -3576,11 +4109,12 @@ function Table({
     const left = fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex);
     const width2 = cell.leaf ? startMetric.width : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1);
     const visibleActions = cell.leaf ? getVisibleHeaderActions(column, startMetric.width, columnDraggable, measureHeaderTitleWidth(cell.startIndex)) : null;
-    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * 18 : columnDraggable && !cell.leaf ? 18 : 0;
+    const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * HEADER_ACTION_SLOT_WIDTH : columnDraggable && !cell.leaf ? HEADER_ACTION_SLOT_WIDTH : 0;
+    const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
-        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}`,
+        className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isDropTarget ? " is-drop-target" : ""}`,
         "data-level": cell.level,
         "data-measure-key": `group:${cell.key}:${cell.level}`,
         style: {
@@ -3636,6 +4170,7 @@ function Table({
   })();
   const selectionOutlineStyle = (() => {
     if (!selection || selectionRange) return null;
+    if (rowDragPreview?.sourceIndex === selection.rowIndex) return null;
     const row = rows[selection.rowIndex];
     const metric = metrics[selection.columnIndex];
     const column = columns[selection.columnIndex];
@@ -3645,22 +4180,37 @@ function Table({
     const rawRight = rawLeft + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
     const rawTop = bodyTop + selection.rowIndex * rowHeight - scrollPosition.top;
     const rawBottom = rawTop + rowHeight * (span?.rowSpan ?? 1);
+    const dragOffset = getRowDragOffset(selection.rowIndex);
     const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
-    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) return null;
+    if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom + dragOffset <= verticalStart || rawTop + dragOffset >= renderHeight) return null;
     const borderWidth = 2;
-    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
+    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart - 1));
+    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
     const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
     return {
       left,
       top,
       width: Math.max(0, right - left),
-      height: Math.max(0, bottom - top)
+      height: Math.max(0, bottom - top),
+      transform: `translateY(${dragOffset}px)`
     };
   })();
+  const selectionEdgeIndicator = getSelectionEdgeIndicator(scrollPosition.left, scrollPosition.top);
+  const selectionEdgeStyle = selectionEdgeIndicator ? {
+    ...selectionEdgeIndicator.style,
+    ...selectionEdgeIndicator.corner ? {
+      "--rvg-corner-width": `${selectionEdgeIndicator.corner.width}px`,
+      "--rvg-corner-height": `${selectionEdgeIndicator.corner.height}px`,
+      "--rvg-corner-hover-width-extension": "4px",
+      "--rvg-corner-hover-height-extension": "4px"
+    } : null
+  } : void 0;
+  (0, import_react5.useLayoutEffect)(() => {
+    syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
+  }, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
   const handleContextMenu = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -3804,6 +4354,10 @@ function Table({
           className: "rvg-canvas",
           style: { width: viewport.width, height: renderHeight },
           onMouseMove: (event) => {
+            if (document.documentElement.classList.contains("rvg-is-dragging")) {
+              hideDragTooltips();
+              return;
+            }
             if (columnDragRef.current) return;
             const rect = event.currentTarget.getBoundingClientRect();
             const localY = event.clientY - rect.top;
@@ -3906,6 +4460,14 @@ function Table({
             }
           },
           onPointerDown: (event) => {
+            const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
+            const columnIndex = locateColumn(event.clientX);
+            const rowDragHandle = rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(event.clientY) >= 0;
+            if (headerDragCell && locateHeaderCellDragHandle(event.clientX, headerDragCell) || rowDragHandle) {
+              hideDragTooltips();
+              document.documentElement.classList.add("rvg-is-dragging");
+              event.currentTarget.style.cursor = "move";
+            }
             handleColumnPointerDown(event);
             beginRangeDrag(event);
           },
@@ -3914,10 +4476,12 @@ function Table({
             updateRangeDrag(event);
           },
           onPointerUp: (event) => {
+            document.documentElement.classList.remove("rvg-is-dragging");
             handleColumnPointerUp(event);
             endRangeDrag(event);
           },
           onPointerCancel: (event) => {
+            document.documentElement.classList.remove("rvg-is-dragging");
             handleColumnPointerUp(event);
             endRangeDrag(event);
           },
@@ -3936,7 +4500,7 @@ function Table({
               const action = locateHeaderAction(event.clientX, columnIndex);
               if (action === "sort") {
                 const columnKey = columns[columnIndex].key;
-                const next = displaySortState?.columnKey !== columnKey ? { columnKey, direction: "asc" } : displaySortState.direction === "asc" ? { columnKey, direction: "desc" } : null;
+                const next = sortState?.columnKey !== columnKey ? { columnKey, direction: "asc" } : sortState.direction === "asc" ? { columnKey, direction: "desc" } : null;
                 queueSortStateChange(next);
                 return;
               }
@@ -4108,6 +4672,27 @@ function Table({
       }
     ),
     selectionOutlineStyle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
+    selectionEdgeIndicator && selection && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        ref: selectionEdgeTargetRef,
+        type: "button",
+        className: `rvg-selection-edge-target is-${selectionEdgeIndicator.orientation} is-${selectionEdgeIndicator.side}${selectionEdgeIndicator.viewportEdge ? ` is-viewport-${selectionEdgeIndicator.viewportEdge}` : ""}`,
+        style: selectionEdgeStyle,
+        "aria-label": labels.revealSelectedCell,
+        title: labels.revealSelectedCell,
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+          scrollerRef.current?.focus({ preventScroll: true });
+          revealCell(selection);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
+      }
+    ),
     contextMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
       const column = columns[contextMenu.columnIndex];
       const headerContext = { column, columnIndex: contextMenu.columnIndex };
@@ -4265,12 +4850,12 @@ function Table({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: labels.rowUnit })
         ] });
         if (item === "move-up") {
-          if (!rowDraggable || !onRowOrderChange) return null;
-          return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => onRowOrderChange(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "move-up" }) });
+          if (!rowDraggable) return null;
+          return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "move-up" }) });
         }
         if (item === "move-down") {
-          if (!rowDraggable || !onRowOrderChange) return null;
-          return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => onRowOrderChange(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "move-down" }) });
+          if (!rowDraggable) return null;
+          return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "move-down" }) });
         }
         if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuIcon, { type: "delete" }) });
         return null;
@@ -4302,21 +4887,30 @@ function Table({
                 await Promise.resolve(onCellChange?.({ ...confirmAction.cell, row: confirmAction.row, previousValue: confirmAction.previousValue, value: "" }));
               } else {
                 const deletingKeys = confirmAction.rows.map(({ row, rowIndex }) => getDataRowKey(row, rowIndex));
+                const deletedRows = confirmAction.rows.map(({ row }) => row);
+                const deletingKeySet = new Set(deletingKeys);
+                const nextRows = sourceRows.filter((row, rowIndex) => !deletingKeySet.has(getDataRowKey(row, rowIndex)));
                 setConfirmAction(null);
                 setConfirmLoading(false);
+                setPendingDeletedRowKeys((current) => {
+                  const next = new Set(current);
+                  deletingKeys.forEach((key) => next.add(key));
+                  return next;
+                });
                 if (onDeleteRows) {
                   setDeleteBusy(true);
                   try {
-                    await Promise.resolve(onDeleteRows({ rows: confirmAction.rows, viewportRange: domRange }));
+                    await Promise.resolve(onDeleteRows(nextRows, deletedRows));
+                  } catch (error) {
+                    setPendingDeletedRowKeys((current) => {
+                      const next = new Set(current);
+                      deletingKeys.forEach((key) => next.delete(key));
+                      return next;
+                    });
+                    throw error;
                   } finally {
                     setDeleteBusy(false);
                   }
-                } else {
-                  setPendingDeletedRowKeys((current) => {
-                    const next = new Set(current);
-                    deletingKeys.forEach((key) => next.add(key));
-                    return next;
-                  });
                 }
                 return;
               }
@@ -4389,7 +4983,7 @@ function Table({
               const next = { ...filterValues };
               if (filterEditor.draft) next[key] = filterEditor.draft;
               else delete next[key];
-              onFilterValuesChange?.(next);
+              setFilterValues(next);
               setFilterEditor(null);
             }
           }
@@ -4400,7 +4994,7 @@ function Table({
           const key = columns[filterEditor.columnIndex].key;
           const next = { ...filterValues };
           delete next[key];
-          onFilterValuesChange?.(next);
+          setFilterValues(next);
           setFilterEditor(null);
         }, children: labels.reset }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
@@ -4408,7 +5002,7 @@ function Table({
           const next = { ...filterValues };
           if (filterEditor.draft) next[key] = filterEditor.draft;
           else delete next[key];
-          onFilterValuesChange?.(next);
+          setFilterValues(next);
           setFilterEditor(null);
         }, children: labels.confirm })
       ] })
@@ -4432,8 +5026,8 @@ function Table({
           column.key
         );
       }) }, rowIndex)),
-      fixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
-      rightFixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
+      fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
+      rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
     ] }),
     loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoadingSpinnerIcon, {}) })
   ] });