@lensui/lens-table 0.1.5 → 0.1.6

package/dist/index.js

@@ -288,16 +288,6 @@ function ContextMenuIcon({ type }) {
   };
   return /* @__PURE__ */ jsx2("svg", { className: "rvg-context-menu-svg", viewBox: "0 0 16 16", "aria-hidden": "true", children: paths[type].map((path) => /* @__PURE__ */ jsx2("path", { d: path }, path)) });
 }
-function RowDragHandleIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 16 16", focusable: "false", children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "4", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "4", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "8", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "8", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "12", r: "1" })
-  ] });
-}
 function LoadingSpinnerIcon() {
   return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M20 12a8 8 0 1 1-3.1-6.3" }) });
 }
@@ -725,6 +715,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
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -745,6 +777,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;
 }
@@ -759,7 +792,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,
@@ -838,12 +871,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) {
@@ -863,7 +899,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 };
@@ -909,11 +945,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);
@@ -946,6 +990,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);
@@ -972,6 +1020,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);
         }
@@ -998,6 +1047,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 {
@@ -1053,6 +1155,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);
@@ -1061,7 +1167,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;
@@ -1130,7 +1236,7 @@ function paintGrid(options) {
   }
   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;
@@ -1139,7 +1245,7 @@ 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;
@@ -1249,6 +1355,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;
@@ -1353,7 +1493,7 @@ function resolveContextMenuSection(section, defaults) {
   return defaults;
 }
 function Table({
-  columns: sourceColumns,
+  columns: columnProps,
   rows: sourceRows,
   rowKey,
   width = "100%",
@@ -1382,23 +1522,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,
@@ -1407,6 +1545,10 @@ function Table({
   style,
   ariaLabel = "Data grid"
 }) {
+  const [sourceColumns, setSourceColumns] = useState4(columnProps);
+  useEffect2(() => {
+    setSourceColumns((current) => reconcileColumns(current, columnProps));
+  }, [columnProps]);
   const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const headerDepth = useMemo(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
@@ -1487,7 +1629,6 @@ function Table({
   const frameRef = useRef2(null);
   const textFrameRef = useRef2(null);
   const toastTimerRef = useRef2(null);
-  const sortDebounceRef = useRef2(null);
   const headerTooltipTimerRef = useRef2(null);
   const cellTooltipTimerRef = useRef2(null);
   const pendingHeaderTooltipKeyRef = useRef2("");
@@ -1518,6 +1659,7 @@ function Table({
   const suppressClickRef = useRef2(false);
   const hasCompletedLoadRef = useRef2(!loading);
   const columnDragPreviewRef = useRef2(null);
+  const validColumnDropRef = useRef2(null);
   const hoveredHeaderActionRef = useRef2(null);
   const hoveredRowIndexRef = useRef2(null);
   const [viewport, setViewport] = useState4({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
@@ -1525,11 +1667,8 @@ function Table({
   const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
   const [scrollPosition, setScrollPosition] = useState4({ left: 0, top: 0 });
   const scrollRef = useRef2({ left: 0, top: 0 });
-  const [selection, setSelection] = useControllableValue(selectedCell, defaultSelectedCell, onSelectedCellChange);
-  const [selectionRange, setSelectionRange] = useState4(null);
-  const rangeDragRef = useRef2(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) {
@@ -1546,12 +1685,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] = useState4(null);
   const [draft, setDraft] = useState4("");
   const [rowDragPreview, setRowDragPreview] = useState4(null);
+  const [columnDropTarget, setColumnDropTarget] = useState4(null);
   useEffect2(() => {
     if (!loading) hasCompletedLoadRef.current = true;
   }, [loading]);
@@ -1620,6 +1760,8 @@ function Table({
     return () => observer.disconnect();
   }, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
   const [filterEditor, setFilterEditor] = useState4(null);
+  const [filterValues, setFilterValues] = useState4({});
+  const [sortState, setSortState] = useState4(null);
   const [contextMenu, setContextMenu] = useState4(null);
   const [insertCounts, setInsertCounts] = useState4({ before: 1, after: 1 });
   const [confirmAction, setConfirmAction] = useState4(null);
@@ -1632,7 +1774,20 @@ function Table({
   const [hoveredHeaderAction, setHoveredHeaderAction] = useState4(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState4(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = useState4(null);
-  const [displaySortState, setDisplaySortState] = useState4(sortState);
+  const hideDragTooltips = useCallback2(() => {
+    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] = useState4(() => /* @__PURE__ */ new Set());
   const [cellAnnotations, setCellAnnotations] = useState4(() => /* @__PURE__ */ new Map());
   const [annotationType, setAnnotationType] = useState4("corner");
@@ -1644,6 +1799,7 @@ function Table({
   const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState4(() => /* @__PURE__ */ new Set());
   const [pendingInserts, setPendingInserts] = useState4(() => []);
   const [insertedRowKeys, setInsertedRowKeys] = useState4(() => /* @__PURE__ */ new Set());
+  const [rowOrderKeys, setRowOrderKeys] = useState4(null);
   const settledPendingInsertIdsRef = useRef2(/* @__PURE__ */ new Set());
   const getDataRowKey = useCallback2((row, index) => {
     return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
@@ -1658,7 +1814,7 @@ function Table({
     }
     return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
   }, [getDataRowKey, sourceRows]);
-  const rows = useMemo(() => {
+  const orderedRows = useMemo(() => {
     let next = sourceRows;
     if (pendingInserts.length > 0) {
       const activeInserts = pendingInserts.filter((insert) => {
@@ -1677,9 +1833,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 = useMemo(() => Object.fromEntries(
+    Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
+  ), [filterValues]);
+  const filteredRows = 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 = 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 = useCallback2((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 = useMemo(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
+  const resolvedDefaultSelectedCell = useMemo(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
+  const handleSelectedCellChange = useCallback2((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] = useState4(null);
+  const rangeDragRef = useRef2(null);
+  const applyRowOrder = useCallback2((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 = useCallback2((sourceIndex, targetIndex, detail) => {
+    const nextColumns = reorderColumns(sourceColumns, detail);
+    setSourceColumns(nextColumns);
+    onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
+  }, [onColumnsReorder, sourceColumns]);
   useEffect2(() => {
     if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
     setPendingInserts((current) => {
@@ -1921,19 +2159,22 @@ 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 = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
@@ -2115,11 +2356,7 @@ function Table({
       }
     };
   }, [scheduleDraw]);
-  useEffect2(() => {
-    setDisplaySortState(sortState);
-  }, [sortState]);
   useEffect2(() => () => {
-    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);
@@ -2494,12 +2731,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 = useCallback2((columnIndex) => {
@@ -2509,7 +2746,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 = useCallback2((clientX, columnIndex) => {
@@ -2665,6 +2902,7 @@ function Table({
         }
         const sourceIndex = headerDragCell.startIndex;
         columnDragPreviewRef.current = { sourceIndex, targetIndex: sourceIndex };
+        validColumnDropRef.current = null;
         return {
           type: "table-column",
           sourceIndex,
@@ -2675,13 +2913,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))
+        };
         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`;
@@ -2707,10 +2958,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";
@@ -2724,6 +2979,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];
@@ -2752,6 +3030,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);
@@ -2777,15 +3057,46 @@ 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;
         }
@@ -2793,18 +3104,19 @@ function Table({
         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"));
           });
@@ -2813,21 +3125,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)
             }
           );
         }
@@ -2839,6 +3152,7 @@ function Table({
     const cleanupDrop = 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);
@@ -2847,7 +3161,8 @@ function Table({
           const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
           return 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;
@@ -2864,6 +3179,7 @@ function Table({
         const columnEdge = input.clientX - canvas.getBoundingClientRect().left < left + targetWidth / 2 ? "left" : "right";
         return attachClosestEdge({
           targetIndex,
+          targetEndIndex: targetCell.endIndex,
           targetKey: targetCell.key,
           parentKey: targetCell.parentKey,
           headerKind,
@@ -2875,10 +3191,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 = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3285,19 +3602,14 @@ function Table({
     setResizeGuideTop(0);
   }, []);
   const queueSortStateChange = useCallback2((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";
@@ -3307,11 +3619,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__ */ jsx7(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";
@@ -3338,7 +3650,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);
@@ -3357,7 +3669,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;
@@ -3377,7 +3689,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 = useCallback2((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -3392,7 +3704,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;
@@ -3632,7 +3944,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) {
@@ -3659,28 +3973,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__ */ jsx7(
-        "div",
-        {
-          className: "rvg-row-selection-icon",
-          style: { left, top, width: cellWidth, height: cellHeight, opacity: isDraggedSource ? 0 : 1, transform: `translateY(${dragOffset}px)` },
-          children: /* @__PURE__ */ jsx7(SelectionIcon, { checked: selectedRowKeySet.has(rowKey2), radio: rowSelectionMode === "single" })
-        },
-        `selection:${String(rowKey2)}`
-      );
+      return null;
     }
     if (column.rowDragHandle) {
-      return /* @__PURE__ */ jsx7(
-        "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__ */ jsx7(RowDragHandleIcon, {})
-        },
-        `drag:${String(getRowKey(rows[rowIndex], rowIndex))}`
-      );
+      return null;
     }
     if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
       const row = rows[rowIndex];
@@ -3707,6 +4003,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;
@@ -3714,7 +4011,7 @@ function Table({
       return /* @__PURE__ */ jsx7(
         "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__ */ jsx7("span", { children: column.title })
         },
@@ -3737,11 +4034,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__ */ jsx7(
         "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: {
@@ -3782,11 +4079,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__ */ jsxs7(
       "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: {
@@ -3842,6 +4140,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];
@@ -3851,10 +4150,11 @@ 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));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
@@ -3864,7 +4164,8 @@ function Table({
       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);
@@ -4023,6 +4324,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;
@@ -4125,6 +4430,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);
           },
@@ -4133,10 +4446,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);
           },
@@ -4155,7 +4470,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;
               }
@@ -4505,12 +4820,12 @@ function Table({
           /* @__PURE__ */ jsx7("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__ */ jsx7(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__ */ jsx7(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__ */ jsx7(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__ */ jsx7(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__ */ jsx7(ContextMenuIcon, { type: "delete" }) });
         return null;
@@ -4542,21 +4857,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;
               }
@@ -4629,7 +4953,7 @@ function Table({
               const next = { ...filterValues };
               if (filterEditor.draft) next[key] = filterEditor.draft;
               else delete next[key];
-              onFilterValuesChange?.(next);
+              setFilterValues(next);
               setFilterEditor(null);
             }
           }
@@ -4640,7 +4964,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__ */ jsx7("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
@@ -4648,7 +4972,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 })
       ] })