react-glide-table 2.0.2 → 2.2.0

package/dist/compound.cjs

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(compound_exports);
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table = require("@tanstack/react-table");
@@ -49,6 +49,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/DataTableContext.tsx
 var import_react = require("react");
@@ -889,23 +890,49 @@ var useConvertTreeData = ({
 function getRowFieldValue(row, key) {
   return row[key];
 }
-function computeRowSpans(data, rowSpanKey) {
+function normalizeRowSpanParent(value) {
+  if (!value) return [];
+  return typeof value === "string" ? [value] : [...value];
+}
+function toParentSpanList(parentSpans) {
+  if (!parentSpans?.length) return [];
+  const first = parentSpans[0];
+  if (!Array.isArray(first)) {
+    return [parentSpans];
+  }
+  return parentSpans;
+}
+function buildStartRowLookup(spans) {
+  const startRows = new Array(spans.length);
+  let origin = 0;
+  for (let i = 0; i < spans.length; i++) {
+    if ((spans[i]?.rowSpan ?? 1) > 0) origin = i;
+    startRows[i] = origin;
+  }
+  return startRows;
+}
+function sharesParentGroup(parentStartRows, rowIndex) {
+  if (parentStartRows.length === 0 || rowIndex <= 0) return true;
+  return parentStartRows.every(
+    (startRows) => startRows[rowIndex - 1] === startRows[rowIndex]
+  );
+}
+function computeRowSpans(data, rowSpanKey, parentSpans) {
   if (data.length === 0) return [];
+  const parentStartRows = toParentSpanList(parentSpans).map(buildStartRowLookup);
   const result = [];
   for (let index = 0; index < data.length; index++) {
     const currentValue = getRowFieldValue(data[index], rowSpanKey);
     const previousValue = index > 0 ? getRowFieldValue(data[index - 1], rowSpanKey) : void 0;
-    if (index > 0 && currentValue === previousValue) {
+    if (index > 0 && currentValue === previousValue && sharesParentGroup(parentStartRows, index)) {
       result.push({ rowSpan: 0, isFirstInGroup: false });
       continue;
     }
     let span = 1;
     for (let nextIndex = index + 1; nextIndex < data.length; nextIndex++) {
-      if (getRowFieldValue(data[nextIndex], rowSpanKey) === currentValue) {
-        span++;
-      } else {
-        break;
-      }
+      if (getRowFieldValue(data[nextIndex], rowSpanKey) !== currentValue) break;
+      if (!sharesParentGroup(parentStartRows, nextIndex)) break;
+      span++;
     }
     result.push({ rowSpan: span, isFirstInGroup: true });
   }
@@ -927,10 +954,50 @@ function resolveRowSpanAt(rowSpans, rowIndex) {
   }
   return { startRow: rowIndex, rowSpan: 1 };
 }
+function findRowSpanColumn(spec, ref) {
+  return spec.find((column) => column.columnId === ref) ?? spec.find((column) => column.rowSpanKey === ref);
+}
 function buildColumnRowSpanMap(data, columnKeys) {
   const map = /* @__PURE__ */ new Map();
-  for (const { columnId, rowSpanKey } of columnKeys) {
-    map.set(columnId, computeRowSpans(data, rowSpanKey));
+  const visiting = /* @__PURE__ */ new Set();
+  const warnedCycles = /* @__PURE__ */ new Set();
+  const virtualParents = /* @__PURE__ */ new Map();
+  const spansForColumn = (columnId) => {
+    const cached = map.get(columnId);
+    if (cached !== void 0) return cached;
+    const column = columnKeys.find((item) => item.columnId === columnId);
+    if (!column) return void 0;
+    if (visiting.has(columnId)) {
+      if (!warnedCycles.has(columnId)) {
+        warnedCycles.add(columnId);
+        console.warn(
+          `[rowSpan] rowSpanParent cycle detected at column "${columnId}"; dropping the cyclic parent reference.`
+        );
+      }
+      return void 0;
+    }
+    visiting.add(columnId);
+    const parentSpans = (column.rowSpanParent ?? []).map((ref) => spansForParentRef(ref)).filter((spans2) => Boolean(spans2));
+    visiting.delete(columnId);
+    const spans = computeRowSpans(
+      data,
+      column.rowSpanKey,
+      parentSpans.length > 0 ? parentSpans : void 0
+    );
+    map.set(columnId, spans);
+    return spans;
+  };
+  const spansForParentRef = (ref) => {
+    const parentColumn = findRowSpanColumn(columnKeys, ref);
+    if (parentColumn) return spansForColumn(parentColumn.columnId);
+    const cached = virtualParents.get(ref);
+    if (cached !== void 0) return cached;
+    const spans = computeRowSpans(data, ref);
+    virtualParents.set(ref, spans);
+    return spans;
+  };
+  for (const column of columnKeys) {
+    spansForColumn(column.columnId);
   }
   return map;
 }
@@ -946,7 +1013,8 @@ function collectRowSpanColumns(columns) {
       if (!columnId || !columnDef.meta?.rowSpan) continue;
       result.push({
         columnId,
-        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId
+        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId,
+        rowSpanParent: normalizeRowSpanParent(columnDef.meta.rowSpanParent)
       });
     }
   };
@@ -1785,13 +1853,350 @@ function getMergedHeaderGroups(headerGroups) {
   }));
 }
 
+// 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-reorder/useColumnReorder.ts
+var import_react4 = require("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 = (0, import_react4.useRef)(null);
+  const columnOrderRef = (0, import_react4.useRef)(columnOrder);
+  const onColumnOrderChangeRef = (0, import_react4.useRef)(onColumnOrderChange);
+  const [draggingColumnId, setDraggingColumnId] = (0, import_react4.useState)(null);
+  const [dropTarget, setDropTarget] = (0, import_react4.useState)(
+    null
+  );
+  const dropTargetRef = (0, import_react4.useRef)(dropTarget);
+  const previousUserSelectRef = (0, import_react4.useRef)(null);
+  columnOrderRef.current = columnOrder;
+  onColumnOrderChangeRef.current = onColumnOrderChange;
+  dropTargetRef.current = dropTarget;
+  const resetDrag = (0, import_react4.useCallback)(() => {
+    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");
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!enabled) resetDrag();
+  }, [enabled, resetDrag]);
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      resetDrag();
+    };
+  }, [resetDrag]);
+  const onHeaderPointerDown = (0, import_react4.useCallback)(
+    (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]
+  );
+  (0, import_react4.useEffect)(() => {
+    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/core/useGlideTable.ts
 var import_react_table2 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/ui/table/features/cell-render/commitCellValue.ts
 function commitCellValue({
@@ -1831,21 +2236,21 @@ function useCellEdit({
   onDataChange,
   onCellChange
 }) {
-  const [editingCell, setEditingCell] = (0, import_react4.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react4.useState)("");
-  const draftValueRef = (0, import_react4.useRef)(draftValue);
-  const editingCellRef = (0, import_react4.useRef)(editingCell);
-  (0, import_react4.useEffect)(() => {
+  const [editingCell, setEditingCell] = (0, import_react5.useState)(null);
+  const [draftValue, setDraftValue] = (0, import_react5.useState)("");
+  const draftValueRef = (0, import_react5.useRef)(draftValue);
+  const editingCellRef = (0, import_react5.useRef)(editingCell);
+  (0, import_react5.useEffect)(() => {
     draftValueRef.current = draftValue;
   }, [draftValue]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     editingCellRef.current = editingCell;
   }, [editingCell]);
-  const cancelEdit = (0, import_react4.useCallback)(() => {
+  const cancelEdit = (0, import_react5.useCallback)(() => {
     setEditingCell(null);
     setDraftValue("");
   }, []);
-  const commitEdit = (0, import_react4.useCallback)(
+  const commitEdit = (0, import_react5.useCallback)(
     (raw) => {
       const current = editingCellRef.current;
       if (!current) return true;
@@ -1881,7 +2286,7 @@ function useCellEdit({
     },
     [cancelEdit, data, onCellChange, onDataChange, rows]
   );
-  const startEdit = (0, import_react4.useCallback)(
+  const startEdit = (0, import_react5.useCallback)(
     (rowIndex, colIndex) => {
       const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
       if (!cell || !isColumnEditable(cell.column.columnDef)) return;
@@ -2117,7 +2522,7 @@ function formatDefaultCellValue(value) {
 }
 
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/ui/table/features/cell-selection/copyData.ts
 function formatPrimitive(value) {
@@ -2396,15 +2801,15 @@ function useCellSelection({
   onRowsPaste,
   onCellNavigate
 }) {
-  const [dragState, setDragState] = (0, import_react5.useState)(INITIAL_DRAG_STATE);
-  const pendingPasteModeRef = (0, import_react5.useRef)(null);
-  const dragStateRef = (0, import_react5.useRef)(dragState);
-  const onCellNavigateRef = (0, import_react5.useRef)(onCellNavigate);
+  const [dragState, setDragState] = (0, import_react6.useState)(INITIAL_DRAG_STATE);
+  const pendingPasteModeRef = (0, import_react6.useRef)(null);
+  const dragStateRef = (0, import_react6.useRef)(dragState);
+  const onCellNavigateRef = (0, import_react6.useRef)(onCellNavigate);
   dragStateRef.current = dragState;
   onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
-  const handleCellMouseDown = (0, import_react5.useCallback)(
+  const handleCellMouseDown = (0, import_react6.useCallback)(
     (rowIndex, colIndex, options) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2430,7 +2835,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleCellMouseEnter = (0, import_react5.useCallback)(
+  const handleCellMouseEnter = (0, import_react6.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2445,7 +2850,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleFillHandleMouseDown = (0, import_react5.useCallback)(
+  const handleFillHandleMouseDown = (0, import_react6.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -2462,12 +2867,12 @@ function useCellSelection({
     },
     [enabled]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled) {
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (e.ctrlKey || e.metaKey || e.altKey) return;
@@ -2514,7 +2919,7 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [columnCount, enabled, rows]);
-  const copySelection = (0, import_react5.useCallback)(
+  const copySelection = (0, import_react6.useCallback)(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
       const mode = options?.includeDescendants && enableSubtreeCopy ? "subtree" : "visible";
@@ -2522,7 +2927,7 @@ function useCellSelection({
     },
     [activeSelectionBounds, enableSubtreeCopy, enabled, rows]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (!activeSelectionBounds) return;
@@ -2536,7 +2941,7 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeSelectionBounds, copySelection, enableSubtreeCopy, enabled]);
-  const emitRowsPaste = (0, import_react5.useCallback)(
+  const emitRowsPaste = (0, import_react6.useCallback)(
     (text, mode) => {
       if (!onRowsPaste || !activeSelectionBounds) return false;
       const payload = buildRowsPastePayload(
@@ -2553,7 +2958,7 @@ function useCellSelection({
     },
     [activeSelectionBounds, onRowsPaste, rows]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled || !onRowsPaste) return;
     const pasteHandledRef = { current: false };
     const ignoreNextPasteRef = { current: false };
@@ -2621,7 +3026,7 @@ function useCellSelection({
     enabled,
     onRowsPaste
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled) return;
     const handleMouseUp = () => {
       setDragState((prev) => {
@@ -2672,7 +3077,7 @@ function useCellSelection({
 }
 
 // src/components/ui/table/features/inline-search/useInlineSearch.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
 function useInlineSearch({
   enabled = false,
@@ -2689,46 +3094,46 @@ function useInlineSearch({
   onNavigateToResult,
   rootRef
 }) {
-  const searchInputId = (0, import_react6.useId)();
-  const searchInputRef = (0, import_react6.useRef)(null);
-  const [internalShowSearch, setInternalShowSearch] = (0, import_react6.useState)(false);
-  const [internalSearchValue, setInternalSearchValue] = (0, import_react6.useState)("");
-  const [internalResults, setInternalResults] = (0, import_react6.useState)(
+  const searchInputId = (0, import_react7.useId)();
+  const searchInputRef = (0, import_react7.useRef)(null);
+  const [internalShowSearch, setInternalShowSearch] = (0, import_react7.useState)(false);
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react7.useState)("");
+  const [internalResults, setInternalResults] = (0, import_react7.useState)(
     []
   );
-  const [searchStatus, setSearchStatus] = (0, import_react6.useState)();
-  const searchStatusRef = (0, import_react6.useRef)(searchStatus);
+  const [searchStatus, setSearchStatus] = (0, import_react7.useState)();
+  const searchStatusRef = (0, import_react7.useRef)(searchStatus);
   searchStatusRef.current = searchStatus;
-  const abortControllerRef = (0, import_react6.useRef)(null);
-  const searchHandleRef = (0, import_react6.useRef)(void 0);
-  const initialStartRowRef = (0, import_react6.useRef)(initialStartRow);
+  const abortControllerRef = (0, import_react7.useRef)(null);
+  const searchHandleRef = (0, import_react7.useRef)(void 0);
+  const initialStartRowRef = (0, import_react7.useRef)(initialStartRow);
   initialStartRowRef.current = initialStartRow;
-  const getCellValueRef = (0, import_react6.useRef)(getCellValue);
+  const getCellValueRef = (0, import_react7.useRef)(getCellValue);
   getCellValueRef.current = getCellValue;
   const showSearch = controlledShowSearch ?? internalShowSearch;
   const searchValue = controlledSearchValue ?? internalSearchValue;
   const searchResults = controlledSearchResults ?? internalResults;
-  const setSearchValue = (0, import_react6.useCallback)(
+  const setSearchValue = (0, import_react7.useCallback)(
     (value) => {
       setInternalSearchValue(value);
       onSearchValueChange?.(value);
     },
     [onSearchValueChange]
   );
-  const cancelSearch = (0, import_react6.useCallback)(() => {
+  const cancelSearch = (0, import_react7.useCallback)(() => {
     if (searchHandleRef.current !== void 0) {
       window.cancelAnimationFrame(searchHandleRef.current);
       searchHandleRef.current = void 0;
     }
     abortControllerRef.current?.abort();
   }, []);
-  const emitResultsChanged = (0, import_react6.useCallback)(
+  const emitResultsChanged = (0, import_react7.useCallback)(
     (results, navIndex) => {
       onSearchResultsChanged?.(results, navIndex);
     },
     [onSearchResultsChanged]
   );
-  const navigateToIndex = (0, import_react6.useCallback)(
+  const navigateToIndex = (0, import_react7.useCallback)(
     (results, navIndex) => {
       if (onSearchResultsChanged) return;
       if (navIndex < 0 || navIndex >= results.length) return;
@@ -2738,7 +3143,7 @@ function useInlineSearch({
     },
     [onNavigateToResult, onSearchResultsChanged]
   );
-  const beginSearch = (0, import_react6.useCallback)(
+  const beginSearch = (0, import_react7.useCallback)(
     (query) => {
       if (controlledSearchResults !== void 0) return;
       const totalRows = rowCount;
@@ -2810,12 +3215,12 @@ function useInlineSearch({
       rowCount
     ]
   );
-  const openSearch = (0, import_react6.useCallback)(() => {
+  const openSearch = (0, import_react7.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(true);
     }
   }, [controlledShowSearch]);
-  const closeSearch = (0, import_react6.useCallback)(() => {
+  const closeSearch = (0, import_react7.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(false);
     }
@@ -2830,7 +3235,7 @@ function useInlineSearch({
     emitResultsChanged,
     onSearchClose
   ]);
-  const goToNext = (0, import_react6.useCallback)(() => {
+  const goToNext = (0, import_react7.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = nextSearchIndex(
       searchStatus.selectedIndex,
@@ -2840,7 +3245,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  const goToPrevious = (0, import_react6.useCallback)(() => {
+  const goToPrevious = (0, import_react7.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = previousSearchIndex(
       searchStatus.selectedIndex,
@@ -2850,7 +3255,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (controlledSearchResults === void 0) return;
     if (controlledSearchResults.length > 0) {
       setSearchStatus((current) => ({
@@ -2862,7 +3267,7 @@ function useInlineSearch({
       setSearchStatus(void 0);
     }
   }, [controlledSearchResults, rowCount]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     setSearchStatus(void 0);
     setInternalResults([]);
@@ -2875,7 +3280,7 @@ function useInlineSearch({
       cancelSearch();
     }
   }, [enabled, showSearch]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled || !showSearch) return;
     if (controlledSearchResults !== void 0) return;
     if (searchValue.trim() === "") {
@@ -2895,7 +3300,7 @@ function useInlineSearch({
     searchValue,
     showSearch
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (!(event.ctrlKey || event.metaKey)) return;
@@ -2922,12 +3327,12 @@ function useInlineSearch({
     window.addEventListener("keydown", handleKeyDown, true);
     return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [controlledShowSearch, enabled, rootRef, showSearch]);
-  (0, import_react6.useEffect)(() => () => cancelSearch(), [cancelSearch]);
-  const searchMatchKeys = (0, import_react6.useMemo)(
+  (0, import_react7.useEffect)(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = (0, import_react7.useMemo)(
     () => buildSearchMatchKeys(searchResults),
     [searchResults]
   );
-  const activeMatch = (0, import_react6.useMemo)(() => {
+  const activeMatch = (0, import_react7.useMemo)(() => {
     if (!searchStatus || searchStatus.selectedIndex < 0) return null;
     return searchResults[searchStatus.selectedIndex] ?? null;
   }, [searchResults, searchStatus]);
@@ -2992,6 +3397,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",
@@ -3049,6 +3455,9 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
+    enableColumnReorder = false,
+    columnOrder: controlledColumnOrder,
+    onColumnOrderChange,
     enableColumnFreeze = false,
     enableInlineSearch = false,
     showSearch,
@@ -3058,7 +3467,7 @@ function useGlideTable(options) {
     searchResults,
     onSearchResultsChanged
   } = options;
-  const labels = (0, import_react7.useMemo)(() => {
+  const labels = (0, import_react8.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -3069,16 +3478,17 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react7.useState)({});
-  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react7.useState)({});
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react7.useState)(
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react8.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react8.useState)({});
+  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react8.useState)([]);
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react8.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react7.useState)(null);
-  const scrollRef = (0, import_react7.useRef)(null);
-  const rootRef = (0, import_react7.useRef)(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react8.useState)(null);
+  const scrollRef = (0, import_react8.useRef)(null);
+  const rootRef = (0, import_react8.useRef)(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -3091,8 +3501,23 @@ function useGlideTable(options) {
     internalRowSelection
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
+  const columnOrder = controlledColumnOrder ?? internalColumnOrder;
+  const tableColumns = (0, import_react8.useMemo)(() => {
+    if (!enableColumnReorder) return columns;
+    return applyLeafColumnOrder(columns, columnOrder);
+  }, [columnOrder, columns, enableColumnReorder]);
+  const setColumnOrder = (0, import_react8.useCallback)(
+    (next) => {
+      if (onColumnOrderChange) {
+        onColumnOrderChange(next);
+        return;
+      }
+      setInternalColumnOrder(next);
+    },
+    [onColumnOrderChange]
+  );
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react7.useCallback)(
+  const handleExpandedRowsChange = (0, import_react8.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -3115,7 +3540,7 @@ function useGlideTable(options) {
   });
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
-    columns,
+    columns: tableColumns,
     ...enableColumnResize ? {
       defaultColumn: {
         minSize: DATA_TABLE_COLUMN_MIN_SIZE,
@@ -3153,13 +3578,13 @@ function useGlideTable(options) {
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react7.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react8.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = (0, import_react7.useMemo)(
+  const columnRowSpanMap = (0, import_react8.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -3168,7 +3593,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = (0, import_react7.useMemo)(() => {
+  const columnFreezeOffsets = (0, import_react8.useMemo)(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -3188,14 +3613,14 @@ function useGlideTable(options) {
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedRowIndices = (0, import_react7.useMemo)(() => {
+  const selectedRowIndices = (0, import_react8.useMemo)(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
-  const scrollCellIntoView = (0, import_react7.useCallback)(
+  const scrollCellIntoView = (0, import_react8.useCallback)(
     (rowIndex, colIndex, options2) => {
       const align = options2?.align ?? "nearest";
       const blockAlign = align === "center" ? "center" : "nearest";
@@ -3222,7 +3647,7 @@ function useGlideTable(options) {
     },
     [rowVirtualizer, shouldVirtualize]
   );
-  const handleCellNavigate = (0, import_react7.useCallback)(
+  const handleCellNavigate = (0, import_react8.useCallback)(
     (position) => {
       scrollCellIntoView(position.row, position.col, { align: "nearest" });
     },
@@ -3255,11 +3680,11 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const cellRendererRegistry = (0, import_react7.useMemo)(
+  const cellRendererRegistry = (0, import_react8.useMemo)(
     () => createCellRendererRegistry(cellRenderers),
     [cellRenderers]
   );
-  const commitRenderedCellValue = (0, import_react7.useCallback)(
+  const commitRenderedCellValue = (0, import_react8.useCallback)(
     (rowId, columnId, value) => commitCellValue({
       data: tableData,
       rows,
@@ -3271,11 +3696,11 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
-  const getCellContext = (0, import_react7.useCallback)(
+  const getCellContext = (0, import_react8.useCallback)(
     (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
     [commitRenderedCellValue]
   );
-  const handleCellMouseDownWithCommit = (0, import_react7.useCallback)(
+  const handleCellMouseDownWithCommit = (0, import_react8.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
@@ -3285,7 +3710,7 @@ function useGlideTable(options) {
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const navigateToSearchResult = (0, import_react7.useCallback)(
+  const navigateToSearchResult = (0, import_react8.useCallback)(
     (item) => {
       const [colIndex, rowIndex] = item;
       handleCellMouseDownWithCommit(rowIndex, colIndex);
@@ -3293,7 +3718,7 @@ function useGlideTable(options) {
     },
     [handleCellMouseDownWithCommit, scrollCellIntoView]
   );
-  const resolveSearchRowId = (0, import_react7.useCallback)(
+  const resolveSearchRowId = (0, import_react8.useCallback)(
     (row, index) => {
       if (getRowId) return getRowId(row, index);
       if (enableExpand) {
@@ -3317,7 +3742,7 @@ function useGlideTable(options) {
     },
     [enableExpand, getRowId, toggleField]
   );
-  const searchCorpus = (0, import_react7.useMemo)(() => {
+  const searchCorpus = (0, import_react8.useMemo)(() => {
     if (!enableInlineSearch) return [];
     if (enableExpand && toggleField) {
       return buildTreeSearchCorpus(tableData, {
@@ -3333,16 +3758,16 @@ function useGlideTable(options) {
     tableData,
     toggleField
   ]);
-  const searchCorpusRef = (0, import_react7.useRef)(searchCorpus);
+  const searchCorpusRef = (0, import_react8.useRef)(searchCorpus);
   searchCorpusRef.current = searchCorpus;
-  const visibleRowIndexById = (0, import_react7.useMemo)(() => {
+  const visibleRowIndexById = (0, import_react8.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of rows) {
       map.set(resolveSearchRowId(row.original, row.index), row.index);
     }
     return map;
   }, [resolveSearchRowId, rows]);
-  const getSearchCellValue = (0, import_react7.useCallback)(
+  const getSearchCellValue = (0, import_react8.useCallback)(
     (rowIndex, colIndex) => {
       const corpusRow = searchCorpusRef.current[rowIndex];
       const column = visibleLeafColumns[colIndex];
@@ -3365,14 +3790,14 @@ function useGlideTable(options) {
     },
     [rows, visibleLeafColumns, visibleRowIndexById]
   );
-  const pendingSearchNavRef = (0, import_react7.useRef)(null);
-  const focusSearchResult = (0, import_react7.useCallback)(
+  const pendingSearchNavRef = (0, import_react8.useRef)(null);
+  const focusSearchResult = (0, import_react8.useCallback)(
     (colIndex, visibleRowIndex) => {
       navigateToSearchResult([colIndex, visibleRowIndex]);
     },
     [navigateToSearchResult]
   );
-  const navigateToCorpusSearchResult = (0, import_react7.useCallback)(
+  const navigateToCorpusSearchResult = (0, import_react8.useCallback)(
     (item) => {
       const [colIndex, corpusRowIndex] = item;
       const corpusRow = searchCorpusRef.current[corpusRowIndex];
@@ -3405,7 +3830,7 @@ function useGlideTable(options) {
       visibleRowIndexById
     ]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const pending = pendingSearchNavRef.current;
     if (!pending) return;
     const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
@@ -3429,7 +3854,7 @@ function useGlideTable(options) {
     onNavigateToResult: navigateToCorpusSearchResult,
     rootRef
   });
-  const visibleSearchMatchKeys = (0, import_react7.useMemo)(() => {
+  const visibleSearchMatchKeys = (0, import_react8.useMemo)(() => {
     if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
     return mapSearchResultsToVisibleKeys(
       inlineSearch.searchResults,
@@ -3442,7 +3867,7 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const visibleActiveMatch = (0, import_react7.useMemo)(() => {
+  const visibleActiveMatch = (0, import_react8.useMemo)(() => {
     if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
     return mapSearchResultToVisibleItem(
       inlineSearch.activeMatch,
@@ -3455,13 +3880,13 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const clearHover = (0, import_react7.useCallback)(() => {
+  const clearHover = (0, import_react8.useCallback)(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = (0, import_react7.useCallback)((rowIndex, _rowData) => {
+  const handleRowHover = (0, import_react8.useCallback)((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = (0, import_react7.useCallback)(
+  const handleToggleSelect = (0, import_react8.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -3471,14 +3896,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react7.useCallback)(
+  const handleToggleExpand = (0, import_react8.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react7.useMemo)(() => {
+  const rowContextValue = (0, import_react8.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -3577,12 +4002,12 @@ function useGlideTable(options) {
     visibleSearchMatchKeys,
     visibleActiveMatch
   ]);
-  const copySelectionRef = (0, import_react7.useRef)(copySelection);
-  (0, import_react7.useEffect)(() => {
+  const copySelectionRef = (0, import_react8.useRef)(copySelection);
+  (0, import_react8.useEffect)(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = (0, import_react7.useCallback)((options2) => copySelectionRef.current(options2), []);
-  (0, import_react7.useEffect)(() => {
+  const stableCopySelection = (0, import_react8.useCallback)((options2) => copySelectionRef.current(options2), []);
+  (0, import_react8.useEffect)(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -3597,6 +4022,7 @@ function useGlideTable(options) {
     selectionLabel: labels.selection,
     enableCellSelection,
     enableColumnResize,
+    enableColumnReorder,
     enableColumnFreeze,
     enableInlineSearch,
     shouldVirtualize,
@@ -3610,6 +4036,7 @@ function useGlideTable(options) {
     getCellContext,
     handleToggleSelect,
     clearHover,
+    setColumnOrder,
     copySelection: stableCopySelection,
     inlineSearch: {
       showSearch: inlineSearch.showSearch,
@@ -3693,6 +4120,7 @@ function DataTable({
     selectionLabel,
     enableCellSelection,
     enableColumnResize,
+    enableColumnReorder,
     enableColumnFreeze,
     enableInlineSearch,
     shouldVirtualize,
@@ -3705,6 +4133,7 @@ function DataTable({
     rowContextValue,
     handleToggleSelect,
     clearHover,
+    setColumnOrder,
     inlineSearch
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
@@ -3714,7 +4143,13 @@ function DataTable({
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
   const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
-  const contextValue = (0, import_react8.useMemo)(
+  const leafColumnIds = table.getVisibleLeafColumns().map((column) => column.id);
+  const { isReordering, draggingColumnId, dropTarget, onHeaderPointerDown } = useColumnReorder({
+    enabled: enableColumnReorder,
+    columnOrder: leafColumnIds,
+    onColumnOrderChange: setColumnOrder
+  });
+  const contextValue = (0, import_react9.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
@@ -3736,6 +4171,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,
@@ -3804,20 +4241,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__ */ (0, import_jsx_runtime7.jsxs)(
                       "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: [
@@ -3939,10 +4399,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 function ResolvedTableCell({
   info
 }) {
@@ -3951,7 +4411,7 @@ function ResolvedTableCell({
   const meta = column.columnDef.meta;
   const value = getValue();
   const columnId = column.id;
-  const update = (0, import_react9.useCallback)(
+  const update = (0, import_react10.useCallback)(
     (next) => {
       cellRender.commitValue(row.id, columnId, next);
     },
@@ -4011,10 +4471,12 @@ function buildColumnDef(props, sort, onSort) {
     minWidth,
     maxWidth,
     resizable,
+    reorderable,
     frozen,
     align,
     rowSpan,
     rowSpanKey,
+    rowSpanParent,
     editable,
     editType,
     editInputProps,
@@ -4049,6 +4511,7 @@ function buildColumnDef(props, sort, onSort) {
       align,
       rowSpan,
       rowSpanKey,
+      rowSpanParent,
       editable,
       editType,
       editInputProps,
@@ -4056,6 +4519,7 @@ function buildColumnDef(props, sort, onSort) {
       cellProps,
       cellRender: render,
       frozen,
+      reorderable,
       className,
       headerClassName
     }
@@ -4101,10 +4565,10 @@ function countLeafColumns(nodes) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
@@ -4117,19 +4581,19 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
 function isTableColumnGroupElement(child) {
-  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
+  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react11.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -4139,7 +4603,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react11.Children.toArray(children)) {
+  for (const child of import_react12.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -4156,7 +4620,7 @@ function parseTableChildren(children) {
 }
 function walkColumnTreeNodes(children) {
   const result = [];
-  for (const child of import_react11.Children.toArray(children)) {
+  for (const child of import_react12.Children.toArray(children)) {
     if (isTableColumnElement(child)) {
       result.push({
         type: "leaf",
@@ -4173,7 +4637,7 @@ function walkColumnTreeNodes(children) {
       });
       continue;
     }
-    if ((0, import_react11.isValidElement)(child)) {
+    if ((0, import_react12.isValidElement)(child)) {
       const nested = child.props.children;
       if (nested != null) {
         result.push(...walkColumnTreeNodes(nested));
@@ -4299,12 +4763,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react12.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react13.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react12.useState)(null);
-  const handleSort = (0, import_react12.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react13.useState)(null);
+  const handleSort = (0, import_react13.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -4315,8 +4779,8 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columnTree = (0, import_react12.useMemo)(() => extractColumnTree(header), [header]);
-  const columns = (0, import_react12.useMemo)(
+  const columnTree = (0, import_react13.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react13.useMemo)(
     () => buildColumnDefsFromTree(columnTree, sort, handleSort),
     [columnTree, sort, handleSort]
   );
@@ -4324,7 +4788,7 @@ function TableRoot({
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react12.useMemo)(() => {
+  const tableData = (0, import_react13.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);