@ciridae/ui 0.3.7 → 0.5.0

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * A draft the reader commits rather than a live edit. Rearranging a table is
+ * several changes that only mean something together, and applying each one as
+ * it is made redraws the table under the hand still working on it. Cancel has
+ * to be able to mean "none of that", so nothing here touches the table until
+ * Apply.
+ */
+declare function DataTableColumnSettings({ description, title, triggerLabel, }: {
+    description?: string;
+    title?: string;
+    triggerLabel?: string;
+}): React.JSX.Element | null;
+export { DataTableColumnSettings };

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

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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 { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./sheet";
+/**
+ * Choose which columns appear and in what order.
+ *
+ * A draft the reader commits rather than a live edit. Rearranging a table is
+ * several changes that only mean something together, and applying each one as
+ * it is made redraws the table under the hand still working on it. Cancel has
+ * to be able to mean "none of that", so nothing here touches the table until
+ * Apply.
+ */
+function DataTableColumnSettings({ description = "Choose which columns appear and drag them into the order you prefer.", title = "Column settings", triggerLabel = "Settings", }) {
+    const table = useDataTable();
+    const [open, setOpen] = React.useState(false);
+    // `null` means "whatever the table is showing"; anything else is an edit in
+    // progress. Cleared on every open and close, so a cancelled edit cannot come
+    // back the next time the sheet is opened.
+    const [draft, setDraft] = React.useState(null);
+    const columns = table.getAllLeafColumns();
+    // Reordering stands on its own, so a table where nothing may be hidden still
+    // has something to offer here.
+    if (columns.length === 0)
+        return null;
+    const current = draft ?? readColumns(table);
+    return (_jsxs(Sheet, { onOpenChange: (next) => {
+            setDraft(null);
+            setOpen(next);
+        }, open: open, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [_jsx(SlidersHorizontalIcon, {}), _jsx("span", { children: triggerLabel })] }) }), _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: title }), _jsx(SheetDescription, { children: description })] }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(ColumnDraftList, { columns: columns, draft: current, onDraftChange: setDraft }) }), _jsxs(SheetFooter, { children: [_jsx(Button, { className: "mr-auto", onClick: () => {
+                                    setDraft(readDefaultColumns(table));
+                                }, type: "button", variant: "ghost", children: "Reset" }), _jsx(Button, { onClick: () => {
+                                    setOpen(false);
+                                }, type: "button", variant: "outline", children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                    applyColumns(table, current);
+                                    setOpen(false);
+                                }, type: "button", children: "Apply" })] })] })] }));
+}
+function ColumnDraftList({ columns, draft, onDraftChange, }) {
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const order = draft.order;
+    const byId = new Map(columns.map((column) => [column.id, column]));
+    const reorder = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const from = order.indexOf(String(active.id));
+        const to = order.indexOf(String(over.id));
+        if (from === -1 || to === -1)
+            return;
+        onDraftChange({ ...draft, order: arrayMove(order, from, to) });
+    };
+    return (_jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: reorder, sensors: sensors, children: _jsx(SortableContext, { items: order, strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "grid gap-0.5", children: order.map((id) => {
+                    const column = byId.get(id);
+                    if (column === undefined)
+                        return null;
+                    return (_jsx(ColumnSettingsRow, { column: column, hidden: draft.hidden.includes(id), onToggle: (visible) => {
+                            onDraftChange({
+                                hidden: visible
+                                    ? draft.hidden.filter((entry) => entry !== id)
+                                    : [...draft.hidden, id],
+                                order,
+                            });
+                        } }, id));
+                }) }) }) }));
+}
+function ColumnSettingsRow({ column, hidden, onToggle, }) {
+    const label = getColumnLabel(column);
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+        id: column.id,
+    });
+    return (_jsxs("li", { className: cn("flex items-center gap-3 rounded-sm px-1 py-2 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: !hidden, disabled: !column.getCanHide(), id: `column-setting-${column.id}`, onCheckedChange: (checked) => {
+                    onToggle(checked === true);
+                } }), _jsx("label", { className: "min-w-0 flex-1 truncate", htmlFor: `column-setting-${column.id}`, children: label })] }));
+}
+/**
+ * What the table is showing now, in the shape the draft edits.
+ *
+ * Both fields are spelled out rather than left empty to mean "unchanged": the
+ * list has to draw an order either way, and an empty one would have to be
+ * filled in from somewhere -- from the current order, which would make Reset
+ * write back the very arrangement it was asked to undo.
+ */
+function readColumns(table) {
+    const columns = table.getAllLeafColumns();
+    return {
+        hidden: columns.filter((column) => !column.getIsVisible()).map((column) => column.id),
+        order: columns.map((column) => column.id),
+    };
+}
+/**
+ * What Reset goes back to: the caller's own defaults, which `TanStackDataTable`
+ * keeps in `initialState` for exactly this.
+ *
+ * Not "every column, as declared" -- a table given a `defaultColumnVisibility`
+ * starts with something hidden on purpose, and a Reset that revealed it would
+ * be showing a view the caller never offered.
+ *
+ * A `columnOrder` is a partial list in TanStack: it names the columns it cares
+ * about and everything else keeps its declared position after them. The draft
+ * cannot be partial, because the list draws exactly what the draft names -- so
+ * a default naming two of five columns would make the other three vanish from
+ * the sheet, unreorderable and unhideable, and Apply would then write that
+ * two-column order back. Reconciling against the live leaf ids keeps the
+ * caller's prefix and restores the rest behind it.
+ */
+function readDefaultColumns(table) {
+    const { columnOrder, columnVisibility } = table.initialState;
+    // Declared order, not drawn order: `getAllLeafColumns` has already had the
+    // current order applied to it, so resetting through it would return the
+    // arrangement Reset was asked to undo.
+    const declared = table
+        .getAllFlatColumns()
+        .filter((column) => column.columns.length === 0)
+        .map((column) => column.id);
+    const named = (columnOrder ?? []).filter((id) => declared.includes(id));
+    return {
+        hidden: Object.entries(columnVisibility ?? {})
+            .filter(([, visible]) => !visible)
+            .map(([id]) => id),
+        order: [...named, ...declared.filter((id) => !named.includes(id))],
+    };
+}
+/**
+ * Commit a draft to the table.
+ *
+ * Back to the defaults goes through the table's own reset rather than through
+ * an equivalent-looking explicit order. Writing the full list would leave a
+ * caller mirroring this into a URL with an order parameter saying "arranged"
+ * for a view that is not, and would pin today's columns so a later release
+ * appended its new one at the end rather than where it was declared.
+ */
+function applyColumns(table, draft) {
+    if (isDefaultColumns(draft, readDefaultColumns(table))) {
+        table.resetColumnOrder();
+        table.resetColumnVisibility();
+        return;
+    }
+    table.setColumnOrder(draft.order);
+    table.setColumnVisibility(Object.fromEntries(draft.hidden.map((id) => [id, false])));
+}
+/** Whether a draft is the default arrangement, in whatever order it names it. */
+function isDefaultColumns(draft, defaults) {
+    return (draft.order.length === defaults.order.length &&
+        draft.order.every((id, index) => defaults.order[index] === id) &&
+        draft.hidden.length === defaults.hidden.length &&
+        defaults.hidden.every((id) => draft.hidden.includes(id)));
+}
+/**
+ * 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,54 @@
+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, }) {
+    // A fresh object every render, deliberately, and the one thing here that must
+    // not be memoised.
+    //
+    // A control like `DataTableFacetFilter` takes only static props -- a column
+    // id, a title, a list of options -- and reads everything that changes from
+    // this context. In an app compiled with React Compiler that makes its element
+    // cacheable: no reactive props, so the element is built once and React skips
+    // re-rendering it. Publishing the table object itself would close the other
+    // door too, because its identity never changes however much its state does,
+    // so context propagation would never fire either and the control would render
+    // once and then show the table as it was at mount forever.
+    //
+    // Wrapping restores propagation: the provider re-renders whenever the table's
+    // state changes, the value is new each time, and React re-renders every
+    // consumer regardless of what the compiler did to their elements.
+    //
+    // `state` is carried so a reader can see what the value is meant to track,
+    // and because TanStack rebuilds its state object each render where the table
+    // object is the same one forever.
+    //
+    // It is NOT a guard against this package one day being built with React
+    // Compiler. The compiler takes its dependencies from the sources of an
+    // expression, and the only source of `table.getState()` is `table` -- so it
+    // would cache the call on `[table]`, cache this literal on the result, and
+    // freeze the whole thing exactly as before. If that day comes, this
+    // component needs a real bailout, not another field.
+    return (_jsx(DataTableContext.Provider, { value: { state: table.getState(), table }, children: children }));
+}
+function useDataTable() {
+    const context = React.useContext(DataTableContext);
+    if (context === 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 context.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-grid.js

@@ -1,20 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { flexRender, } from "@tanstack/react-table";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
 function DataTableGrid({ empty, getRowClassName, onRowClick, rows, table, }) {
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((group) => (_jsx(TableRow, { children: group.headers.map((header) => (_jsx(TableHead, { style: { width: header.getSize() }, children: header.isPlaceholder ? null : _jsx(DataTableHeaderCell, { header: header }) }, header.id))) }, group.id))) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => (_jsx(DataTableDataRow, { getRowClassName: getRowClassName, onRowClick: onRowClick, row: row }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { className: "h-32 text-center text-sm text-muted-foreground", colSpan: table.getVisibleLeafColumns().length, children: empty }) })) })] }));
+    // One scroller, owned by `data-table-content` outside this: nesting an
+    // `overflow-x-auto` inside it would give the sticky header a scrollport that
+    // only ever scrolls sideways, so the header would ride away with the rows.
+    return (_jsxs(Table, { scrollable: false, children: [_jsx(TableHeader, { className: "sticky top-0 z-10 bg-background", children: table.getHeaderGroups().map((group) => (_jsx(TableRow, { children: group.headers.map((header) => (_jsx(TableHead, { style: { width: header.getSize() }, children: header.isPlaceholder ? null : _jsx(DataTableHeaderCell, { header: header }) }, header.id))) }, group.id))) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => (_jsx(DataTableDataRow, { getRowClassName: getRowClassName, onRowClick: onRowClick, row: row }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { className: "h-32 text-center text-sm text-muted-foreground", colSpan: table.getVisibleLeafColumns().length, children: empty }) })) })] }));
 }
 function DataTableDataRow({ getRowClassName, onRowClick, row, }) {
     return (_jsx(TableRow, { className: cn(onRowClick && "cursor-pointer", getRowClassName?.(row)), "data-state": row.getIsSelected() ? "selected" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }));
 }
 function DataTableHeaderCell({ header }) {
     const sorted = header.column.getIsSorted();
-    const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
+    // Paired chevrons while unsorted, a single arrow once sorted: the pair reads
+    // as "this can go either way", the arrow as "it went this way".
+    const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ChevronsUpDownIcon;
     if (!header.column.getCanSort())
         return flexRender(header.column.columnDef.header, header.getContext());
-    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "text-meta -ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
+    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), 
+        // `TableHead`'s size and weight, restated rather than inherited --
+        // Tailwind has no font-size or font-weight `inherit` utility -- so a
+        // sortable column and a plain one read the same.
+        className: "-ml-2 h-auto px-2 py-0 text-sm font-normal text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
 }
 export { DataTableGrid };

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

@@ -1,10 +1,17 @@
 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>({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant, }: {
+    /**
+     * Controls that belong beside the row count rather than above the table --
+     * column settings, an export. Whatever governs the whole result set reads
+     * better next to the number saying how big it is.
+     */
+    footerControls?: React.ReactNode;
     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,19 +1,89 @@
