@zuilib/data-grid 0.3.0

package/dist/types-D8c-NBWy.d.ts

@@ -0,0 +1,117 @@
+import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, RowSelectionState, ExpandedState, ColumnSizingState } from '@tanstack/react-table';
+
+/**
+ * Everything the grid can change. The consumer owns it: every interaction
+ * calls `onStateChange` with the whole next state, and the grid renders
+ * whatever comes back (a server round-trip in between is the point).
+ */
+interface DataGridState {
+    pagination: PaginationState;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+    columnVisibility: VisibilityState;
+    columnOrder: ColumnOrderState;
+    columnPinning: ColumnPinningState;
+    rowSelection: RowSelectionState;
+    /** Expanded rows, keyed by row id. UI-only: `toQuery` leaves it out. */
+    expanded: ExpandedState;
+    /**
+     * "Select all N": every row matching the current query is selected, not
+     * only the ones on this page. Set by the bulk bar; cleared by any other
+     * selection change. `toQuery` passes it on, the server acts on it.
+     */
+    allMatching?: boolean;
+    /**
+     * Column widths in px, keyed by column id. Optional: left out, the grid
+     * keeps the widths itself; passed (even `{}`), resizes go out through
+     * `onStateChange` so they can be persisted. UI-only: `toQuery` leaves it out.
+     */
+    columnSizing?: ColumnSizingState;
+}
+declare const DEFAULT_PAGE_SIZE = 25;
+declare const defaultDataGridState: DataGridState;
+/** Fills the keys a consumer left out, so the grid always sees a full state. */
+declare function resolveDataGridState(state: Partial<DataGridState> | undefined): DataGridState;
+type DataGridAlign = 'start' | 'center' | 'end';
+/** A text filter: one string, matched however the server matches it. */
+interface DataGridTextFilter {
+    type: 'text';
+    placeholder?: string;
+}
+/** A facet filter: a list of options, of which any number may be picked. */
+interface DataGridSelectFilter {
+    type: 'select';
+    options: readonly {
+        value: string;
+        label?: string;
+    }[];
+}
+/** A date range: ISO `YYYY-MM-DD` bounds, either side optional. */
+interface DataGridDateRangeFilter {
+    type: 'date-range';
+}
+type DataGridFilter = DataGridTextFilter | DataGridSelectFilter | DataGridDateRangeFilter;
+interface DataGridDateRange {
+    from?: string;
+    to?: string;
+}
+/** The ZUI extras on a TanStack column definition. */
+interface DataGridColumnExtras {
+    /** Double-click or Enter on a cell turns it into an input; see `onCellEdit`. */
+    enableInlineEdit?: boolean;
+    /** Horizontal alignment of the head and the cells; `end` for numbers. */
+    align?: DataGridAlign;
+    /** Initial width in px (TanStack `size`); the user can resize from there. */
+    width?: number;
+    /** Declares the column's filter popover. */
+    filter?: DataGridFilter;
+}
+type DataGridColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & DataGridColumnExtras;
+/** The extras may also be declared on `meta` (the TanStack way of extending a column). */
+interface DataGridColumnMeta extends DataGridColumnExtras {
+    /** The column's name in the column manager, the filter chips and the pin labels, when `header` is not a string. */
+    label?: string;
+}
+/** The grid's own strings, overridable for another language. */
+interface DataGridLabels {
+    /** @default 'Pin left' */
+    pinLeft: string;
+    /** @default 'Pin right' */
+    pinRight: string;
+    /** @default 'Unpin' */
+    unpin: string;
+    /** @default 'Expand row' */
+    expandRow: string;
+    /** @default 'Collapse row' */
+    collapseRow: string;
+    /** Bulk bar: the count of selected rows. `{count}` is replaced. @default '{count} selected' */
+    selectedCount: string;
+    /** Bulk bar: the count when every matching row is selected. `{count}` is replaced. @default 'All {count} selected' */
+    allMatchingSelected: string;
+    /** Bulk bar: the button that selects every matching row. `{count}` is replaced. @default 'Select all {count}' */
+    selectAllMatching: string;
+    /** @default 'Clear selection' */
+    clearSelection: string;
+}
+declare const defaultDataGridLabels: DataGridLabels;
+interface DataGridCellEdit {
+    rowId: string;
+    columnId: string;
+    value: string;
+}
+interface DataGridBulkActionContext {
+    /** `true` when "Select all N" is on: act on every row matching the query, not only `selectedIds`. */
+    allMatching: boolean;
+    /** The rows matching the query (`rowCount`), the size of the set when `allMatching` is on. */
+    rowCount: number;
+}
+interface DataGridBulkAction {
+    id: string;
+    label: string;
+    variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+    onAction: (selectedIds: string[], context: DataGridBulkActionContext) => void;
+}
+type DataGridDensity = 'compact' | 'comfortable';
+
+export { DEFAULT_PAGE_SIZE as D, type DataGridAlign as a, type DataGridBulkAction as b, type DataGridBulkActionContext as c, type DataGridCellEdit as d, type DataGridColumnDef as e, type DataGridColumnExtras as f, type DataGridColumnMeta as g, type DataGridDateRange as h, type DataGridDateRangeFilter as i, type DataGridDensity as j, type DataGridFilter as k, type DataGridLabels as l, type DataGridSelectFilter as m, type DataGridState as n, type DataGridTextFilter as o, defaultDataGridLabels as p, defaultDataGridState as q, resolveDataGridState as r };

