react-glide-table 2.0.2 → 2.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, 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-bgEceyRV.cjs';
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, 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, withCellUpdate, writeSelectionToClipboard } from './core.cjs';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, 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.cjs';
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnDropEdge, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, 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 } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
-export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
+export { ColumnDef, ColumnOrderState, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import 'react';
 import '@tanstack/react-virtual';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, 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-bgEceyRV.js';
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, 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, withCellUpdate, writeSelectionToClipboard } from './core.js';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, 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';
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnDropEdge, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, 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 } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
-export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
+export { ColumnDef, ColumnOrderState, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import 'react';
 import '@tanstack/react-virtual';

package/dist/index.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",
@@ -56,6 +57,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";
@@ -1321,6 +1323,135 @@ 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);
+}
+function serializeReorderIds(ids) {
+  return ids.join(",");
+}
+function isColumnReorderable(meta) {
+  return meta?.reorderable !== false;
+}
+
 // src/components/ui/table/features/column-freeze/columnFreeze.ts
 var HEADER_Z_BASE = 30;
 var BODY_Z_BASE = 5;
@@ -2203,6 +2334,9 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
+    enableColumnReorder = false,
+    columnOrder: controlledColumnOrder,
+    onColumnOrderChange,
     enableColumnFreeze = false,
     enableInlineSearch = false,
     showSearch,
@@ -2225,6 +2359,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()
   );