-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({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant = "compact", }) {
     const pagination = table.getState().pagination;
-    const pageCount = Math.max(table.getPageCount(), 1);
+    // `-1` is TanStack's "unknown", which a server-driven table reports until it
+    // is told a total. Clamping is right for the labels -- a reader is on page 1
+    // of at least 1 -- but a control that jumps to the end needs the difference.
+    const totalPages = table.getPageCount();
+    const pageCount = Math.max(totalPages, 1);
     const page = Math.min(pagination.pageIndex + 1, pageCount);
     const rowsShown = table.getRowModel().rows.length;
-    return (_jsxs("div", { "data-slot": "data-table-pagination", className: "flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "min-w-0", children: selectedRows > 0
-                    ? (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 })] })] }));
+    return (_jsxs("div", { "data-slot": "data-table-pagination", className: "flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 truncate", children: selectedRows > 0
+                            ? (labels.rowsSelected?.(selectedRows, totalRows) ??
+                                `${selectedRows} of ${totalRows} row(s) selected.`)
+                            : (labels.rowsShown?.(rowsShown, totalRows) ??
+                                `${rowsShown} of ${totalRows} row(s) shown.`) }), footerControls] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("span", { className: "shrink-0", children: labels.rowsPerPage }), _jsx(NativeSelect, { "aria-label": labels.rowsPerPageName, className: "min-w-20 shrink-0", onChange: (event) => table.setPageSize(Number(event.target.value)), size: "sm", value: pagination.pageSize, children: pageSizeOptions.map((pageSize) => (_jsx(NativeSelectOption, { value: pageSize, children: pageSize }, pageSize))) }), variant === "numbered" ? (_jsx(DataTablePager, { labels: labels, page: page, pageCount: pageCount, pageCountKnown: totalPages >= 0, 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, pageCountKnown: totalPages >= 0, table: table })] }))] })] }));
 }