package/dist/types-DJh1--C1.d.ts

@@ -0,0 +1,188 @@
+import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, RowSelectionState, ExpandedState, ColumnSizingState } from '@tanstack/react-table';
+
+/**
+ * Everything the grid can change. The consumer owns it: every interaction
+ * calls `onStateChange` with the whole next state, and the grid renders
+ * whatever comes back (a server round-trip in between is the point).
+ */
+interface DataGridState {
+    pagination: PaginationState;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+    columnVisibility: VisibilityState;
+    columnOrder: ColumnOrderState;
+    columnPinning: ColumnPinningState;
+    rowSelection: RowSelectionState;
+    /** Expanded rows, keyed by row id. UI-only: `toQuery` leaves it out. */
+    expanded: ExpandedState;
+    /**
+     * "Select all N": every row matching the current query is selected, not
+     * only the ones on this page. Set by the bulk bar; cleared by any other
+     * selection change. `toQuery` passes it on, the server acts on it.
+     */
+    allMatching?: boolean;
+    /**
+     * Column widths in px, keyed by column id. Optional: left out, the grid
+     * keeps the widths itself; passed (even `{}`), resizes go out through
+     * `onStateChange` so they can be persisted. UI-only: `toQuery` leaves it out.
+     */
+    columnSizing?: ColumnSizingState;
+}
+declare const DEFAULT_PAGE_SIZE = 25;
+declare const defaultDataGridState: DataGridState;
+/** Fills the keys a consumer left out, so the grid always sees a full state. */
+declare function resolveDataGridState(state: Partial<DataGridState> | undefined): DataGridState;
+type DataGridAlign = 'start' | 'center' | 'end';
+/** A text filter: one string, matched however the server matches it. */
+interface DataGridTextFilter {
+    type: 'text';
+    placeholder?: string;
+}
+/** A facet filter: a list of options, of which any number may be picked. */
+interface DataGridSelectFilter {
+    type: 'select';
+    options: readonly {
+        value: string;
+        label?: string;
+    }[];
+}
+/** A date range: ISO `YYYY-MM-DD` bounds, either side optional. */
+interface DataGridDateRangeFilter {
+    type: 'date-range';
+}
+type DataGridFilter = DataGridTextFilter | DataGridSelectFilter | DataGridDateRangeFilter;
+interface DataGridDateRange {
+    from?: string;
+    to?: string;
+}
+/** The ZUI extras on a TanStack column definition. */
+interface DataGridColumnExtras {
+    /** Double-click or Enter on a cell turns it into an input; see `onCellEdit`. */
+    enableInlineEdit?: boolean;
+    /** Horizontal alignment of the head and the cells; `end` for numbers. */
+    align?: DataGridAlign;
+    /** Initial width in px (TanStack `size`); the user can resize from there. */
+    width?: number;
+    /** Declares the column's filter popover. */
+    filter?: DataGridFilter;
+}
+type DataGridColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & DataGridColumnExtras;
+/** The extras may also be declared on `meta` (the TanStack way of extending a column). */
+interface DataGridColumnMeta extends DataGridColumnExtras {
+    /** The column's name in the column manager, the filter chips and the pin labels, when `header` is not a string. */
+    label?: string;
+}
+/**
+ * Every string the grid renders or announces, overridable for another
+ * language. A `{name}` placeholder is replaced with the value named.
+ */
+interface DataGridLabels {
+    /** @default 'Pin left' */
+    pinLeft: string;
+    /** @default 'Pin right' */
+    pinRight: string;
+    /** @default 'Unpin' */
+    unpin: string;
+    /** @default 'Expand row' */
+    expandRow: string;
+    /** @default 'Collapse row' */
+    collapseRow: string;
+    /** The sr-only head of the expand column. @default 'Expand' */
+    expandColumn: string;
+    /** Bulk bar: the count of selected rows. `{count}` is replaced. @default '{count} selected' */
+    selectedCount: string;
+    /** Bulk bar: the count when every matching row is selected. `{count}` is replaced. @default 'All {count} selected' */
+    allMatchingSelected: string;
+    /** Bulk bar: the button that selects every matching row. `{count}` is replaced. @default 'Select all {count}' */
+    selectAllMatching: string;
+    /** @default 'Clear selection' */
+    clearSelection: string;
+    /** The bulk bar's region name. @default 'Bulk actions' */
+    bulkActions: string;
+    /** The head checkbox. @default 'Select all rows on this page' */
+    selectAllOnPage: string;
+    /** A row checkbox. @default 'Select row' */
+    selectRow: string;
+    /** The footer's `<nav>` name. @default 'Pagination' */
+    pagination: string;
+    /** @default 'Rows per page' */
+    rowsPerPage: string;
+    /** The range text while loading. @default 'Loading…' */
+    loading: string;
+    /** The range text. `{first}`, `{last}` and `{total}` are replaced. @default '{first}–{last} of {total}' */
+    range: string;
+    /** @default 'First page' */
+    firstPage: string;
+    /** @default 'Previous page' */
+    previousPage: string;
+    /** @default 'Next page' */
+    nextPage: string;
+    /** @default 'Last page' */
+    lastPage: string;
+    /** The toolbar search field's name. @default 'Search' */
+    search: string;
+    /** The toolbar search field's placeholder. @default 'Search…' */
+    searchPlaceholder: string;
+    /** The filter chip list's name. @default 'Active filters' */
+    activeFilters: string;
+    /** A chip's remove button. `{column}` is replaced. @default 'Remove {column} filter' */
+    removeFilter: string;
+    /** The column manager button and its list. @default 'Columns' */
+    columns: string;
+    /** `{column}` is replaced. @default 'Move {column} up' */
+    moveUp: string;
+    /** `{column}` is replaced. @default 'Move {column} down' */
+    moveDown: string;
+    /** The funnel button. `{column}` is replaced. @default 'Filter {column}' */
+    filterColumn: string;
+    /** The funnel button while a filter is set. `{column}` is replaced. @default 'Filter {column} (active)' */
+    filterColumnActive: string;
+    /** The text filter input. @default 'Filter value' */
+    filterValue: string;
+    /** The text filter placeholder when the column declares none. @default 'Contains…' */
+    filterPlaceholder: string;
+    /** The facet filter's checkbox group. @default 'Options' */
+    filterOptions: string;
+    /** @default 'From' */
+    from: string;
+    /** @default 'To' */
+    to: string;
+    /** @default 'Clear' */
+    clear: string;
+    /** @default 'Apply' */
+    apply: string;
+    /** A date-range chip with only a lower bound. `{date}` is replaced. @default 'from {date}' */
+    rangeFrom: string;
+    /** A date-range chip with only an upper bound. `{date}` is replaced. @default 'until {date}' */
+    rangeUntil: string;
+    /** The resize handle. `{column}` is replaced. @default 'Resize {column}' */
+    resizeColumn: string;
+    /** The inline edit input. `{column}` is replaced. @default 'Edit {column}' */
+    editColumn: string;
+    /** The default empty state's title. @default 'No results' */
+    noResults: string;
+    /** The default empty state's description. @default 'Try a different search or clear the filters.' */
+    noResultsDescription: string;
+}
+declare const defaultDataGridLabels: DataGridLabels;
+interface DataGridCellEdit {
+    rowId: string;
+    columnId: string;
+    value: string;
+}
+interface DataGridBulkActionContext {
+    /** `true` when "Select all N" is on: act on every row matching the query, not only `selectedIds`. */
+    allMatching: boolean;
+    /** The rows matching the query (`rowCount`), the size of the set when `allMatching` is on. */
+    rowCount: number;
+}
+interface DataGridBulkAction {
+    id: string;
+    label: string;
+    variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+    onAction: (selectedIds: string[], context: DataGridBulkActionContext) => void;
+}
+type DataGridDensity = 'compact' | 'comfortable';
+
+export { DEFAULT_PAGE_SIZE as D, type DataGridAlign as a, type DataGridBulkAction as b, type DataGridBulkActionContext as c, type DataGridCellEdit as d, type DataGridColumnDef as e, type DataGridColumnExtras as f, type DataGridColumnMeta as g, type DataGridDateRange as h, type DataGridDateRangeFilter as i, type DataGridDensity as j, type DataGridFilter as k, type DataGridLabels as l, type DataGridSelectFilter as m, type DataGridState as n, type DataGridTextFilter as o, defaultDataGridLabels as p, defaultDataGridState as q, resolveDataGridState as r };

