nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Viewers/DataTable.js

@@ -5,16 +5,18 @@ import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, us
 import { flushSync } from "react-dom";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { canCall, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.js";
 import { fitColumnWidth, headLeafCells, startColumnDrag, startColumnResize } from "../../Helpers/TableColumns.js";
 import { exportTableCsv, printTable } from "../../Helpers/TableExport.js";
 import { asFilterInput, filterNames, filterRequest } from "../../Helpers/TableFilters.js";
 import { joinKeys, joinSourceName, tableJoins } from "../../Helpers/TableJoins.js";
-import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, headBands, MIN_COLUMN_WIDTH, orderColumns, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, viewColumns, } from "../../Helpers/TableHelpers.js";
+import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, headBands, leadColumns, namingColumn, MIN_COLUMN_WIDTH, orderColumns, releasedPins, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, viewColumns, } from "../../Helpers/TableHelpers.js";
 import { TableStore } from "../../Helpers/TableStore.js";
 import { readUserPreferences, useNumberLocale, useUserPreferences } from "../../Helpers/UserPreferences.js";
 import { Button } from "../Documents/Button.js";
 import { Menu } from "../Documents/Menu.js";
 import { SplitButton } from "../Documents/SplitButton.js";
+import { useReadOnlyNotice } from "../Inputs/ReadOnlyNotice.js";
 import { TextBox } from "../Inputs/TextBox.js";
 import { toast } from "../Layouts/Toaster.js";
 import { downloadExcelTemplate, exportExcel } from "../../Services/ExcelApi.js";
@@ -41,8 +43,10 @@ export function useTable() {
 const STATE_PREFIX = "nx-table:";
 /** The key of the section `pinnedRows` makes. */
 const PINS_SECTION = "pins";
-/** The lookups' version for a table with no `join` column, which never listens to them. */
-const NO_JOINS = () => 0;
+/** A version that never changes: the lookups' for a table with no `join` column, the permissions' for one with no sheet. */
+const NO_VERSION = () => 0;
+/** The page size of a table read whole (`pager="none"`): every row on the first page. */
+const WHOLE_PAGE = Number.MAX_SAFE_INTEGER;
 function readSaved(key) {
     if (!key || typeof localStorage === "undefined")
         return null;
@@ -77,6 +81,9 @@ function usePerRow(make) {
         return value;
     }, [cache, make]);
 }
+/** No pinned column scrolls: the table is wide enough for them all. */
+const NONE_RELEASED = new Set();
+const sameKeys = (a, b) => a.size === b.size && [...a].every(key => b.has(key));
 const sameNumbers = (a, b) => {
     const keys = Object.keys(a);
     return keys.length === Object.keys(b).length && keys.every(key => a[key] === b[key]);
@@ -99,17 +106,24 @@ const sameNumbers = (a, b) => {
  * />
  */
 export function DataTable(props) {
-    const { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, sections: ownSections, rowMarks, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize: ownPageSize, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
+    const { columns: givenColumns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", caption, toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, onPick, sections: ownSections, rowMarks, rowStrong, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize: ownPageSize, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, currency, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
     const paging = givenRows ? "client" : (props.paging ?? "client");
+    // A server's pages cannot all be shown at once: such a table keeps its paging in the footer instead.
+    const pager = props.pager === "none" && paging === "server" ? "footer" : (props.pager ?? "bar");
+    const whole = pager === "none";
     const reloadable = props.reloadable ?? Boolean(load);
     const searchDelay = props.searchDelay ?? (paging === "server" ? 300 : 0);
-    // A table with checkboxes numbers its rows: the number becomes the checkbox as soon as the row is under the pointer.
-    const numbered = props.numbered ?? selectable;
+    // A table with checkboxes numbers its rows: the number becomes the checkbox as soon as the row is under the pointer. So
+    // does one whose rows are picked, whose first column holds each row's radio button.
+    const pickable = Boolean(onPick);
+    const numbered = props.numbered ?? (selectable || pickable);
     // The person's choices in the quick preference panel, once made, go over what the table names itself.
     const preferences = useUserPreferences();
     const openOnClick = preferences.rowClick ?? ownOpenOnClick ?? false;
-    /** The page size the table opens with: the person's default when this table offers it, else the table's own. */
+    /** The page size the table opens with: every row for a table read whole, the person's default when this table offers it, else the table's own. */
     const openingPageSize = () => {
+        if (whole)
+            return WHOLE_PAGE;
         const preferred = readUserPreferences().pageSize;
         return preferred !== null && pageSizes.includes(preferred) ? preferred : (ownPageSize ?? DEFAULT_PAGE_SIZE);
     };
@@ -117,20 +131,26 @@ export function DataTable(props) {
     const table = givenTable ?? own;
     // Prepared once for the store and the panel: the same params without what would make them filter on their own.
     const filterInputs = useMemo(() => props.filterInputs?.map(asFilterInput), [props.filterInputs]);
-    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange, filterInputs });
+    // A picture or a logo (`lead`) first of the page's columns, as every table draws it until the user moves it.
+    const columns = useMemo(() => leadColumns(givenColumns), [givenColumns]);
+    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange, onPickChange: onPick, filterInputs });
     useImperativeHandle(ref, () => table, [table]);
     const state = useSyncExternalStore(table.subscribe, table.getState, table.getState);
     // The columns whose values are other records', looked up by key (`join`). Only a table with one listens to the page's
     // lookups, and it draws again - its rows too, through `cellOptions` - each time names come in.
     const joins = useMemo(() => columns.flatMap(column => (column.join ? [column.join] : [])), [columns]);
     const subscribeJoins = useCallback((listener) => (joins.length ? tableJoins.subscribe(listener) : () => { }), [joins.length]);
-    const joinsVersion = useSyncExternalStore(subscribeJoins, joins.length ? tableJoins.getVersion : NO_JOINS, NO_JOINS);
+    const joinsVersion = useSyncExternalStore(subscribeJoins, joins.length ? tableJoins.getVersion : NO_VERSION, NO_VERSION);
+    // A spreadsheet's items ask the app's permissions, as a CRUD's actions do, so only a table with one listens for them.
+    const hasSheet = Boolean(excel);
+    const subscribeSheet = useCallback((listener) => (hasSheet ? subscribePermissions(listener) : () => { }), [hasSheet]);
+    useSyncExternalStore(subscribeSheet, hasSheet ? permissionsVersion : NO_VERSION, NO_VERSION);
     const dates = useDatePreferences();
     const timeZone = useBrowserTimeZone();
     const numbers = useNumberLocale();
     // `joinsVersion` is read by no cell option: a new object is what tells the memoized rows that their names came in.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers }), [dates, timeZone, numbers, joinsVersion]);
+    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers, currency }), [dates, timeZone, numbers, currency, joinsVersion]);
     const tableId = useId();
     // The search box is uncontrolled: a new key clears it when a new list starts over.
     const [searchGeneration, setSearchGeneration] = useState(0);
