@hanzo/ui 8.27.10 → 8.27.12

package/dist/backends/gui/data-table.cjs

@@ -1,211 +1,171 @@
 'use client';"use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = DataTable;
 exports.DataTableColumnHeader = DataTableColumnHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * DataTable — a table over an array, with sorting, a text filter, column
- * visibility, row selection and pagination composed from one column list.
+ * DataTable — a sortable, filterable, paginated grid over an array of rows,
+ * driven by a column-definition array exactly the way the upstream guide's
+ * `ColumnDef[]` is: a column names an `accessorKey`, an optional `header` and
+ * `cell` renderer, and whether it can be sorted or hidden. Two ids carry
+ * meaning by convention, matched by the reference implementation's own demo —
+ * a column `id: 'select'` gets its checkbox for free, everything else (an
+ * `id: 'actions'` column included) is rendered by whatever `cell` you give it.
  *
- * A column names an `accessorKey` and, only where the default text rendering
- * is not enough, a `header`/`cell` render function; the render functions get a
- * `column`/`table` handle shaped like the one a caller already knows from
- * TanStack Table (`getIsSorted`, `toggleSorting`, `getIsSelected`, …), so a
- * column list ports over by keeping its shape and dropping only the
- * `ColumnDef` import. Rows keep the identity of their position in `data`, so
- * selection survives a sort or a filter.
+ * There is no TanStack Table here: the workspace does not carry it, and a
+ * generic column model over a plain array needs none of what a headless
+ * library buys a real backend — grouping, virtualization, server-side
+ * pagination. Sorting, filtering, visibility, selection and pagination are
+ * ~120 lines of arithmetic over arrays, kept in one `useState` each, matching
+ * the guide's own `SortingState`/`ColumnFiltersState`/`VisibilityState` split.
  *
- * The grid is ONE `Grid` (`../../grid`), header and body cells alike, so every
- * column shares one set of tracks; each row is a `display: contents` wrapper
- * carrying `role="row"` so the cells inside stay direct grid children (Grid's
- * own note: `grid-column` only reaches a direct child) while still grouping
- * into a real accessible row.
+ * The grid is `@hanzo/ui`'s own `Grid`/`Cell` — a real CSS grid, which is the
+ * one correct host for a two-dimensional layout — with the WAI-ARIA
+ * `table`/`row`/`columnheader`/`cell` roles standing in for the semantics a
+ * native `<table>` would otherwise carry.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
-const React = __importStar(require("react"));
+const react_1 = require("react");
 const grid_1 = require("../../grid.cjs");
 const button_1 = require("./button.cjs");
 const checkbox_1 = require("./checkbox.cjs");
 const dropdown_menu_1 = require("./dropdown-menu.cjs");
+const ink_1 = require("./ink.cjs");
 const input_1 = require("./input.cjs");
 const slot_1 = require("./slot.cjs");
-const resolve = (def) => ({
-    id: def.id ?? (def.accessorKey != null ? String(def.accessorKey) : ''),
-    def,
-});
-const cycle = (current, id, desc) => {
-    if (typeof desc === 'boolean')
-        return { id, desc };
-    if (!current || current.id !== id)
-        return { id, desc: false };
-    return current.desc ? null : { id, desc: true };
+/**
+ * A column's header cell: plain text when the column cannot sort, otherwise a
+ * button that toggles ascending/descending and shows which way it is set —
+ * the same affordance the reference `data-table-demo.tsx` wires up by hand.
+ */
+function DataTableColumnHeader({ column, title, className }) {
+    if (!column.getCanSort())
+        return ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "600", color: "$quiet", className: className, children: title }));
+    const sorted = column.getIsSorted();
+    return ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('data-table-column-header'), variant: "ghost", size: "sm", className: className, onClick: () => column.toggleSorting(sorted === 'asc'), children: [title, sorted === 'desc' ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowDown, { size: 14 }) : sorted === 'asc' ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUpDown, { size: 14 })] }));
+}
+const cellValue = (column, row) => column.accessorKey !== undefined ? row[column.accessorKey] : undefined;
+const sortKey = (column, row) => {
+    if (column.sortingValue)
+        return column.sortingValue(row);
+    const v = cellValue(column, row);
+    return typeof v === 'number' ? v : String(v ?? '');
 };