package/dist/types-j91R0mPE.d.ts

@@ -0,0 +1,75 @@
+import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, RowSelectionState, ExpandedState } from '@tanstack/react-table';
+
+/**
+ * Everything the grid can change. The consumer owns it: every interaction
+ * calls `onStateChange` with the whole next state, and the grid renders
+ * whatever comes back (a server round-trip in between is the point).
+ */
+interface DataGridState {
+    pagination: PaginationState;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+    columnVisibility: VisibilityState;
+    columnOrder: ColumnOrderState;
+    columnPinning: ColumnPinningState;
+    rowSelection: RowSelectionState;
+    /** Expanded rows, keyed by row id. UI-only: `toQuery` leaves it out. */
+    expanded: ExpandedState;
+}
+declare const DEFAULT_PAGE_SIZE = 25;
+declare const defaultDataGridState: DataGridState;
+/** Fills the keys a consumer left out, so the grid always sees a full state. */
+declare function resolveDataGridState(state: Partial<DataGridState> | undefined): DataGridState;
+type DataGridAlign = 'start' | 'center' | 'end';
+/** A text filter: one string, matched however the server matches it. */
+interface DataGridTextFilter {
+    type: 'text';
+    placeholder?: string;
+}
+/** A facet filter: a list of options, of which any number may be picked. */
+interface DataGridSelectFilter {
+    type: 'select';
+    options: readonly {
+        value: string;
+        label?: string;
+    }[];
+}
+/** A date range: ISO `YYYY-MM-DD` bounds, either side optional. */
+interface DataGridDateRangeFilter {
+    type: 'date-range';
+}
+type DataGridFilter = DataGridTextFilter | DataGridSelectFilter | DataGridDateRangeFilter;
+interface DataGridDateRange {
+    from?: string;
+    to?: string;
+}
+/** The ZUI extras on a TanStack column definition. */
+interface DataGridColumnExtras {
+    /** Double-click or Enter on a cell turns it into an input; see `onCellEdit`. */
+    enableInlineEdit?: boolean;
+    /** Horizontal alignment of the head and the cells; `end` for numbers. */
+    align?: DataGridAlign;
+    /** Initial width in px (TanStack `size`); the user can resize from there. */
+    width?: number;
+    /** Declares the column's filter popover. */
+    filter?: DataGridFilter;
+}
+type DataGridColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & DataGridColumnExtras;
+/** The extras may also be declared on `meta` (the TanStack way of extending a column). */
+interface DataGridColumnMeta extends DataGridColumnExtras {
+}
+interface DataGridCellEdit {
+    rowId: string;
+    columnId: string;
+    value: string;
+}
+interface DataGridBulkAction {
+    id: string;
+    label: string;
+    variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+    onAction: (selectedIds: string[]) => void;
+}
+type DataGridDensity = 'compact' | 'comfortable';
+
+export { type DataGridState as D, type DataGridDensity as a, type DataGridCellEdit as b, type DataGridBulkAction as c, DEFAULT_PAGE_SIZE as d, type DataGridAlign as e, type DataGridColumnDef as f, type DataGridColumnExtras as g, type DataGridColumnMeta as h, type DataGridDateRange as i, type DataGridDateRangeFilter as j, type DataGridFilter as k, type DataGridSelectFilter as l, type DataGridTextFilter as m, defaultDataGridState as n, resolveDataGridState as r };

