@ciridae/ui 0.3.7 → 0.4.0

package/dist/components/ui/data-table-column-settings.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { RowData } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** What to call this column where its header cannot be read as text. */
+        label?: string;
+    }
+}
+/**
+ * Choose which columns appear and in what order.
+ *
+ * Every change applies immediately, like the search box and the facet filters
+ * beside it. A draft with its own Apply would be the one control in the toolbar
+ * whose state is not already the table's -- and in a table whose view lives in
+ * the URL, the draft would have nowhere to live until it was applied.
+ */
+declare function DataTableColumnSettings({ title }: {
+    title: string;
+}): React.JSX.Element | null;
+export { DataTableColumnSettings };

package/dist/components/ui/data-table-column-settings.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVerticalIcon, SlidersHorizontalIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useDataTable } from "./data-table-context";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Separator } from "./separator";
+/**
+ * Choose which columns appear and in what order.
+ *
+ * Every change applies immediately, like the search box and the facet filters
+ * beside it. A draft with its own Apply would be the one control in the toolbar
+ * whose state is not already the table's -- and in a table whose view lives in
+ * the URL, the draft would have nowhere to live until it was applied.
+ */
+function DataTableColumnSettings({ title }) {
+    const table = useDataTable();
+    // Already the order the grid draws, column order and grouping applied.
+    const columns = table.getAllLeafColumns();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    // Reordering stands on its own, so a table where nothing may be hidden still
+    // has something to offer here.
+    if (!columns.length)
+        return null;
+    const reorder = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const ids = columns.map((column) => column.id);
+        const from = ids.indexOf(String(active.id));
+        const to = ids.indexOf(String(over.id));
+        if (from === -1 || to === -1)
+            return;
+        table.setColumnOrder(arrayMove(ids, from, to));
+    };
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontalIcon, {}), _jsx("span", { children: title })] }) }), _jsxs(PopoverContent, { align: "end", className: "w-60 p-0", children: [_jsx("div", { className: "px-3 py-2 text-meta text-muted-foreground", children: title }), _jsx(Separator, {}), _jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: reorder, sensors: sensors, children: _jsx(SortableContext, { items: columns.map((column) => column.id), strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "grid gap-0.5 p-1", children: columns.map((column) => (_jsx(ColumnSettingsRow, { column: column }, column.id))) }) }) }), _jsx(Separator, {}), _jsx("div", { className: "p-1", children: _jsx(Button, { className: "w-full justify-center", onClick: () => {
+                                table.resetColumnOrder();
+                                table.resetColumnVisibility();
+                            }, size: "sm", type: "button", variant: "ghost", children: "Reset" }) })] })] }));
+}
+function ColumnSettingsRow({ column }) {
+    const label = getColumnLabel(column);
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+        id: column.id,
+    });
+    return (_jsxs("li", { className: cn("flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm", isDragging && "relative z-10 bg-accent"), ref: setNodeRef, style: { transform: CSS.Translate.toString(transform), transition }, children: [_jsx("button", { "aria-label": `Reorder ${label}`, className: "cursor-grab text-muted-foreground outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", type: "button", ...attributes, ...listeners, children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx(Checkbox, { checked: column.getIsVisible(), disabled: !column.getCanHide(), id: `column-setting-${column.id}`, onCheckedChange: (checked) => {
+                    column.toggleVisibility(checked === true);
+                } }), _jsx("label", { className: "min-w-0 flex-1 truncate", htmlFor: `column-setting-${column.id}`, children: label })] }));
+}
+/**
+ * What to call a column in a list of columns.
+ *
+ * A header rendered as a component -- a select-all checkbox, an icon -- has no
+ * text to borrow, and the column id behind it is a name for code rather than
+ * for a reader. `meta.label` is where a caller says what to call it instead.
+ */
+function getColumnLabel(column) {
+    const label = column.columnDef.meta?.label;
+    if (typeof label === "string")
+        return label;
+    const header = column.columnDef.header;
+    return typeof header === "string" ? header : column.id;
+}
+export { DataTableColumnSettings };

package/dist/components/ui/data-table-context.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Table as TanStackTable } from "@tanstack/react-table";
+declare function DataTableProvider<TData>({ children, table, }: {
+    children: React.ReactNode;
+    table: TanStackTable<TData>;
+}): React.JSX.Element;
+declare function useDataTable<TData>(): TanStackTable<TData>;
+export { DataTableProvider, useDataTable };