@@ -147,7 +167,7 @@ export function DataTable(props) {
             started.current = true;
             const saved = readSaved(stateKey);
             table.restore({
-                pageSize: saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
+                pageSize: !whole && saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
                 sort: saved?.sort !== undefined ? saved.sort : defaultSort,
                 hidden: saved?.hidden ?? columns.filter(column => column.hidden).map(column => column.key),
                 order: saved?.order,
@@ -173,6 +193,26 @@ export function DataTable(props) {
         if (started.current && givenRows)
             table.setRows(givenRows);
     }, [table, givenRows]);
+    // Another table's settings behind the same table (a CRUD's scope keeps its own): read as on the first draw, before the
+    // rows its new list loads, and the settings on screen are not written under the new key (`restoredKey` is what says
+    // the store already holds that key's settings).
+    const restoredKey = useRef(stateKey);
+    useLayoutEffect(() => {
+        if (!started.current || restoredKey.current === stateKey)
+            return;
+        restoredKey.current = stateKey;
+        const saved = readSaved(stateKey);
+        table.restore({
+            pageSize: !whole && saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
+            sort: saved?.sort !== undefined ? saved.sort : (defaultSort ?? null),
+            hidden: saved?.hidden ?? columns.filter(column => column.hidden).map(column => column.key),
+            order: saved?.order ?? [],
+            widths: saved?.widths ?? {},
+            pinned: saved?.pinned ?? {},
+        }, { notify: true });
+        setOpenSections(new Set(saved?.openSections ?? (saved?.pinsOpen ? [PINS_SECTION] : [])));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table, stateKey]);
     // Another list behind the same table: start over from the first page, with no search and no selection.
     useLayoutEffect(() => {
         if (loadedKey.current === loadKey)
@@ -183,20 +223,24 @@ export function DataTable(props) {
         void table.reload({ reset: true });
     }, [table, loadKey]);
     useEffect(() => () => clearTimeout(searchTimer.current), []);
-    // Saved settings follow the user's choices.
+    // Saved settings follow the user's choices. What is written is the store's state now, never this draw's: the first
+    // draw, and the draw that took another key's settings, still hold the settings from before the restore, and writing
+    // those would put the opening defaults (or another key's settings) under the key.
     const hiddenList = useMemo(() => [...state.hidden].sort(), [state.hidden]);
     useEffect(() => {
         if (!stateKey || !started.current)
             return;
+        const now = table.getState();
         writeSaved(stateKey, {
             // Only a size the person picked here: one equal to the default is not kept, so a new default still reaches it.
-            pageSize: state.query.pageSize === openingPageSize() ? undefined : state.query.pageSize,
-            sort: state.query.sort,
-            hidden: hiddenList,
-            order: state.order.length ? [...state.order] : undefined,
-            widths: Object.keys(state.widths).length ? state.widths : undefined,
-            pinned: Object.keys(state.pinned).length ? state.pinned : undefined,
+            pageSize: now.query.pageSize === openingPageSize() ? undefined : now.query.pageSize,
+            sort: now.query.sort,
+            hidden: [...now.hidden].sort(),
+            order: now.order.length ? [...now.order] : undefined,
+            widths: Object.keys(now.widths).length ? now.widths : undefined,
+            pinned: Object.keys(now.pinned).length ? now.pinned : undefined,
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stateKey, state.query.pageSize, state.query.sort, hiddenList, state.order, state.widths, state.pinned]);
     // A new default page size from the panel reaches an open table where no size was picked. Only a change counts: on the
     // first effects the save above still holds the store's opening size and has not written the restored one yet, so a
@@ -207,7 +251,7 @@ export function DataTable(props) {
         if (preferredSize.current === preferences.pageSize)
             return;
         preferredSize.current = preferences.pageSize;
-        if (!started.current || readSaved(stateKey)?.pageSize)
+        if (whole || !started.current || readSaved(stateKey)?.pageSize)
             return;
         table.setPageSize(openingPageSize());
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -232,8 +276,8 @@ export function DataTable(props) {
     const labelOf = useCallback((row) => {
         if (rowLabel)
             return rowLabel(row);
-        const first = columns[0];
-        const text = first ? formatCellText(first, columnValue(first, row), cellOptions) : "";
+        const first = namingColumn(columns);
+        const text = first ? formatCellText(first, columnValue(first, row), cellOptions, row) : "";
         return text || `row ${table.keyOf(row)}`;
     }, [rowLabel, columns, cellOptions, table]);
     const actionsOf = usePerRow(rowActions);
@@ -260,6 +304,10 @@ export function DataTable(props) {
             void result.finally(() => table.setBusy([key], false)).catch(() => undefined);
         }
     }, [table]);
+    // The picked row (`onPick`): a click on a row, or its radio button, picks it through the store, which follows it.
+    const pickRow = useCallback((row) => table.pick(row), [table]);
+    const pickName = `${tableId}pick`;
+    const pickedKey = state.picked ? table.keyOf(state.picked) : null;
     const onSearch = (text) => {
         clearTimeout(searchTimer.current);
         if (searchDelay > 0 && text.trim())
@@ -280,9 +328,11 @@ export function DataTable(props) {
     const headRef = useRef(null);
     const colRefs = useMemo(() => new Map(), []);
     const [offsets, setOffsets] = useState({});
+    // Pinned columns that scroll for now: on a narrow table the ones past `PINNED_SHARE` of its width give way.
+    const [released, setReleased] = useState(NONE_RELEASED);
     const sized = Object.keys(state.widths).length > 0;
-    const views = useMemo(() => viewColumns(visible, { order: state.order, pinned: state.pinned, widths: state.widths, offsets, reorderable, resizable }), [visible, state.order, state.pinned, state.widths, offsets, reorderable, resizable]);
-    const indexOn = selectable || numbered;
+    const views = useMemo(() => viewColumns(visible, { order: state.order, pinned: state.pinned, widths: state.widths, offsets, released, reorderable, resizable }), [visible, state.order, state.pinned, state.widths, offsets, released, reorderable, resizable]);
+    const indexOn = selectable || numbered || pickable;
     // The bands above the headings. With no group anywhere the header is the one row it always was.
     const bands = useMemo(() => headBands(views), [views]);
     const grouped = bands.some(band => band.group !== null);
@@ -327,8 +377,36 @@ export function DataTable(props) {
         // The bar of the selected rows starts after the checkbox column, whatever width it took.
         root?.style.setProperty("--nx-table-index-w", `${Math.round(left)}px`);
         setOffsets(previous => (sameNumbers(previous, next) ? previous : next));
+        settlePins.current();
     });
+    // Which pinned columns give way: measured from the headings after every render and whenever the table's width
+    // changes. Staying or scrolling changes no width, so it settles at once.
+    const settlePins = useRef(() => undefined);
+    settlePins.current = () => {
+        const scroller = scrollRef.current;
+        const cells = headLeafCells(headRef.current);
+        if (!scroller || cells.length === 0)
+            return;
+        const sides = new Map(views.map(view => [view.column.key, view.side]));
+        let frameWidth = 0;
+        const left = [];
+        const right = [];
+        for (const cell of cells) {
+            const key = cell.getAttribute("data-col");
+            const width = cell.getBoundingClientRect().width;
+            if (key === TABLE_INDEX_COLUMN || key === TABLE_ACTIONS_COLUMN)
+                frameWidth += width;
+            else if (key && sides.get(key) === "left")
+                left.push([key, width]);
+            else if (key && sides.get(key) === "right")
+                right.unshift([key, width]);
+        }
+        const next = left.length + right.length === 0 ? NONE_RELEASED : releasedPins(scroller.clientWidth, frameWidth, left, right);
+        setReleased(previous => (sameKeys(previous, next) ? previous : next));
+    };
     // Shadows at the pinned columns while the others scroll under them: set on the frame, with no render.
+    // The width the rows can show goes on the frame too, so a message across a wide table (no rows, a hint, a failed
+    // load) stays inside what is on screen instead of centring on the whole scroll width.
     useLayoutEffect(() => {
         const scroller = scrollRef.current;
         const frameElement = scroller?.parentElement;
@@ -339,9 +417,14 @@ export function DataTable(props) {
             frameElement.toggleAttribute("data-scroll-start", left > 1);
             frameElement.toggleAttribute("data-scroll-end", left < scroller.scrollWidth - scroller.clientWidth - 1);
         };
-        update();
+        const measure = () => {
+            frameElement.style.setProperty("--nx-table-view-w", `${scroller.clientWidth}px`);
+            update();
+            settlePins.current();
+        };
+        measure();
         scroller.addEventListener("scroll", update, { passive: true });
-        const observer = new ResizeObserver(update);
+        const observer = new ResizeObserver(measure);
         observer.observe(scroller);
         if (scroller.firstElementChild)
             observer.observe(scroller.firstElementChild);
@@ -467,6 +550,10 @@ export function DataTable(props) {
     const barRef = useRef(null);
     const reloadRef = useRef(null);
     const [reloadHidden, setReloadHidden] = useState(false);
+    // An Add that cannot add yet (`add.disabled` with a `description`) says why on a press, under it.
+    const addNotice = useReadOnlyNotice(Boolean(add?.disabled && add.description), barRef, add?.description, { anchor: target => target.closest(".nx-btn"), typing: false, lock: "label" });
+    // The spreadsheet's other ways to add sit under the Add's arrow only while it can add.
+    const addable = Boolean(add && !add.disabled);
     const addPart = Boolean(add || actions);
     const listsPart = Boolean(toolbar);
     useLayoutEffect(() => {
@@ -500,23 +587,35 @@ export function DataTable(props) {
         void table.reload({ quiet: true });
     };
     // A spreadsheet: the template to fill, the file to bring back, and an export the server writes from what is on
-    // screen. With an Add, they are other ways to add, under its arrow; without one, they are in the options menu.
+    // screen. With an Add, they are other ways to add, under its arrow; without one, they are in the options menu. Each is
+    // offered only to a person the app's permissions let call every endpoint it needs, the settings included.
+    const sheet = excel?.endpoints;
+    const mayUseSheet = (...endpoints) => [sheet.settings, ...endpoints].every(endpoint => canCall(endpoint));
     const sheetItems = excel
         ? [
-            { id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), separator: true, onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) },
-            { id: "excel-import", label: "Import from a spreadsheet", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported }) },
-            // A bulk insert is an Add of many rows, so it is offered only beside an Add: a CRUD shows its Add only to a person
-            // who may create, and nobody types fifty rows to be refused at the end.
-            ...(excel.bulk === false || !add
-                ? []
-                : [{ id: "excel-bulk", label: "Bulk insert", description: "Type the rows here, with no file", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported, mode: "bulk" }) }]),
-            ...(excel.endpoints.export
+            ...(mayUseSheet(sheet.template) ? [{ id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) }] : []),
+            ...(mayUseSheet(sheet.verify, sheet.import)
+                ? [
+                    { id: "excel-import", label: "Import from a spreadsheet", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported }) },
+                    // A bulk insert is an Add of many rows, so it is offered only beside an Add that can add: a CRUD shows its Add
+                    // only to a person who may create, and nobody types fifty rows to be refused at the end.
+                    ...(excel.bulk === false || !addable
+                        ? []
+                        : [{ id: "excel-bulk", label: "Bulk insert", description: "Type the rows here, with no file", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported, mode: "bulk" }) }]),
+                ]
+                : []),
+            ...(sheet.export && mayUseSheet(sheet.export)
                 ? [{ id: "excel-export", label: "Export to Excel", description: "Everything the search and filters leave, from the server", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => void exportExcel(excel.endpoints, exportQuery()) }]
                 : []),
-        ]
+        ].map((item, index) => (index === 0 ? { ...item, separator: true } : item))
         : [];
     // In the bar it is `block`: as wide as its own label there, and the whole line once the Add section takes one.