-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, {}) })] }));
+/**
+ * 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({ labels, page, pageCount, pageCountKnown, table, }) {
+    const back = !table.getCanPreviousPage();
+    const forward = !table.getCanNextPage();
+    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PagerStepButton, { disabled: back, icon: ChevronsLeftIcon, label: labels.firstPage, onClick: () => {
+                        table.firstPage();
+                    } }), _jsx(PagerStepButton, { disabled: back, icon: ChevronLeftIcon, label: labels.previousPage, onClick: () => {
+                        table.previousPage();
+                    } }), _jsx(PagerNumbers, { page: page, pageCount: pageCount, table: table }), _jsx(PagerStepButton, { disabled: forward, icon: ChevronRightIcon, label: labels.nextPage, onClick: () => {
+                        table.nextPage();
+                    } }), pageCountKnown ? (_jsx(PagerStepButton, { disabled: forward, icon: ChevronsRightIcon, label: labels.lastPage, onClick: () => {
+                        table.lastPage();
+                    } })) : null] }) }));
+}
+/** The numbers themselves, with an ellipsis wherever the row elides a run. */
+function PagerNumbers({ page, pageCount, table, }) {
+    return (_jsx(_Fragment, { children: 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))) }));
+}
+/**
+ * One of the four steps either side of the numbers, which differ only in these.
+ *
+ * Ghost rather than outlined: a row of six bordered boxes reads as six equal
+ * things, and the only one worth pointing at is the page you are on.
+ */
+function PagerStepButton({ disabled, icon: Icon, label, onClick, }) {
+    return (_jsx(PaginationItem, { children: _jsx(Button, { "aria-label": label, disabled: disabled, onClick: onClick, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(Icon, {}) }) }));
+}
+/**
+ * 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, pageCountKnown, table, }) {
+    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { "aria-label": labels.firstPage, 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, {}) }), pageCountKnown ? (_jsx(Button, { "aria-label": labels.lastPage, disabled: !table.getCanNextPage(), onClick: () => table.lastPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsRightIcon, {}) })) : null] }));
 }
 export { DataTablePagination };

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;
@@ -12,28 +13,57 @@ type DataTableLabels = {
     columns?: string;
     empty?: React.ReactNode;
     filterPlaceholder?: string;
+    firstPage?: string;
+    lastPage?: string;
     nextPage?: string;
     page?: (page: number, pageCount: number) => string;
     previousPage?: string;
+    /** Sits before the page-size control, which reads "Show 25" rather than "25 rows". */
+    rowsPerPage?: string;
+    /**
+     * The page-size control's accessible name. Separate from `rowsPerPage`
+     * because that one is terse by design: "Show" beside a number says enough
+     * with the footer in view and nothing at all read out on its own.
+     */
+    rowsPerPageName?: string;
     rowsSelected?: (selected: number, total: number) => string;
     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;
     filterMode?: DataTableFilterMode;
     filterPlaceholder?: string;