-function DataTable({ columns, data, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 10, emptyMessage = 'No results.', }) {
-    const resolved = React.useMemo(() => columns.map(resolve), [columns]);
-    const [sorting, setSorting] = React.useState(null);
-    const [filterValue, setFilterValue] = React.useState('');
-    const [hidden, setHidden] = React.useState({});
-    const [selected, setSelected] = React.useState({});
-    const [pageIndex, setPageIndex] = React.useState(0);
-    const withIndex = React.useMemo(() => data.map((original, index) => ({ original, index })), [data]);
-    const filtered = React.useMemo(() => {
-        if (!filterColumnId || filterValue === '')
-            return withIndex;
-        const needle = filterValue.toLowerCase();
-        return withIndex.filter(({ original }) => {
-            const value = original[filterColumnId];
-            return String(value ?? '').toLowerCase().includes(needle);
-        });
-    }, [withIndex, filterColumnId, filterValue]);
-    const sorted = React.useMemo(() => {
+const filterText = (column, row) => column.filterValue ? column.filterValue(row) : String(cellValue(column, row) ?? '');
+const track = (width) => width === undefined ? '1fr' : typeof width === 'number' ? `${width}px` : width;
+const justify = (a) => a === 'right' ? 'flex-end' : a === 'center' ? 'center' : 'flex-start';
+function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 0, emptyMessage = 'No results.', onRowSelectionChange, }) {
+    const [sorting, setSorting] = (0, react_1.useState)(null);
+    const [filter, setFilter] = (0, react_1.useState)('');
+    const [hidden, setHidden] = (0, react_1.useState)({});
+    const [selected, setSelected] = (0, react_1.useState)({});
+    const [pageIndex, setPageIndex] = (0, react_1.useState)(0);
+    const withIds = (0, react_1.useMemo)(() => data.map((row, i) => ({ row, id: getRowId ? getRowId(row, i) : String(i) })), [data, getRowId]);
+    const filterColumn = filterColumnId ? columns.find((c) => c.id === filterColumnId) : undefined;
+    const filtered = (0, react_1.useMemo)(() => {
+        if (!filterColumn || filter.trim() === '')
+            return withIds;
+        const needle = filter.toLowerCase();
+        return withIds.filter(({ row }) => filterText(filterColumn, row).toLowerCase().includes(needle));
+    }, [withIds, filterColumn, filter]);
+    const sorted = (0, react_1.useMemo)(() => {
         if (!sorting)
             return filtered;
-        const col = resolved.find((c) => c.id === sorting.id);
-        if (!col?.def.accessorKey)
+        const column = columns.find((c) => c.id === sorting.id);
+        if (!column)
             return filtered;
-        const key = col.def.accessorKey;
-        const dir = sorting.desc ? -1 : 1;
-        return [...filtered].sort((a, b) => {
-            const av = a.original[key];
-            const bv = b.original[key];
-            if (av == null && bv == null)
-                return 0;
-            if (av == null)
-                return -1 * dir;
-            if (bv == null)
-                return 1 * dir;
-            return av > bv ? dir : av < bv ? -dir : 0;
-        });
-    }, [filtered, sorting, resolved]);
-    const paginate = pageSize > 0;
-    const pageCount = paginate ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
-    const clampedPageIndex = Math.min(pageIndex, pageCount - 1);
-    const pageRows = paginate
-        ? sorted.slice(clampedPageIndex * pageSize, clampedPageIndex * pageSize + pageSize)
-        : sorted;
-    const makeColumn = React.useCallback((col) => ({
-        id: col.id,
-        getIsSorted: () => (sorting && sorting.id === col.id ? (sorting.desc ? 'desc' : 'asc') : false),
-        toggleSorting: (desc) => setSorting((prev) => cycle(prev, col.id, desc)),
-        getCanHide: () => col.def.enableHiding !== false,
-        getIsVisible: () => hidden[col.id] !== true,
-        toggleVisibility: (visible) => setHidden((prev) => {
-            const isHidden = prev[col.id] === true;
-            const nextHidden = visible === undefined ? !isHidden : !visible;
-            return { ...prev, [col.id]: nextHidden };
-        }),
-    }), [sorting, hidden]);
-    const makeRow = React.useCallback((index, original) => {
-        const id = String(index);
-        return {
-            id,
-            original,
-            getValue: (columnId) => {
-                const col = resolved.find((c) => c.id === columnId);
-                return col?.def.accessorKey ? original[col.def.accessorKey] : undefined;
-            },
-            getIsSelected: () => selected[id] === true,
-            toggleSelected: (value) => setSelected((prev) => ({ ...prev, [id]: value === undefined ? !prev[id] : value })),
-        };
-    }, [resolved, selected]);
-    const instance = React.useMemo(() => ({
-        getAllColumns: () => resolved.map(makeColumn),
+        const keyed = filtered.map((entry) => ({ entry, key: sortKey(column, entry.row) }));
+        keyed.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+        if (sorting.desc)
+            keyed.reverse();
+        return keyed.map((k) => k.entry);
+    }, [filtered, columns, sorting]);
+    const pageCount = pageSize > 0 ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+    const paged = pageSize > 0 ? sorted.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize) : sorted;
+    const visibleColumns = columns.filter((c) => hidden[c.id] !== true);
+    const hideable = columns.filter((c) => c.enableHiding !== false);
+    const setSelectedFor = (id, value) => {
+        const next = { ...selected, [id]: value };
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const toggleAllPage = (value) => {
+        const next = { ...selected };
+        for (const entry of paged)
+            next[entry.id] = value;
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const rowApi = (entry) => ({
+        id: entry.id,
+        original: entry.row,
+        getValue: (columnId) => {
+            const column = columns.find((c) => c.id === columnId);
+            return column ? cellValue(column, entry.row) : undefined;
+        },
+        getIsSelected: () => selected[entry.id] === true,
+        toggleSelected: (value) => setSelectedFor(entry.id, value ?? !selected[entry.id]),
+    });
+    const columnApi = (column) => ({
+        id: column.id,
+        getCanSort: () => column.enableSorting !== false,
+        getIsSorted: () => (sorting?.id === column.id ? (sorting.desc ? 'desc' : 'asc') : false),
+        toggleSorting: (desc = false) => {
+            if (column.enableSorting === false)
+                return;
+            setSorting({ id: column.id, desc });
+        },
+        getCanHide: () => column.enableHiding !== false,
+        getIsVisible: () => hidden[column.id] !== true,
+        toggleVisibility: (visible) => setHidden((h) => ({ ...h, [column.id]: visible === undefined ? h[column.id] !== true : !visible })),
+    });
+    const pageIds = paged.map((e) => e.id);
+    const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selected[id]);
+    const somePageSelected = pageIds.some((id) => selected[id]);
+    const table = {
         getColumn: (id) => {
-            const col = resolved.find((c) => c.id === id);
-            return col ? makeColumn(col) : undefined;
+            const column = columns.find((c) => c.id === id);
+            return column ? columnApi(column) : undefined;
         },
-        getIsAllPageRowsSelected: () => pageRows.length > 0 && pageRows.every(({ index }) => selected[String(index)] === true),
-        getIsSomePageRowsSelected: () => pageRows.some(({ index }) => selected[String(index)] === true) &&
-            !pageRows.every(({ index }) => selected[String(index)] === true),
-        toggleAllPageRowsSelected: (value) => setSelected((prev) => {
-            const allSelected = pageRows.every(({ index }) => prev[String(index)] === true);
-            const next = value === undefined ? !allSelected : value;
-            const out = { ...prev };
-            for (const { index } of pageRows)
-                out[String(index)] = next;
-            return out;
-        }),
-        getFilteredRowModel: () => ({ rows: sorted.map(({ original, index }) => makeRow(index, original)) }),
-        getFilteredSelectedRowModel: () => ({
-            rows: sorted.filter(({ index }) => selected[String(index)] === true).map(({ original, index }) => makeRow(index, original)),
-        }),
+        getAllColumns: () => columns.map(columnApi),
+        getRowModel: () => ({ rows: paged.map(rowApi) }),
+        getFilteredRowModel: () => ({ rows: filtered.map(rowApi) }),
+        getFilteredSelectedRowModel: () => ({ rows: filtered.filter((e) => selected[e.id]).map(rowApi) }),
+        getIsAllPageRowsSelected: () => allPageSelected,
+        getIsSomePageRowsSelected: () => somePageSelected,
+        toggleAllPageRowsSelected: (value) => toggleAllPage(value ?? !allPageSelected),
+        getCanPreviousPage: () => pageIndex > 0,
+        getCanNextPage: () => pageIndex < pageCount - 1,
         previousPage: () => setPageIndex((p) => Math.max(0, p - 1)),
         nextPage: () => setPageIndex((p) => Math.min(pageCount - 1, p + 1)),
-        getCanPreviousPage: () => clampedPageIndex > 0,
-        getCanNextPage: () => clampedPageIndex < pageCount - 1,
-    }), [resolved, makeColumn, makeRow, pageRows, sorted, selected, pageCount, clampedPageIndex]);
-    const visible = resolved.filter((c) => hidden[c.id] !== true);
-    const hideable = resolved.filter((c) => c.def.enableHiding !== false);
-    const hasSelectColumn = resolved.some((c) => c.id === 'select');
-    const selectedCount = instance.getFilteredSelectedRowModel().rows.length;
-    const totalCount = instance.getFilteredRowModel().rows.length;
-    const align = (a) => a === 'right' ? 'right' : a === 'center' ? 'center' : 'left';
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", width: "100%", ...(0, slot_1.slot)('data-table'), children: [(filterColumnId || hideable.length > 0) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", ...(0, slot_1.slot)('data-table-toolbar'), children: [filterColumnId ? ((0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: filterPlaceholder, value: filterValue, onChangeText: setFilterValue, maxW: 360, flex: 1, ...(0, slot_1.slot)('data-table-filter') })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 })), hideable.length > 0 && ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", size: "sm", ...(0, slot_1.slot)('data-table-view-options'), children: ["Columns ", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { align: "end", children: hideable.map((col) => {
-                                    const api = makeColumn(col);
-                                    return ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuCheckboxItem, { checked: api.getIsVisible(), onCheckedChange: (value) => api.toggleVisibility(!!value), children: col.id }, col.id));
-                                }) })] }))] })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: visible.length || 1, gap: 0, role: "table", ...(0, slot_1.slot)('data-table-grid'), children: [(0, jsx_runtime_1.jsx)("div", { role: "row", style: { display: 'contents' }, ...(0, slot_1.slot)('data-table-header-row'), children: visible.map((col) => {
-                                const api = makeColumn(col);
-                                const isSelectCol = col.id === 'select' && !col.def.header;
-                                const content = isSelectCol ? ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select all", checked: instance.getIsAllPageRowsSelected() ? true : instance.getIsSomePageRowsSelected() ? 'indeterminate' : false, onCheckedChange: (value) => instance.toggleAllPageRowsSelected(!!value) })) : typeof col.def.header === 'function' ? (col.def.header({ column: api, table: instance })) : col.def.header !== undefined ? (col.def.header) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontWeight: "600", color: "$quiet", children: col.id }));
-                                return ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "columnheader", "aria-sort": api.getIsSorted() === 'asc' ? 'ascending' : api.getIsSorted() === 'desc' ? 'descending' : 'none', style: {
-                                        padding: 12,
-                                        borderBottom: '1px solid var(--edge)',
-                                        textAlign: align(col.def.align),
-                                    }, ...(0, slot_1.slot)('data-table-head'), children: content }, col.id));
-                            }) }), pageRows.length ? (pageRows.map(({ original, index }, position) => {
-                            const row = makeRow(index, original);
-                            const isSelected = row.getIsSelected();
-                            const isLastRow = position === pageRows.length - 1;
-                            return ((0, jsx_runtime_1.jsx)("div", { role: "row", "data-state": isSelected ? 'selected' : undefined, style: { display: 'contents' }, ...(0, slot_1.slot)('data-table-row'), children: visible.map((col) => {
-                                    const isSelectCol = col.id === 'select' && !col.def.cell;
-                                    const content = isSelectCol ? ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select row", checked: isSelected, onCheckedChange: (value) => row.toggleSelected(!!value) })) : col.def.cell ? (col.def.cell({ row, table: instance })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: String(row.getValue(col.id) ?? '') }));
-                                    return ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "cell", style: {
-                                            padding: 12,
-                                            borderBottom: isLastRow ? undefined : '1px solid var(--edge)',
-                                            textAlign: align(col.def.align),
-                                            background: isSelected ? 'var(--hover)' : undefined,
-                                        }, ...(0, slot_1.slot)('data-table-cell'), children: content }, col.id));
-                                }) }, row.id));
-                        })) : ((0, jsx_runtime_1.jsx)("div", { role: "row", style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: visible.length || 1, role: "cell", style: { padding: 24, textAlign: 'center' }, ...(0, slot_1.slot)('data-table-empty'), children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { color: "$quiet", children: emptyMessage }) }) }))] }) }), (hasSelectColumn || paginate) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", ...(0, slot_1.slot)('data-table-pagination'), children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: "$1", color: "$quiet", children: hasSelectColumn ? `${selectedCount} of ${totalCount} row(s) selected.` : '' }), paginate && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !instance.getCanPreviousPage(), onPress: instance.previousPage, children: "Previous" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !instance.getCanNextPage(), onPress: instance.nextPage, children: "Next" })] }))] }))] }));
-}
-/** A sortable header cell: a ghost button whose icon shows the active direction. */
-function DataTableColumnHeader({ column, title }) {
-    const direction = column.getIsSorted();
-    const Icon = direction === 'asc' ? lucide_icons_2_1.ChevronUp : direction === 'desc' ? lucide_icons_2_1.ChevronDown : lucide_icons_2_1.ChevronsUpDown;
-    return ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "ghost", size: "sm", onPress: () => column.toggleSorting(direction === 'asc'), ...(0, slot_1.slot)('data-table-column-header'), children: [title, (0, jsx_runtime_1.jsx)(Icon, { size: 14 })] }));
+        getPageCount: () => pageCount,
+    };
+    const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+    const filteredCount = table.getFilteredRowModel().rows.length;
+    const trackList = visibleColumns.map((c) => track(c.width)).join(' ');
+    const headerContent = (column) => {
+        if (column.id === 'select')
+            return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select all", checked: allPageSelected ? true : somePageSelected ? 'indeterminate' : false, onCheckedChange: (value) => toggleAllPage(!!value) }));
+        if (typeof column.header === 'function')
+            return column.header({ column: columnApi(column) });
+        return (0, ink_1.ink)(column.header ?? column.id, gui_1.SizableText, { size: '$2', fontWeight: '600', color: '$quiet' });
+    };
+    const cellContent = (column, entry) => {
+        if (column.id === 'select')
+            return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select row", checked: selected[entry.id] === true, onCheckedChange: (value) => setSelectedFor(entry.id, !!value) }));
+        if (column.cell)
+            return column.cell({ row: rowApi(entry) });
+        return (0, ink_1.ink)(String(cellValue(column, entry.row) ?? ''), gui_1.SizableText, { size: '$2' });
+    };
+    const ariaSort = (column) => {
+        if (sorting?.id !== column.id)
+            return 'none';
+        return sorting.desc ? 'descending' : 'ascending';
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('data-table'), width: "100%", gap: "$3", children: [(filterColumnId || hideable.length > 0) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-toolbar'), items: "center", gap: "$2", children: [filterColumnId && ((0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('data-table-filter'), placeholder: filterPlaceholder, value: filter, onChangeText: setFilter, maxW: 360, width: "100%" })), hideable.length > 0 && ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('data-table-view-options'), variant: "outline", size: "sm", ml: "auto", children: ["Columns", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { align: "end", children: hideable.map((column) => ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuCheckboxItem, { checked: hidden[column.id] !== true, onCheckedChange: (value) => setHidden((h) => ({ ...h, [column.id]: !value })), children: column.id }, column.id))) })] }))] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('data-table-grid'), role: "table", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: "$panel", children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { role: "row", ...(0, slot_1.slot)('data-table-header-row'), columns: trackList, gap: 0, children: visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "columnheader", "aria-sort": ariaSort(column), ...(0, slot_1.slot)('data-table-head'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: headerContent(column) }, column.id))) }) }), paged.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('data-table-empty'), height: 96, items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$quiet", children: emptyMessage }) })) : (paged.map((entry) => {
+                        const isSelected = selected[entry.id] === true;
+                        return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-state": isSelected ? 'selected' : undefined, borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: isSelected ? '$hover' : undefined, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { role: "row", ...(0, slot_1.slot)('data-table-row'), "data-state": isSelected ? 'selected' : undefined, columns: trackList, gap: 0, children: visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "cell", ...(0, slot_1.slot)('data-table-cell'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: cellContent(column, entry) }, column.id))) }) }, entry.id));
+                    }))] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-footer'), items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.SizableText, { size: "$2", color: "$quiet", children: [selectedCount, " of ", filteredCount, " row(s) selected."] }), pageSize > 0 && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-pagination'), gap: "$2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !table.getCanPreviousPage(), "aria-disabled": !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: "Previous" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !table.getCanNextPage(), "aria-disabled": !table.getCanNextPage(), onClick: () => table.nextPage(), children: "Next" })] }))] })] }));
 }