@@ -2245,6 +2380,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) => {
@@ -2269,7 +2419,7 @@ function useGlideTable(options) {
   });
   const table = useReactTable({
     data: tableData,
-    columns,
+    columns: tableColumns,
     ...enableColumnResize ? {
       defaultColumn: {
         minSize: DATA_TABLE_COLUMN_MIN_SIZE,
@@ -2751,6 +2901,7 @@ function useGlideTable(options) {
     selectionLabel: labels.selection,
     enableCellSelection,
     enableColumnResize,
+    enableColumnReorder,
     enableColumnFreeze,
     enableInlineSearch,
     shouldVirtualize,
@@ -2764,6 +2915,7 @@ function useGlideTable(options) {
     getCellContext,
     handleToggleSelect,
     clearHover,
+    setColumnOrder,
     copySelection: stableCopySelection,
     inlineSearch: {
       showSearch: inlineSearch.showSearch,
@@ -2849,13 +3001,226 @@ function getColumnSizeStyle(size, options) {
   };
 }
 
+// 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
+  };
+}
+
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 
 // src/components/ui/table/components/icons.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -3153,9 +3518,9 @@ function DataTableRow({
   const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
   const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
   const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
-  const editInputRef = useRef6(null);
+  const editInputRef = useRef7(null);
   const isRowEditing = editingCell?.rowIndex === rowIndex;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isRowEditing) return;
     editInputRef.current?.focus();
     editInputRef.current?.select();
@@ -3753,6 +4118,7 @@ function DataTable({
     selectionLabel,
     enableCellSelection,
     enableColumnResize,
+    enableColumnReorder,
     enableColumnFreeze,
     enableInlineSearch,
     shouldVirtualize,
@@ -3765,6 +4131,7 @@ function DataTable({
     rowContextValue,
     handleToggleSelect,
     clearHover,
+    setColumnOrder,
     inlineSearch
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
@@ -3774,6 +4141,12 @@ function DataTable({
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
   const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
+  const leafColumnIds = table.getVisibleLeafColumns().map((column) => column.id);
+  const { isReordering, draggingColumnId, dropTarget, onHeaderPointerDown } = useColumnReorder({
+    enabled: enableColumnReorder,
+    columnOrder: leafColumnIds,
+    onColumnOrderChange: setColumnOrder
+  });
   const contextValue = useMemo4(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
@@ -3796,6 +4169,8 @@ function DataTable({
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
         enableColumnResize && "DataTableJSX--column-resize",
+        enableColumnReorder && "DataTableJSX--column-reorder",
+        isReordering && "DataTableJSX--column-reordering",
         enableColumnFreeze && "DataTableJSX--column-freeze",
         enableInlineSearch && "DataTableJSX--inline-search",
         classNames?.root,
@@ -3864,20 +4239,43 @@ function DataTable({
                       ...sizeStyle,
                       ...freezeStyle
                     };
+                    const isPlaceholder = header.isPlaceholder;
+                    const leafColumns = header.column.getLeafColumns();
+                    const leafIds = leafColumns.map((leafColumn) => leafColumn.id);
+                    const isLeafHeader = !isPlaceholder && header.subHeaders.length === 0;
+                    const canDrag = enableColumnReorder && !isPlaceholder && leafIds.length > 0 && leafColumns.every(
+                      (leafColumn) => isColumnReorderable(leafColumn.columnDef.meta)
+                    );
+                    const isDragging = draggingColumnId === header.column.id;
+                    const dropEdge = !isPlaceholder && dropTarget?.columnId === header.column.id ? dropTarget.edge : void 0;
                     return /* @__PURE__ */ jsxs6(
                       "th",
                       {
                         colSpan: header.colSpan,
                         rowSpan: header.mergedRowSpan,
+                        "data-column-id": enableColumnReorder && !isPlaceholder ? header.column.id : void 0,
+                        "data-reorder-ids": enableColumnReorder && !isPlaceholder ? serializeReorderIds(leafIds) : void 0,
+                        "data-reorder-leaf": enableColumnReorder && isLeafHeader ? "" : void 0,
+                        "data-reorderable": canDrag ? "" : void 0,
+                        "data-reordering": isDragging ? "" : void 0,
+                        "data-drop-edge": dropEdge,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
+                        "aria-grabbed": isDragging ? true : void 0,
+                        title: canDrag ? labels.reorderColumn : void 0,
+                        onPointerDown: enableColumnReorder ? (event) => onHeaderPointerDown(event, {
+                          columnId: header.column.id,
+                          leafIds,
+                          canDrag
+                        }) : void 0,
                         style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",
                           freezeOffset && `data-table-head-cell--frozen-${freezeOffset.side}`,
                           CELL_ALIGN_CLASS[align],
                           classNames?.headCell,
+                          dropEdge && classNames?.dropEdge,
                           headerClassName
                         ),
                         children: [
@@ -3999,7 +4397,7 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5, useState as useState6 } from "react";
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -4037,6 +4435,7 @@ function buildColumnDef(props, sort, onSort) {
     minWidth,
     maxWidth,
     resizable,
+    reorderable,
     frozen,
     align,
     rowSpan,
@@ -4082,6 +4481,7 @@ function buildColumnDef(props, sort, onSort) {
       cellProps,
       cellRender: render,
       frozen,
+      reorderable,
       className,
       headerClassName
     }
@@ -4329,8 +4729,8 @@ function TableRoot({
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = useState5(null);
-  const handleSort = useCallback6((field) => {
+  const [sort, setSort] = useState6(null);
+  const handleSort = useCallback7((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -4427,6 +4827,7 @@ export {
   Table,
   applyCellEdit,
   applyFillData,
+  applyLeafColumnOrder,
   applySelectionUpdater,
   buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
@@ -4441,6 +4842,7 @@ export {
   collectCopyRowEntries,
   collectCopyRows,
   collectFillChanges,
+  collectLeafColumnIds,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
   commitCellValue,
@@ -4466,6 +4868,7 @@ export {
   mapSearchResultToVisibleItem,
   mapSearchResultsToVisibleKeys,
   measureMergedSpanRowHeights,
+  moveColumnIds,
   nextSearchIndex,
   nextSearchStride,
   parseCellEditValue,
@@ -4475,7 +4878,9 @@ export {
   resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveDropEdge,
   resolveHeaderFreezeOffset,
+  resolveLeafColumnOrder,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
@@ -4485,6 +4890,7 @@ export {
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,
+  useColumnReorder,
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,