-    const addButton = (block = false) => add && (_jsx(Button, { variant: "primary", size: "sm", block: block, icon: _jsx(InlineIcon, { icon: iconPlus }), onClick: add.onClick, children: add.label }));
+    const addButton = (block = false) => add && (_jsx(Button, { variant: "primary", size: "sm", block: block, icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-disabled": add.disabled || undefined, title: add.description, onKeyDown: addNotice.onKeyDown, onClick: event => {
+            if (!add.disabled)
+                add.onClick();
+            else if (!add.onDisabledPress?.())
+                addNotice.show(event.currentTarget);
+        }, children: add.label }));
     const optionItems = [
         ...(filterInputs?.length
             ? [{ id: "filters", label: "Filters", description: filtersOn.join(", ") || undefined, icon: _jsx(InlineIcon, { icon: iconFilter }), onSelect: () => filtersRef.current?.open() }]
@@ -531,7 +630,7 @@ export function DataTable(props) {
             : []),
         // The sheet's own Import replaces the page's `onImport` hook.
         ...(excel
-            ? add
+            ? addable
                 ? []
                 : sheetItems
             : onImport
@@ -545,7 +644,9 @@ export function DataTable(props) {
         ...(reloadable && reloadHidden ? [{ id: "reload", label: "Reload", icon: _jsx(InlineIcon, { icon: iconRefresh }), separator: true, onSelect: reload }] : []),
     ];
     const optionEntries = menuEntries(optionItems);
-    const pageSizePicker = _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable, onChange: value => table.setPageSize(value) });
+    // Rows per page: inside the search box, in the bar without one, or beside the pager (`pager`); none for a table read whole.
+    const pageSizePicker = whole ? null : _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable && pager === "bar", onChange: value => table.setPageSize(value) });
+    const barPageSize = pager === "bar" ? pageSizePicker : null;
     let body;
     if (status === "loading") {
         body = _jsx(TableSkeletonRows, { count: Math.min(query.pageSize, 8), cells: cellCount, frame: frame, sized: sized });
@@ -576,7 +677,7 @@ export function DataTable(props) {
         body = rows.map((row, index) => {
             const key = pageKeys[index];
             const selected = state.selected.has(key);
-            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: rowMarks?.(row), frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
+            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: rowMarks?.(row), strong: rowStrong?.(row) === true, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick, onPick: pickable ? pickRow : undefined, picked: key === pickedKey, pickName: pickable ? pickName : undefined }, key || index));
         });
     }
     /* The sections above the page: the records pinned, the favourites, each folded open or shut, remembered on this device */