package/dist/components/ui/data-table-context.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+/**
+ * The table instance `TanStackDataTable` builds, published so the controls
+ * placed in its toolbar can read it.
+ *
+ * The alternative is a function-valued `toolbar` prop, which reads to lint as a
+ * component defined during render and would put that error in front of every
+ * consumer of a facet filter.
+ *
+ * Held as `unknown` because a context cannot be generic. Nothing is lost: the
+ * only value ever put in is the table `TanStackDataTable` just created, and the
+ * only readers are inside that provider, so the row type `useDataTable`
+ * restores is the one the caller's own columns were built from.
+ */
+const DataTableContext = React.createContext(null);
+function DataTableProvider({ children, table, }) {
+    // `.Provider` rather than the React 19 context-as-provider shorthand: this
+    // package's react peer is `>=18`, and every other context here does the same.
+    return _jsx(DataTableContext.Provider, { value: table, children: children });
+}
+function useDataTable() {
+    const table = React.useContext(DataTableContext);
+    if (table === null) {
+        throw new Error("This control must be rendered inside a <TanStackDataTable />.");
+    }
+    // eslint-disable-next-line no-restricted-syntax -- restores the row type erased by the context above; the provider only ever stores a TanStackTable.
+    return table;
+}
+export { DataTableProvider, useDataTable };

package/dist/components/ui/data-table-facet-filter.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+type DataTableFacetOption = {
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    value: string;
+};
+/**
+ * Narrow a column to a set of its own values.
+ *
+ * Counts come from the table's faceted row model, which `TanStackDataTable`
+ * already builds -- so an option can say how many rows it would leave without
+ * the caller counting anything itself. Pair with the `arrIncludesSome` filter
+ * function, which is what a multi-select selection means.
+ */
+declare function DataTableFacetFilter({ columnId, options, title, }: {
+    columnId: string;
+    options: DataTableFacetOption[];
+    title: string;
+}): React.JSX.Element;
+export { DataTableFacetFilter };
+export type { DataTableFacetOption };