package/dist/use-data-grid.d.ts

@@ -0,0 +1,71 @@
+import { Row, TableOptions, Table, Updater } from '@tanstack/react-table';
+import { b as DataGridColumnDef } from './columns-Def2RYjD.js';
+import { e as DataGridState } from './state-9r5WYKo_.js';
+import '@zuilib/components/button';
+
+/** Called with the whole next state on every interaction; see `onStateChange`. */
+type DataGridStateChangeHandler = (state: DataGridState) => void;
+interface UseDataGridOptions<TData> {
+    columns: DataGridColumnDef<TData, any>[];
+    /** The current page of rows, rendered as given. */
+    rows: TData[];
+    /** Total rows on the server (all pages). Drives the page count and the range text. Ignored with `manualPagination={false}`: the rows that pass the filters are counted instead. */
+    rowCount?: number;
+    /**
+     * The controlled state. Left out, the hook keeps the state itself
+     * (starting from `defaultState`) and still reports it through `onStateChange`.
+     */
+    state?: Partial<DataGridState>;
+    /** The initial state when `state` is left out. Read once. */
+    defaultState?: Partial<DataGridState>;
+    /**
+     * Called with the whole next state on every interaction: the current
+     * `state` prop plus that one change. An emission the consumer does not
+     * apply is not carried into the next one, so ignoring it rejects it.
+     */
+    onStateChange?: DataGridStateChangeHandler;
+    /**
+     * Column ids the grid owns (the selection and expand columns): always
+     * first in `columnOrder`, always first among the start-pinned columns.
+     */
+    fixedColumnIds?: readonly string[];
+    /** @default true */
+    manualPagination?: boolean;
+    /** @default true */
+    manualSorting?: boolean;
+    /** @default true */
+    manualFiltering?: boolean;
+    getRowId?: (row: TData, index: number, parent?: Row<TData>) => string;
+    /** @default true */
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    /** @default true */
+    enableColumnResizing?: boolean;
+    /** Which rows may expand; every row when `renderExpanded` is set and this is left out. */
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    /** Anything else TanStack accepts (`defaultColumn`, `meta`, `debugTable`, ...). */
+    tableOptions?: Partial<Omit<TableOptions<TData>, 'data' | 'columns' | 'state' | 'getCoreRowModel'>>;
+}
+interface UseDataGridResult<TData> {
+    table: Table<TData>;
+    /** The state the grid renders (the consumer's, with the defaults filled in). */
+    state: DataGridState;
+    /** Replaces one key and emits the whole next state. */
+    setState: <K extends keyof DataGridState>(key: K, updater: Updater<DataGridState[K]>) => void;
+    /** Emits a whole next state (a reset, a restore from the URL). */
+    replaceState: (next: Partial<DataGridState>) => void;
+}
+/**
+ * The fixed columns first in `columnOrder` and first among the start-pinned
+ * columns, whatever order the consumer handed in. Returns the same object
+ * when nothing needs to move, so a normalised state stays referentially equal.
+ */
+declare function normalizeColumnState(state: DataGridState, fixedColumnIds: readonly string[]): DataGridState;
+/**
+ * A TanStack table wired for a server-driven grid: every piece of state is
+ * controlled, every change goes out through `onStateChange` as one object.
+ * `DataGrid` calls this for you; call it yourself to render the parts
+ * (`DataGrid.Body`, `DataGrid.Pagination`, ...) in your own layout.
+ */
+declare function useDataGrid<TData>(options: UseDataGridOptions<TData>): UseDataGridResult<TData>;
+
+export { type DataGridStateChangeHandler, type UseDataGridOptions, type UseDataGridResult, useDataGrid as default, normalizeColumnState, useDataGrid };

