react-glide-table 2.0.1 → 2.1.0

package/dist/core.d.ts

@@ -1,10 +1,10 @@
-import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-DJOlsDL8.js';
-export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-DJOlsDL8.js';
-import { Row, ColumnDef, Table, CellContext, Updater, RowSelectionState } from '@tanstack/react-table';
-export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
+import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-CMUGtH-c.js';
+export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-CMUGtH-c.js';
+import { Row, ColumnDef, CellContext, Table, Cell, ColumnOrderState, Updater, RowSelectionState } from '@tanstack/react-table';
+export { ColumnDef, ColumnOrderState, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
-import { RefObject, CSSProperties } from 'react';
+import { RefObject, CSSProperties, PointerEvent } from 'react';
 
 /** Neutral default field names for tree conversion */
 declare const DEFAULT_TREE_ID_FIELD = "id";
@@ -197,6 +197,19 @@ type DataTableRowContextValue = {
     };
 };
 
+/**
+ * TanStack `CellContext` with a guaranteed `update` commit helper.
+ * Prefer this over bare `cell.getContext()`, which does not include `update` at runtime.
+ */
+type CellContextWithUpdate<TData, TValue> = CellContext<TData, TValue> & {
+    update: (next: TValue) => void;
+};
+/**
+ * Injects `update` into a TanStack `CellContext` so `ColumnDef.cell` can commit
+ * through `onCellChange` / `onDataChange` the same way compound `Column.render` does.
+ */
+declare function withCellUpdate<TData extends Record<string, unknown>, TValue>(context: CellContext<TData, TValue>, commitValue: (rowId: string, columnId: string, value: unknown) => boolean): CellContextWithUpdate<TData, TValue>;
+
 type UseInlineSearchOptions = {
     enabled?: boolean;
     rowCount: number;
@@ -248,6 +261,7 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     selectionLabel: DataTableLabels["selection"];
     enableCellSelection: boolean;
     enableColumnResize: boolean;
+    enableColumnReorder: boolean;
     enableColumnFreeze: boolean;
     enableInlineSearch: boolean;
     shouldVirtualize: boolean;
@@ -258,8 +272,14 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     paddingTop: number;
     paddingBottom: number;
     rowContextValue: DataTableRowContextValue;
+    /**
+     * TanStack `CellContext` with `update` injected for custom `ColumnDef.cell` renders.
+     * Prefer this over `cell.getContext()` when calling `flexRender` yourself.
+     */
+    getCellContext: <TValue>(cell: Cell<T, TValue>) => CellContextWithUpdate<T, TValue>;
     handleToggleSelect: (row: Row<T>) => void;
     clearHover: () => void;
+    setColumnOrder: (next: ColumnOrderState) => void;
     copySelection: DataTableCopyActions["copySelection"];
     inlineSearch: {
         showSearch: boolean;
@@ -321,6 +341,38 @@ declare function getColumnSizeStyle(size: number, options?: {
     lockMax?: boolean;
 }): CSSProperties | undefined;
 
+type ColumnDropEdge = "before" | "after";
+declare function collectLeafColumnIds<T>(columns: readonly ColumnDef<T, unknown>[]): string[];
+/** Keep known ids in the given order and append any new leaves at the end. */
+declare function resolveLeafColumnOrder<T>(columns: readonly ColumnDef<T, unknown>[], order: readonly string[] | undefined): string[];
+/**
+ * Reorder nested `ColumnDef`s by leaf id list.
+ * Consecutive leaves that still share a parent group stay wrapped together;
+ * interleaved groups split (Glide-style).
+ */
+declare function applyLeafColumnOrder<T>(columns: readonly ColumnDef<T, unknown>[], order: readonly string[] | undefined): ColumnDef<T, unknown>[];
+declare function moveColumnIds(order: readonly string[], fromIds: readonly string[], targetIds: readonly string[], edge: ColumnDropEdge): string[];
+declare function resolveDropEdge(clientX: number, rect: Pick<DOMRect, "left" | "width">): ColumnDropEdge;
+
+type ColumnReorderDropTarget = {
+    columnId: string;
+    edge: ColumnDropEdge;
+};
+declare function useColumnReorder(options: {
+    enabled: boolean;
+    columnOrder: readonly string[];
+    onColumnOrderChange: (next: string[]) => void;
+}): {
+    isReordering: boolean;
+    draggingColumnId: string | null;
+    dropTarget: ColumnReorderDropTarget | null;
+    onHeaderPointerDown: (event: PointerEvent<HTMLTableCellElement>, meta: {
+        columnId: string;
+        leafIds: string[];
+        canDrag: boolean;
+    }) => void;
+};
+
 type ParsedClipboardTSV = {
     values: string[][];
     /**
@@ -445,4 +497,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard };
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, type CellContextWithUpdate, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, type ColumnDropEdge, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applyLeafColumnOrder, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectLeafColumnIds, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, moveColumnIds, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolveDropEdge, resolveLeafColumnOrder, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useColumnReorder, useConvertTreeData, useGlideTable, useInlineSearch, withCellUpdate, writeSelectionToClipboard };

package/dist/core.js

@@ -6,6 +6,7 @@ var DEFAULT_DATA_TABLE_LABELS = {
   expandRow: "Expand row",
   collapseRow: "Collapse row",
   resizeColumn: "Resize column",
+  reorderColumn: "Reorder column",
   searchPlaceholder: "Search\u2026",
   searchResultHint: "Type to search",
   searchPrevious: "Previous result",
@@ -47,6 +48,7 @@ var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
 var DATA_TABLE_COLUMN_SIZE = 150;
 var DATA_TABLE_COLUMN_MIN_SIZE = 40;
 var DATA_TABLE_COLUMN_MAX_SIZE = 800;
+var DATA_TABLE_COLUMN_REORDER_THRESHOLD = 4;
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -420,6 +422,16 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
@@ -1302,6 +1314,129 @@ function useCellSelection({
   };
 }
 
+// src/components/ui/table/features/column-reorder/columnReorder.ts
+function getColumnDefId(column) {
+  if (column.id != null && column.id !== "") return column.id;
+  if ("accessorKey" in column && column.accessorKey != null) {
+    return String(column.accessorKey);
+  }
+  return void 0;
+}
+function getColumnDefChildren(column) {
+  if (!("columns" in column) || !Array.isArray(column.columns)) return void 0;
+  if (column.columns.length === 0) return void 0;
+  return column.columns;
+}
+function collectLeafColumnIds(columns) {
+  const ids = [];
+  for (const column of columns) {
+    const children = getColumnDefChildren(column);
+    if (children) {
+      ids.push(...collectLeafColumnIds(children));
+      continue;
+    }
+    const id = getColumnDefId(column);
+    if (id) ids.push(id);
+  }
+  return ids;
+}
+function areColumnOrdersEqual(left, right) {
+  if (left.length !== right.length) return false;
+  return left.every((id, index) => id === right[index]);
+}
+function resolveLeafColumnOrder(columns, order) {
+  const leafIds = collectLeafColumnIds(columns);
+  if (!order?.length) return leafIds;
+  const leafSet = new Set(leafIds);
+  const seen = /* @__PURE__ */ new Set();
+  const next = order.filter((id) => {
+    if (!leafSet.has(id) || seen.has(id)) return false;
+    seen.add(id);
+    return true;
+  });
+  for (const id of leafIds) {
+    if (!seen.has(id)) next.push(id);
+  }
+  return next;
+}
+function flattenColumnSlots(columns, group) {
+  const slots = [];
+  for (const column of columns) {
+    const id = getColumnDefId(column);
+    const children = getColumnDefChildren(column);
+    if (children) {
+      const nestedGroup = id ? { id, def: column } : group;
+      slots.push(...flattenColumnSlots(children, nestedGroup));
+      continue;
+    }
+    if (!id) continue;
+    slots.push({ id, def: column, group });
+  }
+  return slots;
+}
+function rebuildColumnTree(slots) {
+  const result = [];
+  let index = 0;
+  while (index < slots.length) {
+    const slot = slots[index];
+    if (!slot.group) {
+      result.push(slot.def);
+      index += 1;
+      continue;
+    }
+    const groupId = slot.group.id;
+    const children = [];
+    while (index < slots.length && slots[index]?.group?.id === groupId) {
+      children.push(slots[index].def);
+      index += 1;
+    }
+    const firstChildId = children[0] ? getColumnDefId(children[0]) : groupId;
+    result.push({
+      ...slot.group.def,
+      id: `${groupId}::${firstChildId}`,
+      columns: children
+    });
+  }
+  return result;
+}
+function applyLeafColumnOrder(columns, order) {
+  const resolved = resolveLeafColumnOrder(columns, order);
+  const defaultOrder = collectLeafColumnIds(columns);
+  if (areColumnOrdersEqual(resolved, defaultOrder)) {
+    return columns;
+  }
+  const byId = new Map(
+    flattenColumnSlots(columns).map((slot) => [
+      slot.id,
+      slot
+    ])
+  );
+  const ordered = [];
+  for (const id of resolved) {
+    const slot = byId.get(id);
+    if (slot) ordered.push(slot);
+  }
+  return rebuildColumnTree(ordered);
+}
+function moveColumnIds(order, fromIds, targetIds, edge) {
+  if (fromIds.length === 0 || targetIds.length === 0) return [...order];
+  const fromSet = new Set(fromIds);
+  if (targetIds.some((id) => fromSet.has(id))) return [...order];
+  const rest = order.filter((id) => !fromSet.has(id));
+  const anchorId = edge === "before" ? targetIds[0] : targetIds[targetIds.length - 1];
+  const anchorIndex = rest.indexOf(anchorId);
+  if (anchorIndex < 0) return [...order];
+  const insertAt = edge === "before" ? anchorIndex : anchorIndex + 1;
+  return [...rest.slice(0, insertAt), ...fromIds, ...rest.slice(insertAt)];
+}
+function resolveDropEdge(clientX, rect) {
+  return clientX < rect.left + rect.width / 2 ? "before" : "after";
+}
+function parseReorderIds(value) {
+  if (!value) return [];
+  return value.split(",").filter(Boolean);
+}
+
 // src/components/ui/table/features/column-freeze/columnFreeze.ts
 var HEADER_Z_BASE = 30;
 var BODY_Z_BASE = 5;
@@ -2184,6 +2319,9 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
+    enableColumnReorder = false,
+    columnOrder: controlledColumnOrder,
+    onColumnOrderChange,
     enableColumnFreeze = false,
     enableInlineSearch = false,
     showSearch,
@@ -2206,6 +2344,7 @@ function useGlideTable(options) {
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = useState4({});
   const [internalColumnSizing, setInternalColumnSizing] = useState4({});
+  const [internalColumnOrder, setInternalColumnOrder] = useState4([]);
   const [internalExpandedRows, setInternalExpandedRows] = useState4(
     () => /* @__PURE__ */ new Set()
   );
@@ -2226,6 +2365,21 @@ function useGlideTable(options) {
     internalRowSelection
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
+  const columnOrder = controlledColumnOrder ?? internalColumnOrder;
+  const tableColumns = useMemo3(() => {
+    if (!enableColumnReorder) return columns;
+    return applyLeafColumnOrder(columns, columnOrder);
+  }, [columnOrder, columns, enableColumnReorder]);
+  const setColumnOrder = useCallback4(
+    (next) => {
+      if (onColumnOrderChange) {
+        onColumnOrderChange(next);
+        return;
+      }
+      setInternalColumnOrder(next);
+    },
+    [onColumnOrderChange]
+  );
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
   const handleExpandedRowsChange = useCallback4(
     (next) => {
@@ -2250,7 +2404,7 @@ function useGlideTable(options) {
   });
   const table = useReactTable({
     data: tableData,
-    columns,
+    columns: tableColumns,
     ...enableColumnResize ? {
       defaultColumn: {
         minSize: DATA_TABLE_COLUMN_MIN_SIZE,
@@ -2406,6 +2560,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = useCallback4(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = useCallback4(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2728,6 +2886,7 @@ function useGlideTable(options) {
     selectionLabel: labels.selection,
     enableCellSelection,
     enableColumnResize,
+    enableColumnReorder,
     enableColumnFreeze,
     enableInlineSearch,
     shouldVirtualize,
@@ -2738,8 +2897,10 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
+    setColumnOrder,
     copySelection: stableCopySelection,
     inlineSearch: {
       showSearch: inlineSearch.showSearch,
@@ -2818,6 +2979,219 @@ function getColumnSizeStyle(size, options) {
     ...lockMax ? { maxWidth: size } : {}
   };
 }
+
+// src/components/ui/table/features/column-reorder/useColumnReorder.ts
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect6,
+  useRef as useRef6,
+  useState as useState5
+} from "react";
+function hitTestReorderHeader(table, clientX, clientY) {
+  const headers = Array.from(
+    table.querySelectorAll(
+      "thead th[data-column-id][data-reorder-ids]"
+    )
+  );
+  const containing = headers.find((element) => {
+    const rect = element.getBoundingClientRect();
+    return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+  });
+  if (containing) {
+    return {
+      columnId: containing.dataset.columnId ?? "",
+      edge: resolveDropEdge(clientX, containing.getBoundingClientRect())
+    };
+  }
+  const leaves = headers.filter(
+    (element) => element.hasAttribute("data-reorder-leaf")
+  );
+  let match;
+  for (const element of leaves) {
+    const rect = element.getBoundingClientRect();
+    if (clientX >= rect.left && clientX <= rect.right) {
+      match = element;
+      break;
+    }
+  }
+  if (!match && leaves.length > 0) {
+    const first = leaves[0].getBoundingClientRect();
+    const last = leaves[leaves.length - 1].getBoundingClientRect();
+    if (clientX < first.left) match = leaves[0];
+    else if (clientX > last.right) match = leaves[leaves.length - 1];
+  }
+  if (!match) return null;
+  return {
+    columnId: match.dataset.columnId ?? "",
+    edge: resolveDropEdge(clientX, match.getBoundingClientRect())
+  };
+}
+function readTargetIds(table, columnId) {
+  const element = table.querySelector(
+    `thead th[data-column-id="${CSS.escape(columnId)}"]`
+  );
+  return parseReorderIds(element?.getAttribute("data-reorder-ids"));
+}
+function useColumnReorder(options) {
+  const { enabled, columnOrder, onColumnOrderChange } = options;
+  const sessionRef = useRef6(null);
+  const columnOrderRef = useRef6(columnOrder);
+  const onColumnOrderChangeRef = useRef6(onColumnOrderChange);
+  const [draggingColumnId, setDraggingColumnId] = useState5(null);
+  const [dropTarget, setDropTarget] = useState5(
+    null
+  );
+  const dropTargetRef = useRef6(dropTarget);
+  const previousUserSelectRef = useRef6(null);
+  columnOrderRef.current = columnOrder;
+  onColumnOrderChangeRef.current = onColumnOrderChange;
+  dropTargetRef.current = dropTarget;
+  const resetDrag = useCallback6(() => {
+    sessionRef.current = null;
+    setDraggingColumnId(null);
+    setDropTarget(null);
+    const backup = previousUserSelectRef.current;
+    previousUserSelectRef.current = null;
+    if (backup) {
+      if (backup.value) {
+        document.body.style.setProperty("user-select", backup.value, backup.priority);
+      } else {
+        document.body.style.removeProperty("user-select");
+      }
+      return;
+    }
+    document.body.style.removeProperty("user-select");
+  }, []);
+  useEffect6(() => {
+    if (!enabled) resetDrag();
+  }, [enabled, resetDrag]);
+  useEffect6(() => {
+    return () => {
+      resetDrag();
+    };
+  }, [resetDrag]);
+  const onHeaderPointerDown = useCallback6(
+    (event, meta) => {
+      if (!enabled || !meta.canDrag) return;
+      if (event.button !== 0) return;
+      if (event.pointerType === "mouse" && event.ctrlKey) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest("[data-table-disable-cell-selection]")) {
+        return;
+      }
+      const table = event.currentTarget.closest("table");
+      if (!(table instanceof HTMLTableElement)) return;
+      sessionRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        columnId: meta.columnId,
+        fromIds: meta.leafIds,
+        table,
+        active: false
+      };
+    },
+    [enabled]
+  );
+  useEffect6(() => {
+    if (!enabled) return;
+    const onPointerMove = (event) => {
+      const session = sessionRef.current;
+      if (!session || event.pointerId !== session.pointerId) return;
+      const deltaX = event.clientX - session.startX;
+      const deltaY = event.clientY - session.startY;
+      const distance = Math.hypot(deltaX, deltaY);
+      if (!session.active) {
+        if (distance < DATA_TABLE_COLUMN_REORDER_THRESHOLD) return;
+        session.active = true;
+        if (!previousUserSelectRef.current) {
+          previousUserSelectRef.current = {
+            value: document.body.style.getPropertyValue("user-select"),
+            priority: document.body.style.getPropertyPriority("user-select")
+          };
+        }
+        document.body.style.setProperty("user-select", "none");
+        setDraggingColumnId(session.columnId);
+      }
+      event.preventDefault();
+      const nextTarget = hitTestReorderHeader(
+        session.table,
+        event.clientX,
+        event.clientY
+      );
+      if (!nextTarget || !nextTarget.columnId) {
+        setDropTarget(null);
+        return;
+      }
+      const targetIds = readTargetIds(session.table, nextTarget.columnId);
+      const fromSet = new Set(session.fromIds);
+      if (targetIds.some((id) => fromSet.has(id))) {
+        setDropTarget(null);
+        return;
+      }
+      setDropTarget((previous) => {
+        if (previous?.columnId === nextTarget.columnId && previous.edge === nextTarget.edge) {
+          return previous;
+        }
+        return nextTarget;
+      });
+    };
+    const onPointerUp = (event) => {
+      const session = sessionRef.current;
+      if (!session || event.pointerId !== session.pointerId) {
+        return;
+      }
+      if (session.active) {
+        event.preventDefault();
+        const target = dropTargetRef.current;
+        if (target) {
+          const targetIds = readTargetIds(session.table, target.columnId);
+          const next = moveColumnIds(
+            columnOrderRef.current,
+            session.fromIds,
+            targetIds,
+            target.edge
+          );
+          onColumnOrderChangeRef.current(next);
+        }
+        const suppressClick = (clickEvent) => {
+          clickEvent.preventDefault();
+          clickEvent.stopPropagation();
+          document.removeEventListener("click", suppressClick, true);
+        };
+        document.addEventListener("click", suppressClick, true);
+        window.setTimeout(() => {
+          document.removeEventListener("click", suppressClick, true);
+        }, 0);
+      }
+      resetDrag();
+    };
+    const onPointerCancel = (event) => {
+      const session = sessionRef.current;
+      if (!session || event.pointerId !== session.pointerId) {
+        return;
+      }
+      if (session.active) {
+        event.preventDefault();
+      }
+      resetDrag();
+    };
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+    document.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerup", onPointerUp);
+      document.removeEventListener("pointercancel", onPointerCancel);
+    };
+  }, [enabled, resetDrag]);
+  return {
+    isReordering: draggingColumnId != null,
+    draggingColumnId,
+    dropTarget,
+    onHeaderPointerDown
+  };
+}
 export {
   BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
@@ -2830,6 +3204,7 @@ export {
   ResolvedTableCell,
   applyCellEdit,
   applyFillData,
+  applyLeafColumnOrder,
   applySelectionUpdater,
   buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
@@ -2844,6 +3219,7 @@ export {
   collectCopyRowEntries,
   collectCopyRows,
   collectFillChanges,
+  collectLeafColumnIds,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
   commitCellValue,
@@ -2868,6 +3244,7 @@ export {
   mapSearchResultToVisibleItem,
   mapSearchResultsToVisibleKeys,
   measureMergedSpanRowHeights,
+  moveColumnIds,
   nextSearchIndex,
   nextSearchStride,
   parseCellEditValue,
@@ -2877,7 +3254,9 @@ export {
   resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveDropEdge,
   resolveHeaderFreezeOffset,
+  resolveLeafColumnOrder,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
@@ -2887,8 +3266,10 @@ export {
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,
+  useColumnReorder,
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 };