package/dist/components/ui/data-table-facet-filter.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, PlusCircleIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useDataTable } from "./data-table-context";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Separator } from "./separator";
+/**
+ * Narrow a column to a set of its own values.
+ *
+ * Counts come from the table's faceted row model, which `TanStackDataTable`
+ * already builds -- so an option can say how many rows it would leave without
+ * the caller counting anything itself. Pair with the `arrIncludesSome` filter
+ * function, which is what a multi-select selection means.
+ */
+function DataTableFacetFilter({ columnId, options, title, }) {
+    const column = useDataTable().getColumn(columnId);
+    const counts = column?.getFacetedUniqueValues();
+    const selected = new Set(readSelection(column?.getFilterValue()));
+    const select = (value) => {
+        const next = new Set(selected);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        // An empty selection is no filter at all, not a filter matching nothing.
+        column?.setFilterValue(next.size ? [...next] : undefined);
+    };
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "outline", children: [_jsx(PlusCircleIcon, {}), title, selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "mx-0.5 data-[orientation=vertical]:h-4", orientation: "vertical" }), _jsx(FacetSelectionSummary, { labels: options.filter((option) => selected.has(option.value)) })] })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-52 p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { children: options.map((option) => (_jsx(FacetOptionItem, { count: counts?.get(option.value), onSelect: () => {
+                                            select(option.value);
+                                        }, option: option, selected: selected.has(option.value) }, option.value))) }), selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { className: "justify-center", onSelect: () => {
+                                                    column?.setFilterValue(undefined);
+                                                }, children: "Clear" }) })] })) : null] })] }) })] }));
+}
+/** Names the choices while they still fit, then counts them. */
+function FacetSelectionSummary({ labels }) {
+    if (labels.length > 2)
+        return _jsxs(Badge, { variant: "secondary", children: [labels.length, " selected"] });
+    return (_jsx(_Fragment, { children: labels.map((option) => (_jsx(Badge, { variant: "secondary", children: option.label }, option.value))) }));
+}
+function FacetOptionItem({ count, onSelect, option, selected, }) {
+    const Icon = option.icon;
+    return (_jsxs(CommandItem, { onSelect: onSelect, children: [_jsx("span", { "aria-hidden": true, className: cn("grid size-4 place-content-center rounded-[4px] border border-input", selected ? "border-primary bg-primary text-primary-foreground" : "opacity-50"), children: selected ? _jsx(CheckIcon, { className: "size-3.5" }) : null }), Icon ? _jsx(Icon, { className: "size-4 text-muted-foreground" }) : null, _jsx("span", { className: "truncate", children: option.label }), count === undefined ? null : (_jsx("span", { className: "ml-auto font-mono text-xs tabular-nums text-muted-foreground", children: count }))] }));
+}
+/** A column filter value is `unknown`; only an array of strings is a selection. */
+function readSelection(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.filter((entry) => typeof entry === "string");
+}
+export { DataTableFacetFilter };

package/dist/components/ui/data-table-pagination.d.ts

@@ -1,10 +1,11 @@
 import type { Table as TanStackTable } from "@tanstack/react-table";