@@ -598,7 +699,9 @@ export function DataTable(props) {
             const key = table.keyOf(row);
             const selected = state.selected.has(key);
             const marks = rowMarks?.(row);
-            return (_jsx(TableRowView, { row: row, rowKey: key, number: index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: marks?.length ? marks : own, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
+            return (_jsx(TableRowView, { row: row, rowKey: key, number: index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: marks?.length ? marks : own, strong: rowStrong?.(row) === true, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick, 
+                // A click picks a section's row too; its radio button is the one in the list below, where the arrow keys move.
+                onPick: pickable ? pickRow : undefined, picked: key === pickedKey }, key || index));
         });
     };
     const selectedRows = selecting ? [...state.selected.values()] : [];
@@ -619,8 +722,8 @@ export function DataTable(props) {
     const mass = selectedRows.length ? (typeof massActions === "function" ? massActions(selectedRows) : (massActions ?? [])) : [];
     // A column's own heading, wherever it stands: across both rows when no band is above it, in the row under its band when one is.
     const headingCell = (view, rowSpan) => (_jsx(HeaderCell, { view: view, sized: sized, rowSpan: rowSpan, sort: query.sort, disabled: status !== "ready" || rows.length < 2, covered: selectedRows.length > 0, canPin: canPinColumn(view.column, { pinnable }), canHide: view.column.hideable !== false && visible.length > 1, neighbours: moveTargets(views, view.column.key), onSort: direction => table.setSort(direction ? { key: view.column.key, direction } : null), onPin: side => table.setPinned(view.column.key, side), onMove: beforeKey => table.moveColumn(view.column.key, beforeKey), onFit: () => fitColumn(view.column.key), onHide: () => table.setHidden(view.column.key, true), onPointerDown: event => onColumnPointerDown(event, view), onResizerDown: event => onResizerPointerDown(event, view.column.key) }, view.column.key));
-    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, fill && "nx-table--fill", className), style: style, "data-head-rows": headRows, "data-status": status, "data-refreshing": refreshing || undefined, "data-selecting": selecting || undefined, "data-sized": sized || undefined, children: [_jsxs("div", { ref: barRef, className: "nx-table__bar", children: [addPart && (_jsxs("div", { className: "nx-table__bar-add", children: [add &&
-                                (sheetItems.length > 0 ? (_jsx(SplitButton, { fixed: true, block: true, size: "sm", menuLabel: "More ways to add", options: [{ value: "add", label: add.label, icon: _jsx(InlineIcon, { icon: iconPlus }) }, ...sheetItems.map(item => ({ value: item.id, label: item.label, icon: item.icon, description: item.description }))], onAction: value => (value === "add" ? add.onClick() : sheetItems.find(item => item.id === value)?.onSelect()) })) : (addButton(true))), actions] })), toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [filterInputs?.length ? (_jsx(TableFiltersPanel, { ref: filtersRef, anchor: optionsRef, inputs: filterInputs, value: query.filters, delay: searchDelay, matches: state.matches, total: state.total, onChange: values => table.setFilters(values) })) : null, hasColumnsPanel && (_jsx(TableColumnsPanel, { ref: columnsRef, anchor: optionsRef, columns: ordered, hidden: state.hidden, pinned: state.pinned, reorderable: reorderable, size: "sm", changed: table.hasColumnChanges(), onToggle: (key, hide) => table.setHidden(key, hide), onOrder: keys => table.setOrder(keys), onReset: () => table.resetColumns() })), reloadable && (_jsx(Button, { ref: reloadRef, size: "sm", variant: "ghost", className: "nx-table__reload", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: reload })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { ref: optionsRef, size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), dot: filtersOn.length > 0 && "primary", "aria-label": "More options", title: filtersOn.length ? `More options · ${filtersOn.length} ${filtersOn.length === 1 ? "filter" : "filters"} on` : "More options", "data-table-options": true }) })), !searchable && pageSizePicker] }), searchable && (_jsx(TextBox, { ref: searchRef, type: "search", size: "sm", className: "nx-table__search", actionsStart: pageSizePicker, icon: _jsx(InlineIcon, { icon: iconSearch }), placeholder: searchPlaceholder, "aria-label": searchPlaceholder.replace(/…$/, ""), "aria-controls": tableId, defaultValue: query.search, clearable: true, onValueChange: onSearch, onKeyDown: event => {
+    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, fill && "nx-table--fill", className), style: style, "data-head-rows": headRows, "data-status": status, "data-refreshing": refreshing || undefined, "data-selecting": selecting || undefined, "data-sized": sized || undefined, children: [caption && _jsx("div", { className: "nx-table__caption", children: caption }), _jsxs("div", { ref: barRef, className: "nx-table__bar", children: [addPart && (_jsxs("div", { className: "nx-table__bar-add", children: [add &&
+                                (addable && sheetItems.length > 0 ? (_jsx(SplitButton, { fixed: true, block: true, size: "sm", menuLabel: "More ways to add", options: [{ value: "add", label: add.label, icon: _jsx(InlineIcon, { icon: iconPlus }) }, ...sheetItems.map(item => ({ value: item.id, label: item.label, icon: item.icon, description: item.description }))], onAction: value => (value === "add" ? add.onClick() : sheetItems.find(item => item.id === value)?.onSelect()) })) : (addButton(true))), actions] })), toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [filterInputs?.length ? (_jsx(TableFiltersPanel, { ref: filtersRef, anchor: optionsRef, inputs: filterInputs, value: query.filters, delay: searchDelay, matches: state.matches, total: state.total, onChange: values => table.setFilters(values) })) : null, hasColumnsPanel && (_jsx(TableColumnsPanel, { ref: columnsRef, anchor: optionsRef, columns: ordered, hidden: state.hidden, pinned: state.pinned, reorderable: reorderable, size: "sm", changed: table.hasColumnChanges(), onToggle: (key, hide) => table.setHidden(key, hide), onOrder: keys => table.setOrder(keys), onReset: () => table.resetColumns() })), reloadable && (_jsx(Button, { ref: reloadRef, size: "sm", variant: "ghost", className: "nx-table__reload", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: reload })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { ref: optionsRef, size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), dot: filtersOn.length > 0 && "primary", "aria-label": "More options", title: filtersOn.length ? `More options · ${filtersOn.length} ${filtersOn.length === 1 ? "filter" : "filters"} on` : "More options", "data-table-options": true }) })), !searchable && barPageSize] }), searchable && (_jsx(TextBox, { ref: searchRef, type: "search", size: "sm", className: "nx-table__search", actionsStart: barPageSize, icon: _jsx(InlineIcon, { icon: iconSearch }), placeholder: searchPlaceholder, "aria-label": searchPlaceholder.replace(/…$/, ""), "aria-controls": tableId, defaultValue: query.search, clearable: true, onValueChange: onSearch, onKeyDown: event => {
                             if (event.key === "Enter") {
                                 clearTimeout(searchTimer.current);
                                 table.setSearch(event.currentTarget.value);
@@ -632,13 +735,13 @@ export function DataTable(props) {
                                                             } }) })) })), bands.map(band => band.group === null ? (headingCell(band.columns[0], headRows)) : (_jsx(GroupHeading, { band: band }, `group:${band.group}:${band.columns[0].column.key}`))), sized && _jsx("td", { className: "nx-table__heading nx-table__cell--filler", rowSpan: headRows }), frame.actions && (_jsx("th", { scope: "col", className: "nx-table__heading nx-table__cell--actions", rowSpan: headRows, "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: { right: frame.actions.offset }, children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }), grouped && _jsx("tr", { className: "nx-table__head nx-table__head--leaves", children: bands.filter(band => band.group !== null).flatMap(band => band.columns.map(view => headingCell(view))) })] }), sections.map(section => {
                                     const open = openSections.has(section.key);
                                     return (_jsxs("tbody", { className: "nx-table__section", "data-section": section.key, "data-open": open || undefined, children: [_jsx(TableSectionHead, { span: span, label: section.label, icon: section.icon, count: section.rows.length, max: section.max, loading: Boolean(section.loading), open: open, onToggle: () => toggleSection(section.key) }), open && sectionRows(section)] }, section.key));
-                                }), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
+                                }), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, whole: whole, pageSize: pager === "footer" ? pageSizePicker : null, onPage: page => table.setPage(page) }), addNotice.notice] }));
 }
 /** Where "Move left" and "Move right" put a column: the key it goes before, or null for the end of its side. */
 function moveTargets(views, key) {
     // A column moves among the columns on its own side, past the ones that stay put.
-    const pin = views.find(view => view.column.key === key)?.pin ?? null;
-    const group = views.filter(view => view.pin === pin && view.movable);
+    const side = views.find(view => view.column.key === key)?.side ?? null;
+    const group = views.filter(view => view.side === side && view.movable);
     const at = group.findIndex(view => view.column.key === key);
     if (at < 0)
         return { left: undefined, right: undefined };
@@ -679,11 +782,12 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
     if (canPin) {
         if (entries.length)
             entries.push({ separator: true });
-        if (view.pin !== "left")
+        // The side chosen, also while a narrow table lets it scroll.
+        if (view.side !== "left")
             entries.push({ value: "pin-left", label: "Pin left", icon: _jsx(InlineIcon, { icon: iconArrowBarToLeft }) });
-        if (view.pin !== "right")
+        if (view.side !== "right")
             entries.push({ value: "pin-right", label: "Pin right", icon: _jsx(InlineIcon, { icon: iconArrowBarToRight }) });
-        if (view.pin)
+        if (view.side)
             entries.push({ value: "unpin", label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) });
     }
     if (view.movable && (neighbours.left !== undefined || neighbours.right !== undefined)) {
@@ -721,7 +825,7 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
             onHide();
     }
     const label = _jsx("span", { className: "nx-table__heading-label", children: column.label });
