@bmsuisse/datagrid 0.34.0 → 0.35.0

package/dist/index.d.ts

@@ -1218,6 +1218,27 @@ interface ColumnSelectorProps<TRow> {
     /** Optional controlled open state, for callers that want their own trigger entirely. */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Column ids in display order (typically the same order already fed to
+     * `<DataGrid columns={...}>`). When given together with
+     * `onColumnOrderChange`, each row gets a drag handle so a column can be
+     * dragged to a new position -- purely within its own group (or the
+     * ungrouped section): a column's `group` is fixed metadata from its
+     * `ColumnDef`, not something dragging can change, so a row only ever
+     * visibly moves among its own group's other rows. Omit both props for the
+     * original visibility-only behavior (no drag handles rendered at all).
+     *
+     * `onColumnOrderChange` is the only thing that ever fires on a drop --
+     * exactly one call, with the fully-computed new order, so a caller can
+     * persist it (to its own state store, a backend, wherever) without also
+     * reaching into this component's internals. `persistKey`, if set,
+     * additionally layers the same kind of localStorage restore-on-mount/write-
+     * on-change sync `visibility` already gets (under a separate storage key --
+     * see `persistence.ts` -- so it can't collide with or migrate previously
+     * stored visibility data).
+     */
+    columnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
 }
 /**
  * Controlled column-visibility selector: a modal listing every column,
@@ -1230,7 +1251,9 @@ interface ColumnSelectorProps<TRow> {
  * controlled by `visibility`/`onVisibilityChange` — `persistKey`
  * layers an optional localStorage sync on top (restore once on mount, write
  * on every change), it never becomes the source of truth in place of the
- * `visibility` prop.
+ * `visibility` prop. `columnOrder`/`onColumnOrderChange` (both optional,
+ * opt-in) layer the same kind of controlled sync on top for drag-to-reorder
+ * — see their own doc comments above.
  *
  * Not rendered inside `<DataGrid>` automatically — wire it up next to the
  * grid yourself, e.g.:
@@ -1241,7 +1264,7 @@ interface ColumnSelectorProps<TRow> {
  * <DataGrid columns={columns} columnVisibility={visibility} onColumnVisibilityChange={setVisibility} ... />
  * ```
  */
-declare function ColumnSelector<TRow>({ columns, visibility, onVisibilityChange, persistKey, trigger, open, onOpenChange, }: ColumnSelectorProps<TRow>): ReactElement;
+declare function ColumnSelector<TRow>({ columns, visibility, onVisibilityChange, persistKey, trigger, open, onOpenChange, columnOrder, onColumnOrderChange, }: ColumnSelectorProps<TRow>): ReactElement;
 
 /** A missing key means visible, matching TanStack's own VisibilityState convention. */
 declare function isColumnVisible(visibility: ColumnVisibility, columnId: string): boolean;