-import type { ResolvedDataTableLabels } from "./data-table-tanstack";
-declare function DataTablePagination<TData>({ labels, pageSizeOptions, selectedRows, table, totalRows, }: {
+import type { DataTablePaginationVariant, ResolvedDataTableLabels } from "./data-table-tanstack";
+declare function DataTablePagination<TData>({ labels, pageSizeOptions, selectedRows, table, totalRows, variant, }: {
     labels: ResolvedDataTableLabels;
     pageSizeOptions: number[];
     selectedRows: number;
     table: TanStackTable<TData>;
     totalRows: number;
+    variant?: DataTablePaginationVariant;
 }): import("@types/react").JSX.Element;
 export { DataTablePagination };

package/dist/components/ui/data-table-pagination.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, } from "lucide-react";
 import { Button } from "./button";
 import { NativeSelect, NativeSelectOption } from "./native-select";
-function DataTablePagination({ labels, pageSizeOptions, selectedRows, table, totalRows, }) {
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "./pagination";
+function DataTablePagination({ labels, pageSizeOptions, selectedRows, table, totalRows, variant = "compact", }) {
     const pagination = table.getState().pagination;
     const pageCount = Math.max(table.getPageCount(), 1);
     const page = Math.min(pagination.pageIndex + 1, pageCount);
@@ -11,7 +12,53 @@ function DataTablePagination({ labels, pageSizeOptions, selectedRows, table, tot
                     ? (labels.rowsSelected?.(selectedRows, totalRows) ??
                         `${selectedRows} of ${totalRows} row(s) selected.`)
                     : (labels.rowsShown?.(rowsShown, totalRows) ??
-                        `${rowsShown} of ${totalRows} row(s) shown.`) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(NativeSelect, { "aria-label": "Rows per page", onChange: (event) => table.setPageSize(Number(event.target.value)), size: "sm", value: pagination.pageSize, children: pageSizeOptions.map((pageSize) => (_jsxs(NativeSelectOption, { value: pageSize, children: [pageSize, " rows"] }, pageSize))) }), _jsx("div", { className: "min-w-20 text-center tabular-nums", children: labels.page?.(page, pageCount) ?? `Page ${page} of ${pageCount}` }), _jsx(DataTablePaginationButtons, { labels: labels, table: table })] })] }));
+                        `${rowsShown} of ${totalRows} row(s) shown.`) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(NativeSelect, { "aria-label": "Rows per page", onChange: (event) => table.setPageSize(Number(event.target.value)), size: "sm", value: pagination.pageSize, children: pageSizeOptions.map((pageSize) => (_jsxs(NativeSelectOption, { value: pageSize, children: [pageSize, " rows"] }, pageSize))) }), variant === "numbered" ? (_jsx(DataTablePager, { page: page, pageCount: pageCount, table: table })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-20 text-center tabular-nums", children: labels.page?.(page, pageCount) ?? `Page ${page} of ${pageCount}` }), _jsx(DataTablePaginationButtons, { labels: labels, table: table })] }))] })] }));
+}
+/**
+ * Pages as a numbered row rather than a step counter.
+ *
+ * Worth the extra width when a reader has a page in mind -- page 7 of a member
+ * directory is one click, not six. `pageCount` is the clamped count the label
+ * uses, so an out-of-range index highlights nothing rather than inventing a
+ * page that is not there.
+ */
+function DataTablePager({ page, pageCount, table, }) {
+    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { "aria-label": "Previous page", disabled: !table.getCanPreviousPage(), onClick: () => {
+                            table.previousPage();
+                        }, size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronLeftIcon, {}) }) }), getPagerSteps(page, pageCount).map((step, index) => (_jsx(PaginationItem, { children: step === "gap" ? (_jsx(PaginationEllipsis, { className: "size-8" })) : (_jsx(Button, { "aria-current": step === page ? "page" : undefined, "aria-label": `Page ${String(step)}`, className: "tabular-nums", onClick: () => {
+                            table.setPageIndex(step - 1);
+                        }, size: "icon-sm", type: "button", variant: step === page ? "outline" : "ghost", children: step })) }, step === "gap" ? `gap-${String(index)}` : step))), _jsx(PaginationItem, { children: _jsx(Button, { "aria-label": "Next page", disabled: !table.getCanNextPage(), onClick: () => {
+                            table.nextPage();
+                        }, size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronRightIcon, {}) }) })] }) }));
+}
+/**
+ * The page numbers to draw: always the first and last, always the current and
+ * its neighbours, and a gap wherever that skips more than one page.
+ *
+ * The row is always seven slots wide or fewer, however many pages there are.
+ */
+function getPagerSteps(page, pageCount) {
+    if (pageCount <= 7)
+        return countUp(1, pageCount);
+    let from = Math.min(Math.max(page - 1, 2), pageCount - 4);
+    let to = Math.max(Math.min(page + 1, pageCount - 1), 5);
+    // A gap hiding a single page is wider than the page it hides, so widen the
+    // window over it instead. Only one side can be one short of the end at a
+    // time above seven pages, so this cannot push the row past seven slots.
+    if (from === 3)
+        from = 2;
+    if (to === pageCount - 2)
+        to = pageCount - 1;
+    return [
+        1,
+        ...(from > 2 ? ["gap"] : []),
+        ...countUp(from, to),
+        ...(to < pageCount - 1 ? ["gap"] : []),
+        pageCount,
+    ];
+}
+function countUp(from, to) {
+    return Array.from({ length: to - from + 1 }, (_, index) => from + index);
 }
 function DataTablePaginationButtons({ labels, table, }) {
     return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { "aria-label": "First page", disabled: !table.getCanPreviousPage(), onClick: () => table.firstPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.previousPage, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.nextPage, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronRightIcon, {}) }), _jsx(Button, { "aria-label": "Last page", disabled: !table.getCanNextPage(), onClick: () => table.lastPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsRightIcon, {}) })] }));