+    /**
+     * Controls for the footer, beside the row count. Whatever governs the whole
+     * result set -- column settings, an export -- reads better next to the number
+     * saying how big it is than stacked above the table with the filters.
+     *
+     * The footer is the pagination row, so `enablePagination={false}` removes
+     * these along with it; put them in `actions` for a table that does not page.
+     */
+    footerControls?: React.ReactNode;
     getRowClassName?: (row: Row<TData>) => string | undefined;
     getRowId?: TableOptions<TData>["getRowId"];
     labels?: DataTableLabels;
@@ -42,20 +72,28 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     manualPagination?: boolean;
     manualSorting?: boolean;
     onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
     onGlobalFilterChange?: OnChangeFn<string>;
+    /**
+     * Called instead of `onPaginationChange` when `clampPageIndex` moves a page
+     * index that pointed past the end, so a caller storing the page can replace
+     * the address that was wrong rather than pushing the correction on top of it.
+     */
+    onPageIndexCorrected?: (pageIndex: number) => void;
     onPaginationChange?: OnChangeFn<PaginationState>;
     onRowClick?: (row: Row<TData>) => void;
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
     onSortingChange?: OnChangeFn<SortingState>;
     pageCount?: number;
     pageSizeOptions?: number[];
+    paginationVariant?: DataTablePaginationVariant;
     rowCount?: number;
     state?: DataTableState;
     tableOptions?: Partial<TableOptions<TData>>;
     toolbar?: React.ReactNode;
 };