@@ -1265,6 +1288,34 @@ declare function canHideColumn<TRow>(columns: readonly ColumnDef<TRow>[], visibi
 declare function canHideGroup<TRow>(columns: readonly ColumnDef<TRow>[], visibility: ColumnVisibility, groupColumnIds: readonly string[]): boolean;
 
 declare function storageKeyFor(persistKey: string): string;
+declare function orderStorageKeyFor(persistKey: string): string;
+
+/**
+ * Reorders `columns` to match `order` (an array of column ids in display
+ * order), then hands the result to `groupColumns` -- since that function
+ * preserves each column's position within its own group, pre-sorting the
+ * input array this way is enough to get correctly-ordered groups with no
+ * change to `groupColumns` itself.
+ *
+ * An id in `order` that no longer matches a real column is ignored (e.g. a
+ * column removed from the grid since the order was persisted); a column
+ * present in `columns` but missing from `order` (e.g. one newly added since)
+ * is appended at the end, in its original `columns` position -- the same
+ * "graceful fallback for a stale persisted list" shape `readPersistedVisibility`
+ * already uses for visibility.
+ */
+declare function applyColumnOrder<TRow>(columns: readonly ColumnDef<TRow>[], order: readonly string[]): ColumnDef<TRow>[];
+/**
+ * Moves `columnId` to sit immediately before `beforeColumnId` in `order` (or
+ * to the end when `beforeColumnId` is undefined or no longer present) --
+ * the pure reorder-array-splice logic behind `<ColumnSelector>`'s
+ * drag-and-drop, kept separate from the DOM drag wiring so it's unit-testable
+ * without simulating real drag events (jsdom has no working `DataTransfer`).
+ * Recomputing `beforeColumnId`'s index AFTER removing `columnId` (rather than
+ * the caller pre-computing an insert index) makes this correct regardless of
+ * whether the drag moved the column earlier or later in the list.
+ */
+declare function moveColumnBefore(order: readonly string[], columnId: string, beforeColumnId: string | undefined): string[];
 
 /** The row/selection context a menu item's visible/disabled/onSelect handlers are evaluated against. */
 interface MenuItemContext<TRow> {
@@ -2097,4 +2148,4 @@ interface UseTreeStateOptions<TRow> extends TreeAccessors<TRow> {
  */
 declare function useTreeState<TRow>({ data, getRowId, getChildren, hasChildren, onLoadChildren, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, }: UseTreeStateOptions<TRow>): TreeStateController<TRow>;
 
-export { ActionsMenu, type BaseColumn, type BooleanColumn, BooleanEditor, BooleanFilter, type CellAddress, type CellChange, type CellEditingCellContext, type CellEditingOptions, type CellEditingState, type CellRange, type CellSelectionController, type CellSelectionOptions, type ClientProcessingResult, type ColumnAlign, type ColumnDef, type ColumnGroup, ColumnSelector, type ColumnSelectorProps, type ColumnVisibility, type CompositeFilterDescriptor, DataGrid, type DataGridProps, type DataSource, type DateColumn, DateEditor, DateRangeFilter, type DebouncedCallback, EditFieldError, type EditWidgetProps, type EditedRow, EditingBar, type EditingBarProps, type EditingCellContext, type EditingOptions, type EditingState, type EnumColumn, EnumEditor, EnumFilter, type EnumOption, type FilterDescriptor, type FilterOperator, type FilterWidgetProps, type FlatTreeRow, type GridState, type GridStateController, type GroupExpansionController, type MenuItem, type MenuItemContext, MultilineStringEditor, type NavigationDirection, type NormalizedRange, type NumberColumn, NumberComparisonFilter, NumberEditor, NumberHistogramFilter, type NumberHistogramFilterProps, NumberRangeFilter, type PendingRowEdit, type ResolvedMenuItem, SelectionOverlay, type SortDescriptor, type StickyGroupHeaderTop, type StringColumn, StringEditor, StringFilter, type TreeAccessors, TreeDataGrid, type TreeDataGridProps, type TreeStateController, UNARY_OPERATORS, type UseTreeStateOptions, alignClassName, buildIndexMap, canHideColumn, canHideGroup, cellsInRange, coerceValueForColumn, computeFillChanges, countVisible, defaultAlign, defaultFormat, editErrorId, evaluateFilter, extendRangeForFill, facetedNumberValues, fieldKey, flattenTree, getColumnValue, groupColumns, isCellInRange, isColumnVisible, isCompositeFilterDescriptor, isEditable, isFilterDescriptor, isFilterable, isSortable, normalizeRange, parseTsv, processClientData, rangeToTsv, renderCellModeCell, renderDefaultEditWidget, renderDefaultFilterWidget, renderEditableCell, resolveMenuItems, storageKeyFor, toDate, useCellEditingState, useCellSelection, useDebouncedCallback, useEditingState, useGridState, useGroupExpansion, useStickyGroupHeaderTop, useTreeState, useVisibleColumns };
+export { ActionsMenu, type BaseColumn, type BooleanColumn, BooleanEditor, BooleanFilter, type CellAddress, type CellChange, type CellEditingCellContext, type CellEditingOptions, type CellEditingState, type CellRange, type CellSelectionController, type CellSelectionOptions, type ClientProcessingResult, type ColumnAlign, type ColumnDef, type ColumnGroup, ColumnSelector, type ColumnSelectorProps, type ColumnVisibility, type CompositeFilterDescriptor, DataGrid, type DataGridProps, type DataSource, type DateColumn, DateEditor, DateRangeFilter, type DebouncedCallback, EditFieldError, type EditWidgetProps, type EditedRow, EditingBar, type EditingBarProps, type EditingCellContext, type EditingOptions, type EditingState, type EnumColumn, EnumEditor, EnumFilter, type EnumOption, type FilterDescriptor, type FilterOperator, type FilterWidgetProps, type FlatTreeRow, type GridState, type GridStateController, type GroupExpansionController, type MenuItem, type MenuItemContext, MultilineStringEditor, type NavigationDirection, type NormalizedRange, type NumberColumn, NumberComparisonFilter, NumberEditor, NumberHistogramFilter, type NumberHistogramFilterProps, NumberRangeFilter, type PendingRowEdit, type ResolvedMenuItem, SelectionOverlay, type SortDescriptor, type StickyGroupHeaderTop, type StringColumn, StringEditor, StringFilter, type TreeAccessors, TreeDataGrid, type TreeDataGridProps, type TreeStateController, UNARY_OPERATORS, type UseTreeStateOptions, alignClassName, applyColumnOrder, buildIndexMap, canHideColumn, canHideGroup, cellsInRange, coerceValueForColumn, computeFillChanges, countVisible, defaultAlign, defaultFormat, editErrorId, evaluateFilter, extendRangeForFill, facetedNumberValues, fieldKey, flattenTree, getColumnValue, groupColumns, isCellInRange, isColumnVisible, isCompositeFilterDescriptor, isEditable, isFilterDescriptor, isFilterable, isSortable, moveColumnBefore, normalizeRange, orderStorageKeyFor, parseTsv, processClientData, rangeToTsv, renderCellModeCell, renderDefaultEditWidget, renderDefaultFilterWidget, renderEditableCell, resolveMenuItems, storageKeyFor, toDate, useCellEditingState, useCellSelection, useDebouncedCallback, useEditingState, useGridState, useGroupExpansion, useStickyGroupHeaderTop, useTreeState, useVisibleColumns };

package/dist/index.js

@@ -2556,8 +2556,8 @@ function computeFillChanges(sourceRange, finalRange, rowIds, columnIds, columns,
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { Columns3 } from "lucide-react";
-import { useEffect as useEffect7 } from "react";
+import { Columns3, GripVertical } from "lucide-react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -2613,6 +2613,31 @@ var DialogDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE
 ));
 DialogDescription.displayName = "DialogDescription";
 
+// src/column-selector/ordering.ts
+function applyColumnOrder(columns, order) {
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [];
+  for (const id of order) {
+    const column = byId.get(id);
+    if (column && !seen.has(id)) {
+      ordered.push(column);
+      seen.add(id);
+    }
+  }
+  for (const column of columns) {
+    if (!seen.has(column.id)) ordered.push(column);
+  }
+  return ordered;
+}
+function moveColumnBefore(order, columnId, beforeColumnId) {
+  const next = order.filter((id) => id !== columnId);
+  const insertAt = beforeColumnId ? next.indexOf(beforeColumnId) : -1;
+  if (insertAt === -1) next.push(columnId);
+  else next.splice(insertAt, 0, columnId);
+  return next;
+}
+
 // src/column-selector/persistence.ts
 function storageKeyFor(persistKey) {
   return `bmsui-datagrid:columns:${persistKey}`;
@@ -2633,6 +2658,22 @@ function readPersistedVisibility(persistKey) {
 function writePersistedVisibility(persistKey, visibility) {
   window.localStorage.setItem(storageKeyFor(persistKey), JSON.stringify(visibility));
 }
+function orderStorageKeyFor(persistKey) {
+  return `bmsui-datagrid:columns:${persistKey}:order`;
+}
+function readPersistedColumnOrder(persistKey) {
+  const raw = window.localStorage.getItem(orderStorageKeyFor(persistKey));
+  if (raw === null) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) && parsed.every((id) => typeof id === "string") ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function writePersistedColumnOrder(persistKey, order) {
+  window.localStorage.setItem(orderStorageKeyFor(persistKey), JSON.stringify(order));
+}
 
 // src/column-selector/visibility.ts
 function isColumnVisible(visibility, columnId) {
@@ -2679,13 +2720,20 @@ function ColumnSelector({
   persistKey,
   trigger,
   open,
-  onOpenChange
+  onOpenChange,
+  columnOrder,
+  onColumnOrderChange
 }) {
   useEffect7(() => {
     if (!persistKey) return;
     const restored = readPersistedVisibility(persistKey);
     if (restored) onVisibilityChange({ ...visibility, ...restored });
   }, [persistKey]);
+  useEffect7(() => {
+    if (!persistKey || !onColumnOrderChange) return;
+    const restored = readPersistedColumnOrder(persistKey);
+    if (restored) onColumnOrderChange(restored);
+  }, [persistKey]);
   function commit(next) {
     onVisibilityChange(next);
     if (persistKey) writePersistedVisibility(persistKey, next);
@@ -2695,7 +2743,18 @@ function ColumnSelector({
     commit({ ...visibility, [columnId]: !isColumnVisible(visibility, columnId) });
   }
   const totalVisible = countVisible(columns, visibility);
-  const groups = groupColumns(columns);
+  const canReorder = Boolean(onColumnOrderChange);
+  const effectiveOrder = columnOrder ?? columns.map((column) => column.id);
+  const orderedColumns = columnOrder ? applyColumnOrder(columns, columnOrder) : columns;
+  const groups = groupColumns(orderedColumns);
+  const [draggedId, setDraggedId] = useState11(null);
+  const [overId, setOverId] = useState11(null);
+  function handleDrop(targetId) {
+    if (!draggedId || draggedId === targetId) return;
+    const next = moveColumnBefore(effectiveOrder, draggedId, targetId);
+    onColumnOrderChange?.(next);
+    if (persistKey) writePersistedColumnOrder(persistKey, next);
+  }
   return /* @__PURE__ */ jsxs18(Dialog, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx29(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx29(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx29(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
     /* @__PURE__ */ jsxs18(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
@@ -2707,8 +2766,37 @@ function ColumnSelector({
           return /* @__PURE__ */ jsxs18(
             "label",
             {
-              className: "flex items-center gap-2 rounded-md px-1.5 py-1 text-sm hover:bg-accent/50 focus-within:bg-accent/50",
+              draggable: canReorder,
+              onDragStart: canReorder ? () => setDraggedId(column.id) : void 0,
+              onDragOver: canReorder ? (event) => {
+                event.preventDefault();
+                setOverId(column.id);
+              } : void 0,
+              onDragLeave: canReorder ? () => setOverId((current) => current === column.id ? null : current) : void 0,
+              onDrop: canReorder ? (event) => {
+                event.preventDefault();
+                handleDrop(column.id);
+                setDraggedId(null);
+                setOverId(null);
+              } : void 0,
+              onDragEnd: canReorder ? () => {
+                setDraggedId(null);
+                setOverId(null);
+              } : void 0,
+              className: cn(
+                "flex items-center gap-2 rounded-md px-1.5 py-1 text-sm hover:bg-accent/50 focus-within:bg-accent/50",
+                canReorder && "cursor-grab",
+                draggedId === column.id && "opacity-40",
+                overId === column.id && draggedId !== null && draggedId !== column.id && "outline -outline-offset-2 outline-2 outline-primary"
+              ),
               children: [
+                canReorder && /* @__PURE__ */ jsx29(
+                  GripVertical,
+                  {
+                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/50",
+                    "aria-hidden": true
+                  }
+                ),
                 /* @__PURE__ */ jsx29(
                   Checkbox,
                   {
@@ -2822,20 +2910,20 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment3, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef12, useState as useState15 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef12, useState as useState16 } from "react";
 
 // src/cell-editing/renderAlwaysEditCell.tsx
 import {
   useEffect as useEffect8,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function AlwaysEditCell(props) {
   const { column, row, rawValue, ctx, atomicGesture } = props;
   const rowId = ctx.getRowId(row);
   const resolvedValue = ctx.resolveValue(rowId, column.id, rawValue);
-  const [draft, setDraft] = useState11(void 0);
-  const [enumOpen, setEnumOpen] = useState11(false);
+  const [draft, setDraft] = useState12(void 0);
+  const [enumOpen, setEnumOpen] = useState12(false);
   const isBuiltinEnum = column.type === "enum" && !column.renderEditCell;
   const shouldOpenEnumNow = isBuiltinEnum && (atomicGesture?.shouldOpenEnum(rowId, column.id) ?? false);
   useEffect8(() => {
@@ -2936,9 +3024,9 @@ function AlwaysEditCell(props) {
 }
 
 // src/hooks/useGroupExpansion.ts
-import { useCallback as useCallback3, useState as useState12 } from "react";
+import { useCallback as useCallback3, useState as useState13 } from "react";
 function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onExpandedGroupsChange) {
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState12({});
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState13({});
   const expandedGroups = controlledExpandedGroups ?? internalExpandedGroups;
   const updateExpandedGroups = useCallback3(
     (next) => {
@@ -2961,10 +3049,10 @@ function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onEx
 }
 
 // src/hooks/useStickyGroupHeaderTop.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState14 } from "react";
 function useStickyGroupHeaderTop(enabled) {
   const theadRef = useRef10(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState13(0);
+  const [groupHeaderTop, setGroupHeaderTop] = useState14(0);
   useLayoutEffect3(() => {
     if (!enabled) return;
     const theadEl = theadRef.current;
@@ -3028,7 +3116,7 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo7, useState as useState14 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo7, useState as useState15 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
 import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef11 } from "react";
@@ -3066,7 +3154,7 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState, showPagination = true, onGridStateChange) {
-  const [state, setState] = useState14(() => {
+  const [state, setState] = useState15(() => {
     if (externalState) return externalState;
     const pageSize = initialState?.pageSize ?? (showPagination ? DEFAULT_STATE.pageSize : Number.MAX_SAFE_INTEGER);
     return { ...DEFAULT_STATE, ...initialState, pageSize };
@@ -3264,19 +3352,19 @@ function DataGrid({
     showPagination,
     onGridStateChange
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState15(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState16(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState15({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState16({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState15(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState16(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -3528,7 +3616,7 @@ function DataGrid({
   });
   const clickCellRef = useRef12(null);
   const dragMovedRef = useRef12(false);
-  const [pendingOpenEnumCell, setPendingOpenEnumCell] = useState15(void 0);
+  const [pendingOpenEnumCell, setPendingOpenEnumCell] = useState16(void 0);
   atomicGestureRef.current = {
     shouldOpenEnum: (rowId, columnId) => pendingOpenEnumCell?.rowId === rowId && pendingOpenEnumCell?.columnId === columnId,
     // Mirrors exactly what `handleCellMouseDown` below does for every other
@@ -4001,6 +4089,7 @@ function DataGrid({
                       const filterable = isFilterable(column) && column.filterDisplay !== "row";
                       const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                       const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
+                      const headerLabelId = `${header.id}-label`;
                       return /* @__PURE__ */ jsxs20(
                         "th",
                         {
@@ -4008,13 +4097,14 @@ function DataGrid({
                           style: cellProps?.style,
                           className: cellProps?.className,
                           "aria-sort": sortable ? sortDirToAriaSort(sortEntry?.dir) : void 0,
-                          "aria-label": column.header,
+                          "aria-labelledby": headerLabelId,
                           children: [
                             /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
                               sortable ? /* @__PURE__ */ jsxs20(
                                 "button",
                                 {
                                   type: "button",
+                                  id: headerLabelId,
                                   "data-testid": `sort-button-${column.id}`,
                                   className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
                                   onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
@@ -4030,7 +4120,7 @@ function DataGrid({
                                 // silently breaking any interactive content a column's own `renderHeader`
                                 // embeds directly (bare filter inputs, "select/reject all" buttons) —
                                 // clicks never reach them at all, even though nothing looks wrong visually.
-                                /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                                /* @__PURE__ */ jsx33("div", { id: headerLabelId, className: "flex items-center gap-1 px-1", children: headerContent })
                               ),
                               filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
                                 /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
@@ -4305,7 +4395,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback5, useMemo as useMemo9, useState as useState16 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo9, useState as useState17 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -4317,7 +4407,7 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState16({});
+  const [internalExpanded, setInternalExpanded] = useState17({});
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = useCallback5(
     (updater) => {
@@ -4329,7 +4419,7 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState16(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState17(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
   const setChildrenMap = useCallback5(
     (updater) => {
@@ -4341,8 +4431,8 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState16(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState16(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = useState17(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState17(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo9(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
@@ -4841,6 +4931,7 @@ export {
   TreeDataGrid,
   UNARY_OPERATORS,
   alignClassName,
+  applyColumnOrder,
   buildIndexMap,
   canHideColumn,
   canHideGroup,
@@ -4865,7 +4956,9 @@ export {
   isFilterDescriptor,
   isFilterable,
   isSortable,
+  moveColumnBefore,
   normalizeRange,
+  orderStorageKeyFor,
   parseTsv,
   processClientData,
   rangeToTsv,