package/dist/components/ui/data-table-state.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The vocabulary a controlled `TanStackDataTable` is driven in.
+ *
+ * `TanStackDataTableProps` already exposes these types publicly -- a consumer
+ * cannot write `onSortingChange` or a `ColumnDef` without naming them. Without
+ * this module the only way to name them is to depend on `@tanstack/react-table`
+ * directly, which makes every consumer responsible for keeping a version in
+ * step with this package's. Re-exporting them keeps the table library an
+ * implementation detail on this side of the boundary.
+ */
+export type { Cell, Column, ColumnDef, ColumnFiltersState, ColumnOrderState, Header, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, Table, TableOptions, Updater, VisibilityState, } from "@tanstack/react-table";
+/**
+ * Resolve an `Updater` to the value it stands for.
+ *
+ * Every controlled handler receives either the next state or a function
+ * producing it from the current one, so a consumer that stores state elsewhere
+ * -- a URL, a store -- has to collapse that fork before it can write anywhere.
+ */
+export { functionalUpdate } from "@tanstack/react-table";

package/dist/components/ui/data-table-state.js

@@ -0,0 +1,8 @@
+/**
+ * Resolve an `Updater` to the value it stands for.
+ *
+ * Every controlled handler receives either the next state or a function
+ * producing it from the current one, so a consumer that stores state elsewhere
+ * -- a URL, a store -- has to collapse that fork before it can write anywhere.
+ */
+export { functionalUpdate } from "@tanstack/react-table";