-type ResolvedDataTableLabels = Required<Pick<DataTableLabels, "columns" | "filterPlaceholder" | "nextPage" | "previousPage">> & DataTableLabels;
+type ResolvedDataTableLabels = Required<Pick<DataTableLabels, "columns" | "filterPlaceholder" | "firstPage" | "lastPage" | "nextPage" | "previousPage" | "rowsPerPage" | "rowsPerPageName">> & 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,17 +4,23 @@ 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 = {
     columns: "Columns",
     empty: "No results.",
     filterPlaceholder: "Filter rows...",
+    firstPage: "First page",
+    lastPage: "Last page",
     nextPage: "Next page",
     previousPage: "Previous page",
+    rowsPerPage: "Show",
+    rowsPerPageName: "Rows per page",
 };
 function TanStackDataTable(props) {
     const table = useDataTableInstance(props);
+    useClampedPageIndex(table, props.clampPageIndex, props.loading, props.onPageIndexCorrected);
     const labels = { ...defaultLabels, ...props.labels };
     const rows = table.getRowModel().rows;
     const pagination = table.getState().pagination;
@@ -23,12 +29,52 @@ 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("flex flex-col gap-(--panel-gap)", props.className), children: [hasToolbar ? _jsx(DataTableTools, { labels: labels, props: props, table: table }) : null, _jsx("div", { "data-slot": "data-table-content", className: "min-h-0 flex-1 overflow-auto 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, { footerControls: props.footerControls, 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".
+ *
+ * `onPageIndexCorrected` exists so that handler can tell a correction from a
+ * page turn. A caller writing the page into the URL wants a turn to be a place
+ * to come back to and a correction to replace the address that was wrong --
+ * and without this they arrive as the same call.
+ */
+function useClampedPageIndex(table, enabled, loading, onCorrected) {
+    const { pageIndex } = table.getState().pagination;
+    const lastPageIndex = Math.max(table.getPageCount() - 1, 0);
+    const outOfRange = enabled === true && loading !== true && pageIndex > lastPageIndex;
+    const correctedRef = React.useRef(onCorrected);
+    React.useEffect(() => {
+        correctedRef.current = onCorrected;
+    }, [onCorrected]);
+    React.useEffect(() => {
+        if (!outOfRange)
+            return;
+        const corrected = correctedRef.current;
+        if (corrected)
+            corrected(lastPageIndex);
+        else
+            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 +83,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 +104,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 +112,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/components/ui/data-table.js

@@ -22,6 +22,10 @@ function DataTableSkeleton({ className, ...props }) {
 }
 function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
     const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
-    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("text-meta h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
+    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn(
+            // `TableHead`'s size and weight, restated rather than inherited --
+            // Tailwind has no font-size or font-weight `inherit` utility -- so the
+            // two data tables in this package draw their header rows the same way.
+            "h-auto px-0 py-0 text-sm font-normal text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
 }
 export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, TanStackDataTable, SortableTableHead, };

package/dist/components/ui/sidebar/layout.js

@@ -53,7 +53,12 @@ function SidebarGap({ variant }) {
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }));
 }
 function SidebarInset({ className, ...props }) {
-    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn(
+        // `min-w-0` because this is a flex item beside the sidebar, and a flex
+        // item will not shrink below its content: without it a page holding
+        // anything wide -- a table with sized columns -- pushes the whole app
+        // sideways instead of scrolling inside its own box.
+        "relative flex w-full min-w-0 flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));

package/dist/components/ui/table.d.ts

@@ -1,5 +1,16 @@
 import * as React from "react";
-declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function Table({ className, scrollable, ...props }: React.ComponentProps<"table"> & {
+    /**
+     * Whether the wrapper scrolls a too-wide table sideways. A caller that
+     * already scrolls the table from outside passes `false`: an `overflow` of
+     * anything but `visible` makes this wrapper a scrollport on *both* axes, so
+     * leaving it on would anchor a sticky header here rather than to the box
+     * that actually scrolls. Two overflow utilities cannot settle this between
+     * them -- `cn` does not dedupe them, and the axis-specific one wins -- so it
+     * is a switch rather than a class.
+     */
+    scrollable?: boolean;
+}): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;

package/dist/components/ui/table.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+function Table({ className, scrollable = true, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: cn("relative w-full", scrollable && "overflow-x-auto"), children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
@@ -17,7 +17,12 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("h-(--table-row-height) border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-xs font-medium tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn(
+        // A column name is a name, not metadata, so it is set at the table's
+        // own size. It lives here rather than on the sort button so that a
+        // table mixing sortable and plain columns draws one header row and
+        // not two typefaces side by side.
+        "h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-sm font-normal tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("px-(--table-cell-padding-x) py-(--table-cell-padding-y) align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));

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.5.0",
 	"type": "module",
 	"private": false,
 	"repository": {