-    return (_jsxs("th", { scope: "col", className: cx("nx-table__heading", `nx-table__cell--${align}`), rowSpan: rowSpan, "data-col": column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, "data-movable": view.movable || undefined, style: columnStyle(view, sized), "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : undefined, onPointerDown: onPointerDown, children: [_jsxs("div", { className: "nx-table__heading-inner", children: [sortable ? (_jsxs("button", { type: "button", className: "nx-table__sort", "data-sorted": direction ?? undefined, disabled: disabled && !direction, tabIndex: covered ? -1 : undefined, onClick: () => onSort(direction === "asc" ? "desc" : direction === "desc" ? null : "asc"), title: `Sort by ${column.label}`, children: [label, _jsx(InlineIcon, { icon: direction === "asc" ? iconArrowUp : direction === "desc" ? iconArrowDown : iconArrowsSort, className: "nx-table__sort-icon" })] })) : (label), entries.length > 0 && (_jsx(Menu, { items: entries, size: "sm", align: "end", "aria-label": `${column.label}: column`, onSelect: choose, children: _jsx(Button, { variant: "ghost", size: "sm", className: "nx-table__col-menu", icon: _jsx(InlineIcon, { icon: iconChevronDown }), tabIndex: covered ? -1 : undefined, "aria-label": `${column.label}: column options`, title: "Column options" }) }))] }), view.resizable && (_jsx("span", { className: "nx-table__resizer", "aria-hidden": "true", "data-resize": column.key, title: `Drag to resize ${column.label}, double-click to fit`, onPointerDown: onResizerDown, onDoubleClick: onFit }))] }));
+    return (_jsxs("th", { scope: "col", className: cx("nx-table__heading", `nx-table__cell--${align}`), rowSpan: rowSpan, "data-col": column.key, "data-pin": view.pin ?? undefined, "data-pin-side": view.side ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, "data-movable": view.movable || undefined, style: columnStyle(view, sized), "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : undefined, onPointerDown: onPointerDown, children: [_jsxs("div", { className: "nx-table__heading-inner", children: [sortable ? (_jsxs("button", { type: "button", className: "nx-table__sort", "data-sorted": direction ?? undefined, disabled: disabled && !direction, tabIndex: covered ? -1 : undefined, onClick: () => onSort(direction === "asc" ? "desc" : direction === "desc" ? null : "asc"), title: `Sort by ${column.label}`, children: [label, _jsx(InlineIcon, { icon: direction === "asc" ? iconArrowUp : direction === "desc" ? iconArrowDown : iconArrowsSort, className: "nx-table__sort-icon" })] })) : (label), entries.length > 0 && (_jsx(Menu, { items: entries, size: "sm", align: "end", "aria-label": `${column.label}: column`, onSelect: choose, children: _jsx(Button, { variant: "ghost", size: "sm", className: "nx-table__col-menu", icon: _jsx(InlineIcon, { icon: iconChevronDown }), tabIndex: covered ? -1 : undefined, "aria-label": `${column.label}: column options`, title: "Column options" }) }))] }), view.resizable && (_jsx("span", { className: "nx-table__resizer", "aria-hidden": "true", "data-resize": column.key, title: `Drag to resize ${column.label}, double-click to fit`, onPointerDown: onResizerDown, onDoubleClick: onFit }))] }));
 }
 /** The steps a bar is squeezed into when its parts do not fit, each one keeping the steps before it. */
 const BAR_SQUEEZES = ["search", "search reload", "search reload add"];

package/dist/Components/Viewers/DataTableColumns.d.ts

@@ -1,11 +1,11 @@
 import { type Ref, type RefObject } from "react";
 import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
-import type { TableColumn, TablePinSide, TableRow } from "../../Interfaces/TableInterfaces.ts";
+import type { TableColumn, TablePins, TableRow } from "../../Interfaces/TableInterfaces.ts";
 export interface TableColumnsPanelProps<TRow extends TableRow> {
     /** Every column the table has, in the order they are in now - hidden ones among them. */
     columns: readonly TableColumn<TRow>[];
     hidden: ReadonlySet<string>;
-    pinned: Readonly<Record<string, TablePinSide>>;
+    pinned: TablePins;
     /** False while the table is not reorderable: the panel then only shows and hides. */
     reorderable?: boolean;
     /** Default `md`. */

package/dist/Components/Viewers/DataTableColumns.js

@@ -5,6 +5,7 @@ import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { isPopoverOpen } from "../../Helpers/PopoverHelpers.js";
 import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
+import { columnPin } from "../../Helpers/TableHelpers.js";
 import { Button } from "../Documents/Button.js";
 /** The rows of the panel: a band for every run of neighbours that name the same group, as the header draws them. */
 function panelRows(columns, groups) {
@@ -69,7 +70,7 @@ export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true,
         key: column.key,
         label: column.label,
         shown: !hidden.has(column.key),
-        pin: pinned[column.key] ?? column.pinned ?? null,
+        pin: columnPin(column, pinned),
         movable: reorderable && column.movable !== false,
         hideable: column.hideable !== false,
     }));

package/dist/Components/Viewers/DataTableFilters.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type RefObject } from "react";
 import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
-import type { InputParams } from "../../Interfaces/FormInterfaces.ts";
+import { type InputParams } from "../../Interfaces/FormInterfaces.ts";
 import type { TableFilters } from "../../Interfaces/TableInterfaces.ts";
 export interface TableFiltersPanelProps {
     /** The filter inputs, as the table prepared them (`asFilterInput`). */

package/dist/Components/Viewers/DataTableFilters.js

@@ -4,6 +4,7 @@ import { iconFilterOff, InlineIcon } from "nexus-icons";
 import { useEffect, useId, useRef } from "react";
 import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
 import { activeFilters } from "../../Helpers/TableFilters.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { Form, useForm } from "../Forms/Form.js";
 import { formatCount } from "./DataTableParts.js";
@@ -14,7 +15,21 @@ import { formatCount } from "./DataTableParts.js";
  * never clears a filter on its way out.
  */
 /** Inputs typed into or dragged: their value waits until the person stops. A date box reads a date from part of one. */
-const TYPED = new Set(["text", "email", "search", "tel", "url", "textarea", "number", "slider", "range-slider", "date", "date-range", "time", "date-time"]);
+const TYPED = new Set([
+    EInputTypes.Text,
+    EInputTypes.Email,
+    EInputTypes.Search,
+    EInputTypes.Tel,
+    EInputTypes.Url,
+    EInputTypes.TextArea,
+    EInputTypes.Number,
+    EInputTypes.Slider,
+    EInputTypes.RangeSlider,
+    EInputTypes.Date,
+    EInputTypes.DateRange,
+    EInputTypes.Time,
+    EInputTypes.DateTime,
+]);
 /** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
 export function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }) {
     const titleId = useId();
@@ -57,7 +72,7 @@ export function TableFiltersPanel({ inputs, value, delay, matches, total, onChan
         }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: titleId, children: "Filters" }), _jsx("span", { className: "nx-table-panel__count", children: count ? `${count} on` : "None" })] }), _jsx("div", { className: "nx-popover__scroll", children: shown && (_jsx(Form, { form: form, inputs: inputs, size: "sm", defaultValue: value, className: "nx-table-filters__form", onValueChange: (_, name) => {
                         if (name === null)
                             return;
-                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? ""))
+                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? 0))
                             wait();
                         else
                             apply();

package/dist/Components/Viewers/DataTableParts.d.ts

@@ -41,8 +41,11 @@ export declare function TableColumnGroup<TRow extends TableRow>({ columns, width
     frame: TableFrameColumns;
     colRefs: Map<string, HTMLTableColElement>;
 }): import("react").JSX.Element;
-/** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }: {
+/**
+ * The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. A
+ * row of a table whose rows are picked (`onPick`) also holds its radio button here, out of sight.
+ */
+export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, pick, }: {
     heading?: boolean;
     /** 2 in the heading while the header has a band of group headings above the columns' own. */
     rowSpan?: number;
@@ -55,6 +58,8 @@ export declare function TableIndexCell({ heading, rowSpan, own, number, numbered
     numbered: boolean;
     selectable: boolean;
     checkbox?: ReactNode;
+    /** The row's radio button, when rows are picked. */
+    pick?: ReactNode;
 }): import("react").JSX.Element;
 export interface TableRowViewProps<TRow extends TableRow> {
     row: TRow;
@@ -72,6 +77,8 @@ export interface TableRowViewProps<TRow extends TableRow> {
     numbered: boolean;
     /** The row's marks (pinned, a favourite), worn one under the other where a row without any shows its number. */
     marks?: readonly TableRowMark[];
+    /** The row reads strong (`rowStrong`): a thread with unread lines. */
+    strong?: boolean;
     /** Where the table's own columns sit; `null` for the ones it does not have. */
     frame: TableFrameColumns;
     /** The user gave a column a width, so the table lays its columns out from the `<colgroup>`. */
@@ -82,9 +89,15 @@ export interface TableRowViewProps<TRow extends TableRow> {
     onOpen?: (row: TRow) => void;
     /** A single click opens the row, as a double-click does. */
     openOnClick?: boolean;
+    /** Rows are picked: a click picks this one (a double-click still opens it), whatever `openOnClick` says. */
+    onPick?: (row: TRow) => void;
+    /** This row is the picked one. */
+    picked?: boolean;
+    /** The name of the table's radio group, for the row's own radio button; none in a section above the page. */
+    pickName?: string;
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, marks, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
+declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, marks, strong, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, onPick, picked, pickName, }: TableRowViewProps<TRow>): import("react").JSX.Element;
 export declare const TableRowView: typeof TableRowViewInner;
 /**
  * The head of a section above the page: one row across the table with a button that folds the section's records open
@@ -146,11 +159,16 @@ export declare function TablePageSize({ pageSize, pageSizes, compact, onChange }
 }): import("react").JSX.Element | null;
 /**
  * Under the table: which rows show and how many the search and the filters left ("Showing 41–50 of 234 · filtered
- * from 1,000"), the page of how many, and the pager.
+ * from 1,000"), the page of how many, the rows per page when the table keeps them here (`pageSize`), and the pager.
+ *
+ * A table read whole (`whole`, every row on one page) has nothing to page: its footer shows only while a search or the
+ * filters leave rows out, and is otherwise kept for screen readers alone, so the count is still heard as it changes.
  */
-export declare function TableFooter<TRow extends TableRow>({ state, disabled, onPage }: {
+export declare function TableFooter<TRow extends TableRow>({ state, disabled, whole, pageSize, onPage }: {
     state: TableState<TRow>;
     disabled: boolean;
+    whole?: boolean;
+    pageSize?: ReactNode;
     onPage: (page: number) => void;
 }): import("react").JSX.Element;
 export {};