package/dist/components/ui/data-table-tanstack.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { type ColumnDef, type ColumnFiltersState, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingState, type TableOptions, type VisibilityState } from "@tanstack/react-table";
+import { type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingState, type TableOptions, type VisibilityState } from "@tanstack/react-table";
 type DataTableState = {
     columnFilters?: ColumnFiltersState;
+    columnOrder?: ColumnOrderState;
     columnVisibility?: VisibilityState;
     globalFilter?: string;
     pagination?: PaginationState;
@@ -19,16 +20,26 @@ type DataTableLabels = {
     rowsShown?: (shown: number, total: number) => string;
 };
 type DataTableFilterMode = "global" | "column" | false;
+type DataTablePaginationVariant = "compact" | "numbered";
 type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
     actions?: React.ReactNode;
+    clampPageIndex?: boolean;
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    defaultColumnOrder?: ColumnOrderState;
     defaultColumnVisibility?: VisibilityState;
     defaultPageSize?: number;
     empty?: React.ReactNode;
     enableColumnFilters?: boolean;
     enableColumnVisibility?: boolean;
     enableGlobalFilter?: boolean;
+    /**
+     * Whether columns may be hidden at all, separately from whether the built-in
+     * columns menu is offered. They were the same switch while the menu was the
+     * only way to hide a column; a caller supplying its own control needs to turn
+     * the menu off without also making every column permanent.
+     */
+    enableHiding?: boolean;
     enablePagination?: boolean;
     enableRowSelection?: TableOptions<TData>["enableRowSelection"];
     enableSorting?: boolean;
@@ -42,6 +53,7 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     manualPagination?: boolean;
     manualSorting?: boolean;
     onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
     onGlobalFilterChange?: OnChangeFn<string>;
     onPaginationChange?: OnChangeFn<PaginationState>;
@@ -50,6 +62,7 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     onSortingChange?: OnChangeFn<SortingState>;
     pageCount?: number;
     pageSizeOptions?: number[];
+    paginationVariant?: DataTablePaginationVariant;
     rowCount?: number;
     state?: DataTableState;
     tableOptions?: Partial<TableOptions<TData>>;
@@ -58,4 +71,4 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
 type ResolvedDataTableLabels = Required<Pick<DataTableLabels, "columns" | "filterPlaceholder" | "nextPage" | "previousPage">> & DataTableLabels;
 declare function TanStackDataTable<TData, TValue = unknown>(props: TanStackDataTableProps<TData, TValue>): React.JSX.Element;
 export { TanStackDataTable };
-export type { DataTableFilterMode, DataTableLabels, ResolvedDataTableLabels, TanStackDataTableProps, };
+export type { DataTableFilterMode, DataTableLabels, DataTablePaginationVariant, DataTableState, ResolvedDataTableLabels, TanStackDataTableProps, };

package/dist/components/ui/data-table-tanstack.js

@@ -4,6 +4,7 @@ import { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFiltere
 import { cn } from "../../lib/utils";
 import { TableSkeleton } from "./loading-state";
 import { DataTableTools } from "./data-table-controls";
+import { DataTableProvider } from "./data-table-context";
 import { DataTableGrid } from "./data-table-grid";
 import { DataTablePagination } from "./data-table-pagination";
 const defaultLabels = {
@@ -15,6 +16,7 @@ const defaultLabels = {
 };
 function TanStackDataTable(props) {
     const table = useDataTableInstance(props);
+    useClampedPageIndex(table, props.clampPageIndex, props.loading);
     const labels = { ...defaultLabels, ...props.labels };
     const rows = table.getRowModel().rows;
     const pagination = table.getState().pagination;
@@ -23,12 +25,38 @@ function TanStackDataTable(props) {
         props.actions ||
         props.filterMode !== false ||
         props.enableColumnVisibility !== false);
-    return (_jsxs("div", { "data-slot": "data-table", className: cn("grid gap-(--panel-gap)", props.className), children: [hasToolbar ? _jsx(DataTableTools, { labels: labels, props: props, table: table }) : null, _jsx("div", { "data-slot": "data-table-content", className: "overflow-hidden border-t border-border", children: props.loading ? (_jsx(TableSkeleton, { className: "rounded-none border-x-0 border-b-0", columns: table.getVisibleLeafColumns().length, rows: pagination.pageSize })) : (_jsx(DataTableGrid, { empty: props.empty ?? labels.empty, getRowClassName: props.getRowClassName, onRowClick: props.onRowClick, rows: rows, table: table })) }), props.enablePagination !== false ? (_jsx(DataTablePagination, { labels: labels, pageSizeOptions: props.pageSizeOptions ?? [10, 25, 50, 100], selectedRows: table.getFilteredSelectedRowModel().rows.length, table: table, totalRows: totalRows })) : null] }));
+    return (_jsx(DataTableProvider, { table: table, children: _jsxs("div", { "data-slot": "data-table", className: cn("grid gap-(--panel-gap)", props.className), children: [hasToolbar ? _jsx(DataTableTools, { labels: labels, props: props, table: table }) : null, _jsx("div", { "data-slot": "data-table-content", className: "overflow-hidden border-t border-border", children: props.loading ? (_jsx(TableSkeleton, { className: "rounded-none border-x-0 border-b-0", columns: table.getVisibleLeafColumns().length, rows: pagination.pageSize })) : (_jsx(DataTableGrid, { empty: props.empty ?? labels.empty, getRowClassName: props.getRowClassName, onRowClick: props.onRowClick, rows: rows, table: table })) }), props.enablePagination !== false ? (_jsx(DataTablePagination, { labels: labels, pageSizeOptions: props.pageSizeOptions ?? [10, 25, 50, 100], selectedRows: table.getFilteredSelectedRowModel().rows.length, table: table, totalRows: totalRows, variant: props.paginationVariant })) : null] }) }));
+}
+/**
+ * Move a page index that points past the last page back onto a page that
+ * exists, reporting the correction through `onPaginationChange`.
+ *
+ * A caller that keeps the page in the URL can be handed any number at all --
+ * `?page=99` in a bookmark, or a page that was valid until a filter narrowed
+ * the rows under it. Without this the grid renders an empty body while the
+ * footer still counts rows the reader cannot reach, and nothing puts the
+ * address right. Correcting through the caller's own handler rather than
+ * quietly inside the table keeps the URL and the table saying one thing.
+ *
+ * Off by default, and skipped while `loading`: it reaches out through the
+ * caller's handler, which for a caller that navigates on pagination is a
+ * navigation -- not something to start doing to an existing table uninvited,
+ * or to do at all while an empty result still means "not yet".
+ */
+function useClampedPageIndex(table, enabled, loading) {
+    const { pageIndex } = table.getState().pagination;
+    const lastPageIndex = Math.max(table.getPageCount() - 1, 0);
+    const outOfRange = enabled === true && loading !== true && pageIndex > lastPageIndex;
+    React.useEffect(() => {
+        if (outOfRange)
+            table.setPageIndex(lastPageIndex);
+    }, [lastPageIndex, outOfRange, table]);
 }
 // eslint-disable-next-line complexity -- TanStack table setup is declarative option wiring.
 function useDataTableInstance(props) {
     const [sorting, setSorting] = React.useState(props.state?.sorting ?? []);
     const [columnFilters, setColumnFilters] = React.useState(props.state?.columnFilters ?? []);
+    const [columnOrder, setColumnOrder] = React.useState(props.state?.columnOrder ?? props.defaultColumnOrder ?? []);
     const [columnVisibility, setColumnVisibility] = React.useState(props.state?.columnVisibility ?? props.defaultColumnVisibility ?? {});
     const [rowSelection, setRowSelection] = React.useState(props.state?.rowSelection ?? {});
     const [globalFilter, setGlobalFilter] = React.useState(props.state?.globalFilter ?? "");
@@ -37,12 +65,20 @@ function useDataTableInstance(props) {
     return useReactTable({
         data: props.data,
         columns: props.columns,
+        // What `table.resetColumnOrder()` and `resetColumnVisibility()` restore.
+        // Seeding the hooks above is not enough: reset reads `initialState`, so
+        // without this a Reset control would clear a caller's defaults rather
+        // than return to them.
+        initialState: {
+            columnOrder: props.defaultColumnOrder ?? [],
+            columnVisibility: props.defaultColumnVisibility ?? {},
+        },
         getRowId: props.getRowId,
         pageCount: props.pageCount,
         rowCount: props.rowCount,
         enableColumnFilters: props.enableColumnFilters ?? true,
         enableGlobalFilter: props.enableGlobalFilter ?? true,
-        enableHiding: props.enableColumnVisibility ?? true,
+        enableHiding: props.enableHiding ?? props.enableColumnVisibility ?? true,
         enableRowSelection: props.enableRowSelection ?? false,
         enableSorting: props.enableSorting ?? true,
         manualFiltering: props.manualFiltering ?? false,
@@ -50,6 +86,7 @@ function useDataTableInstance(props) {
         manualSorting: props.manualSorting ?? false,
         state: {
             columnFilters: props.state?.columnFilters ?? columnFilters,
+            columnOrder: props.state?.columnOrder ?? columnOrder,
             columnVisibility: props.state?.columnVisibility ?? columnVisibility,
             globalFilter: props.state?.globalFilter ?? globalFilter,
             pagination: props.state?.pagination ?? pagination,
@@ -57,6 +94,7 @@ function useDataTableInstance(props) {
             sorting: props.state?.sorting ?? sorting,
         },
         onColumnFiltersChange: props.onColumnFiltersChange ?? setColumnFilters,
+        onColumnOrderChange: props.onColumnOrderChange ?? setColumnOrder,
         onColumnVisibilityChange: props.onColumnVisibilityChange ?? setColumnVisibility,
         onGlobalFilterChange: props.onGlobalFilterChange ?? setGlobalFilter,
         onPaginationChange: props.onPaginationChange ?? setPagination,

package/dist/entries/data-table-column-settings.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-column-settings";

package/dist/entries/data-table-column-settings.js

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-column-settings";

package/dist/entries/data-table-context.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-context";

package/dist/entries/data-table-context.js

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-context";

package/dist/entries/data-table-facet-filter.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-facet-filter";

package/dist/entries/data-table-facet-filter.js

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-facet-filter";

package/dist/entries/data-table-state.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-state";

package/dist/entries/data-table-state.js

@@ -0,0 +1 @@
+export * from "../components/ui/data-table-state";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.3.7",
+	"version": "0.4.0",
 	"type": "module",
 	"private": false,
 	"repository": {