package/dist/use-data-grid.js

@@ -0,0 +1,206 @@
+"use client";
+
+// src/use-data-grid.ts
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+
+// src/state.ts
+var DEFAULT_PAGE_SIZE = 25;
+var defaultDataGridState = {
+  pagination: { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE },
+  sorting: [],
+  columnFilters: [],
+  search: "",
+  columnVisibility: {},
+  columnOrder: [],
+  columnPinning: { start: [], end: [] },
+  rowSelection: {},
+  expanded: {},
+  allMatching: false
+};
+function resolveDataGridState(state) {
+  return { ...defaultDataGridState, ...state };
+}
+
+// src/use-data-grid.ts
+function resolve(updater, previous) {
+  return typeof updater === "function" ? updater(previous) : updater;
+}
+var NO_FIXED_COLUMNS = [];
+var sameList = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function toTanstackPinning(pinning) {
+  return { left: pinning.start, right: pinning.end };
+}
+function fromTanstackPinning(pinning) {
+  return { start: pinning.left ?? [], end: pinning.right ?? [] };
+}
+function normalizeColumnState(state, fixedColumnIds) {
+  if (fixedColumnIds.length === 0) return state;
+  const fixed = (ids) => fixedColumnIds.filter((id) => ids.includes(id));
+  const rest = (ids) => ids.filter((id) => !fixedColumnIds.includes(id));
+  const order = state.columnOrder.length === 0 ? state.columnOrder : [...fixed(state.columnOrder), ...rest(state.columnOrder)];
+  const start = [...fixedColumnIds, ...rest(state.columnPinning.start ?? [])];
+  const end = rest(state.columnPinning.end ?? []);
+  const pinningChanged = !sameList(start, state.columnPinning.start ?? []) || !sameList(end, state.columnPinning.end ?? []);
+  const orderChanged = !sameList(order, state.columnOrder);
+  if (!pinningChanged && !orderChanged) return state;
+  return {
+    ...state,
+    columnOrder: orderChanged ? order : state.columnOrder,
+    columnPinning: pinningChanged ? { start, end } : state.columnPinning
+  };
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var inDateRange = (row, columnId, value) => {
+  const raw = row.getValue(columnId);
+  if (!value || !value.from && !value.to) return true;
+  if (raw === void 0 || raw === null || raw === "") return false;
+  const day = (raw instanceof Date ? raw.toISOString() : String(raw)).slice(0, 10);
+  if (value.from && day < value.from.slice(0, 10)) return false;
+  if (value.to && day > value.to.slice(0, 10)) return false;
+  return true;
+};
+inDateRange.autoRemove = (value) => !value || !value.from && !value.to;
+var filterFnByControl = { text: "includesString", select: "arrIncludesSome", "date-range": inDateRange };
+function toTanstackColumns(columns) {
+  return columns.map((column) => {
+    const filter = column.filter ?? column.meta?.filter;
+    const next = { ...column };
+    if (column.width !== void 0 && column.size === void 0) next.size = column.width;
+    if (filter && column.filterFn === void 0) next.filterFn = filterFnByControl[filter.control];
+    return next;
+  });
+}
+function useDataGrid(options) {
+  const {
+    columns,
+    rows,
+    rowCount,
+    state: partialState,
+    defaultState,
+    onStateChange,
+    fixedColumnIds,
+    manualPagination = true,
+    manualSorting = true,
+    manualFiltering = true,
+    getRowId,
+    enableRowSelection = true,
+    enableColumnResizing = true,
+    getRowCanExpand,
+    tableOptions
+  } = options;
+  const controlled = partialState !== void 0;
+  const [internalState, setInternalState] = useState(() => resolveDataGridState(defaultState));
+  const fixedIds = fixedColumnIds ?? NO_FIXED_COLUMNS;
+  const state = useMemo(
+    () => normalizeColumnState(controlled ? resolveDataGridState(partialState) : internalState, fixedIds),
+    [controlled, partialState, internalState, fixedIds]
+  );
+  const latest = useRef({ state, onStateChange, pending: null });
+  useIsomorphicLayoutEffect(() => {
+    latest.current.state = state;
+    latest.current.onStateChange = onStateChange;
+    latest.current.pending = null;
+  });
+  const emit = useCallback((next) => {
+    if (!controlled) {
+      latest.current.pending = next;
+      setInternalState(next);
+    }
+    latest.current.onStateChange?.(next);
+  }, [controlled]);
+  const current = () => latest.current.pending ?? latest.current.state;
+  const [internalSizing, setInternalSizing] = useState({});
+  const tableState = useMemo(
+    () => ({
+      ...state,
+      globalFilter: state.search,
+      columnPinning: toTanstackPinning(state.columnPinning),
+      columnSizing: state.columnSizing ?? internalSizing
+    }),
+    [state, internalSizing]
+  );
+  const setState = useCallback((key, updater) => {
+    const previous = current();
+    const value = resolve(updater, previous[key]);
+    if (Object.is(value, previous[key])) return;
+    emit({ ...previous, [key]: value });
+  }, [emit]);
+  const replaceState = useCallback((next) => {
+    emit({ ...current(), ...next });
+  }, [emit]);
+  const tanstackColumns = useMemo(() => toTanstackColumns(columns), [columns]);
+  const table = useReactTable({
+    ...tableOptions,
+    data: rows,
+    columns: tanstackColumns,
+    state: tableState,
+    /* Client-side paging counts the rows that pass the filters; a server total would be wrong. */
+    rowCount: manualPagination ? rowCount : void 0,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    enableRowSelection,
+    enableColumnResizing,
+    columnResizeMode: "onChange",
+    getRowId,
+    getRowCanExpand,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: manualSorting ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: manualFiltering ? void 0 : getFilteredRowModel(),
+    getPaginationRowModel: manualPagination ? void 0 : getPaginationRowModel(),
+    onPaginationChange: (updater) => setState("pagination", updater),
+    /* A new sort or filter starts from the first page: the old page index has
+       no meaning against a different ordering. */
+    onSortingChange: (updater) => {
+      const previous = current();
+      const sorting = resolve(updater, previous.sorting);
+      emit({ ...previous, sorting, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onColumnFiltersChange: (updater) => {
+      const previous = current();
+      const columnFilters = resolve(updater, previous.columnFilters);
+      emit({ ...previous, columnFilters, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onGlobalFilterChange: (updater) => {
+      const previous = current();
+      const search = resolve(updater, previous.search) ?? "";
+      if (search === previous.search) return;
+      emit({ ...previous, search, pagination: { ...previous.pagination, pageIndex: 0 }, allMatching: false });
+    },
+    onColumnVisibilityChange: (updater) => setState("columnVisibility", updater),
+    onColumnOrderChange: (updater) => setState("columnOrder", updater),
+    onColumnPinningChange: (updater) => {
+      const previous = current();
+      const pinning = resolve(updater, toTanstackPinning(previous.columnPinning));
+      setState("columnPinning", fromTanstackPinning(pinning));
+    },
+    /* "Select all N" describes the query's whole result set; any change to
+       the explicit selection (or to the query, above) is narrower than that. */
+    onRowSelectionChange: (updater) => {
+      const previous = current();
+      const rowSelection = resolve(updater, previous.rowSelection);
+      if (Object.is(rowSelection, previous.rowSelection)) return;
+      emit({ ...previous, rowSelection, allMatching: false });
+    },
+    onExpandedChange: (updater) => setState("expanded", updater),
+    onColumnSizingChange: (updater) => {
+      const previous = current();
+      if (previous.columnSizing === void 0) return setInternalSizing(updater);
+      const columnSizing = resolve(updater, previous.columnSizing);
+      if (columnSizing !== previous.columnSizing) emit({ ...previous, columnSizing });
+    }
+  });
+  return { table, state, setState, replaceState };
+}
+export {
+  useDataGrid as default,
+  normalizeColumnState,
+  useDataGrid
+};