package/dist/backends/gui/data-table.d.ts

@@ -1,71 +1,91 @@
-import * as React from 'react';
+import { type ReactNode } from 'react';
+export type DataTableAlign = 'left' | 'center' | 'right';
 export type DataTableSortDirection = 'asc' | 'desc' | false;
-/** The handle a column's `header` render function gets for its own column. */
-export interface DataTableColumnApi {
-    id: string;
+/** What a column can be asked and told, independent of any one row. */
+export interface DataTableColumnApi<TData> {
+    readonly id: string;
+    getCanSort: () => boolean;
     getIsSorted: () => DataTableSortDirection;
     toggleSorting: (desc?: boolean) => void;
     getCanHide: () => boolean;
     getIsVisible: () => boolean;
     toggleVisibility: (visible?: boolean) => void;
 }
-/** The handle a `cell` render function gets for the row it belongs to. */
+/** One row, and the handful of things a `cell` renderer needs from it. */
 export interface DataTableRow<TData> {
-    id: string;
-    original: TData;
+    readonly id: string;
+    readonly original: TData;
     getValue: (columnId: string) => unknown;
     getIsSelected: () => boolean;
-    toggleSelected: (selected?: boolean) => void;
+    toggleSelected: (value?: boolean) => void;
 }
-/** The whole-table handle, for a `select-all` header or a footer count. */
+export interface DataTableColumnDef<TData> {
+    id: string;
+    /** Read directly off the row when no `cell` is given. */
+    accessorKey?: keyof TData;
+    header?: ReactNode | ((ctx: {
+        column: DataTableColumnApi<TData>;
+    }) => ReactNode);
+    cell?: (ctx: {
+        row: DataTableRow<TData>;
+    }) => ReactNode;
+    /** A CSS grid track for this column. Defaults to `1fr`. */
+    width?: number | string;
+    align?: DataTableAlign;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    /** The value compared when this column is the active sort. Defaults to `accessorKey`. */
+    sortingValue?: (row: TData) => string | number;
+    /** The text searched when this column is the active filter. Defaults to `accessorKey`. */
+    filterValue?: (row: TData) => string;
+}
+/** The aggregate operations a custom `header`/`cell` can reach for — one
+ *  object, built fresh each render, mirroring the guide's own `table`. */
 export interface DataTableInstance<TData> {
-    getAllColumns: () => DataTableColumnApi[];
-    getColumn: (id: string) => DataTableColumnApi | undefined;
-    getIsAllPageRowsSelected: () => boolean;
-    getIsSomePageRowsSelected: () => boolean;
-    toggleAllPageRowsSelected: (selected?: boolean) => void;
+    getColumn: (id: string) => DataTableColumnApi<TData> | undefined;
+    getAllColumns: () => DataTableColumnApi<TData>[];
+    getRowModel: () => {
+        rows: DataTableRow<TData>[];
+    };
     getFilteredRowModel: () => {
-        rows: Array<DataTableRow<TData>>;
+        rows: DataTableRow<TData>[];
     };
     getFilteredSelectedRowModel: () => {
-        rows: Array<DataTableRow<TData>>;
+        rows: DataTableRow<TData>[];
     };
-    previousPage: () => void;
-    nextPage: () => void;
+    getIsAllPageRowsSelected: () => boolean;
+    getIsSomePageRowsSelected: () => boolean;
+    toggleAllPageRowsSelected: (value?: boolean) => void;
     getCanPreviousPage: () => boolean;
     getCanNextPage: () => boolean;
-}
-export interface DataTableColumnDef<TData> {
-    /** Stable id. Defaults to `String(accessorKey)` when omitted. */
-    id?: string;
-    accessorKey?: keyof TData;
-    header?: React.ReactNode | ((ctx: {
-        column: DataTableColumnApi;
-        table: DataTableInstance<TData>;
-    }) => React.ReactNode);
-    cell?: (ctx: {
-        row: DataTableRow<TData>;
-        table: DataTableInstance<TData>;
-    }) => React.ReactNode;
-    enableSorting?: boolean;
-    enableHiding?: boolean;
-    align?: 'left' | 'center' | 'right';
+    previousPage: () => void;
+    nextPage: () => void;
+    getPageCount: () => number;
 }
 export interface DataTableProps<TData> {
-    columns: Array<DataTableColumnDef<TData>>;
+    columns: DataTableColumnDef<TData>[];
     data: TData[];
-    /** Column id filtered by the toolbar's text input. Omit to hide it. */
+    /** Identifies a row for selection/sort stability. Defaults to its index. */
+    getRowId?: (row: TData, index: number) => string;
+    /** The column id the toolbar's text field searches. Omit to hide the field. */
     filterColumnId?: string;
     filterPlaceholder?: string;
-    /** Rows per page. `0` disables pagination (and its footer). Default 10. */
+    /** Rows per page. `0` (the default) shows every row with no pager. */
     pageSize?: number;
-    emptyMessage?: string;
+    emptyMessage?: ReactNode;
+    onRowSelectionChange?: (rows: TData[]) => void;
 }
-export declare function DataTable<TData>({ columns, data, filterColumnId, filterPlaceholder, pageSize, emptyMessage, }: DataTableProps<TData>): React.JSX.Element;
-export interface DataTableColumnHeaderProps {
-    column: DataTableColumnApi;
-    title: string;
+export interface DataTableColumnHeaderProps<TData> {
+    column: DataTableColumnApi<TData>;
+    title: ReactNode;
+    className?: string;
 }
-/** A sortable header cell: a ghost button whose icon shows the active direction. */
-export declare function DataTableColumnHeader({ column, title }: DataTableColumnHeaderProps): React.JSX.Element;
+/**
+ * A column's header cell: plain text when the column cannot sort, otherwise a
+ * button that toggles ascending/descending and shows which way it is set —
+ * the same affordance the reference `data-table-demo.tsx` wires up by hand.
+ */
+declare function DataTableColumnHeader<TData>({ column, title, className }: DataTableColumnHeaderProps<TData>): import("react").JSX.Element;
+declare function DataTable<TData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, pageSize, emptyMessage, onRowSelectionChange, }: DataTableProps<TData>): import("react").JSX.Element;
+export { DataTable, DataTableColumnHeader };
 //# sourceMappingURL=data-table.d.ts.map

package/dist/backends/gui/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"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"}