nexus-shared 3.2.0 → 4.0.0

package/dist/Components/Layouts/Popup.js

@@ -17,17 +17,20 @@ function popupPosition(dialog) {
 }
 // Each popup's opener and the popup that held it, so focus can find its way back through popups that have gone.
 const openers = new WeakMap();
+// How each popup puts the focus inside itself (its `initialFocus`), for a popup closed over it that left the focus nowhere.
+const homes = new WeakMap();
 /**
- * A modal window on the native <dialog>, with the buttons of a desktop window: minimize, maximize, and close. It sits
- * in the top layer above everything, dims and locks the page behind it, traps Tab, closes with Esc or a click outside,
- * and returns focus to where it came from. The title bar moves it; a double-click there maximizes it. Minimized, it
+ * A modal window on the native <dialog>, with the buttons of a desktop window: maximize and close, and minimize when
+ * it asks (`minimizable`: a CRUD page's Add and Edit). It sits in the top layer above everything, dims and locks the
+ * page behind it, traps Tab, closes with Esc or a click outside, and returns focus to where it came from. The title
+ * bar moves it; a double-click there maximizes it. Minimized, it
  * waits as a bar at the bottom right with its content kept, while the page can be used. The body scrolls while the
  * title and the footer stay. The content mounts while the popup is open, so a form inside starts fresh every time.
  *
  * @example
  * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
  */
-export function Popup({ open, onClose, onClosed, title, description, icon, variant = "window", size = "md", footer, closable = true, closeOnEscape = true, closeOnBackdrop = true, minimizable, maximizable = true, movable = true, reopen = "replace", windowState: windowStateProp, defaultWindowState = "normal", onWindowStateChange, flush = false, initialFocus, "aria-label": ariaLabel, className, children, }) {
+export function Popup({ open, onClose, onClosed, title, description, icon, variant = "window", size = "md", footer, closable = true, closeOnEscape = true, closeOnBackdrop = true, minimizable, maximizable = true, movable = true, reopen = "replace", windowState: windowStateProp, defaultWindowState = "normal", onWindowStateChange, flush = false, initialFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }) {
     const id = useId();
     const dialogRef = useRef(null);
     // Content stays mounted through the exit animation, and while minimized.
@@ -41,7 +44,8 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     const maximized = windowState === "maximized";
     const dockReady = useDockReady();
     const hosted = useContext(HostedPopupContext);
-    const canMinimize = (minimizable ?? closable) && dockReady;
+    // Only a popup that asks: a CRUD page's Add and Edit, and its row forms.
+    const canMinimize = minimizable === true && dockReady;
     const downOnBackdropRef = useRef(false);
     // The element that opened the popup, where focus goes back when the browser has nowhere better.
     const openerRef = useRef(null);
@@ -65,19 +69,22 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
         onWindowStateChange?.(next);
     }
     // The latest props and callbacks, for the dock bar and the drag, which outlive a render.
-    const latest = useRef({ windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState });
+    const latest = useRef({ windowState, defaultWindowState, reopen, title, description, icon, closable, ariaLabel, onClose, changeWindowState });
     useLayoutEffect(() => {
-        latest.current = { windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState };
+        latest.current = { windowState, defaultWindowState, reopen, title, description, icon, closable, ariaLabel, onClose, changeWindowState };
         if (!minimized)
             restoreToRef.current = windowState;
     });
     function dock() {
         const current = latest.current;
         dockedRef.current = true;
+        const label = typeof current.title === "string" ? current.title : current.ariaLabel;
         dockWindow({
             id: dockId,
             title: current.title ?? current.ariaLabel ?? "Window",
-            label: typeof current.title === "string" ? current.title : current.ariaLabel,
+            // Under the title, so two bars of one kind (two Edit forms, two Adds) read apart: the record, the place.
+            description: current.description,
+            label: label && typeof current.description === "string" ? `${label} · ${current.description}` : label,
             icon: current.icon,
             restore: () => latest.current.changeWindowState(restoreToRef.current),
             close: current.closable ? () => latest.current.onClose("close") : undefined,
@@ -102,11 +109,26 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
             link = openers.get(link.within);
         if (link?.opener?.isConnected)
             link.opener.focus({ preventScroll: true });
+        // An opener that cannot take the focus - hidden in a menu that closed, disabled while its action runs - or none at
+        // all never leaves it on the page while another popup is still open: the popup now on top takes it, where it puts
+        // it on opening (a record's workspace: its chosen tab).
+        const now = document.activeElement;
+        if (now && now !== document.body && !dialog.contains(now))
+            return;
+        const below = Array.from(document.querySelectorAll("dialog.nx-popup")).filter(other => other !== dialog && other.open);
+        const top = below[below.length - 1];
+        if (top)
+            (homes.get(top) ?? (() => top.focus()))();
     }
     function focusInside(dialog) {
         const target = initialFocus ? dialog.querySelector(initialFocus) : dialog.querySelector(`:is(.nx-popup__body, .nx-popup__foot) :is(${FOCUSABLE})`);
         (target ?? dialog).focus();
     }
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (dialog)
+            homes.set(dialog, () => focusInside(dialog));
+    });
     function showDialog(dialog) {
         // The first modal locks the page; the space of its scrollbar is kept as padding, so nothing shifts.
         if (!document.querySelector(".nx-popup:modal"))
@@ -317,6 +339,12 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     function onPointerDown(event) {
         downOnBackdropRef.current = event.target === event.currentTarget;
     }
+    // A press outside a popup that stays open through it (`closeOnBackdrop: false`) leaves the focus where it was, as
+    // the press does nothing: a question's Confirm keeps it, so Enter still answers, and a field keeps its caret.
+    function onMouseDown(event) {
+        if (event.target === event.currentTarget && !closeOnBackdrop)
+            event.preventDefault();
+    }
     function onClick(event) {
         const onBackdrop = event.target === event.currentTarget && downOnBackdropRef.current;
         downOnBackdropRef.current = false;
@@ -369,5 +397,5 @@ export function Popup({ open, onClose, onClosed, title, description, icon, varia
     const titleId = `${id}-title`;
     const descriptionId = `${id}-description`;
     const hasControls = canMinimize || maximizable || closable;
-    return (_jsx("dialog", { ref: dialogRef, className: cx("nx-popup", `nx-popup--${variant}`, `nx-popup--${size}`, flush && "nx-popup--flush", maximized && "nx-popup--maximized", movable && "nx-popup--movable", closing && "nx-popup--closing", className), "data-window-state": windowState, "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, "aria-describedby": description ? descriptionId : undefined, onCancel: onCancel, onClose: onNativeClose, onPointerDown: onPointerDown, onClick: onClick, children: shown && (_jsxs(HostedPopupContext, { value: false, children: [(title || icon || hasControls) && (_jsxs("header", { className: "nx-popup__head", onPointerDown: onHeadPointerDown, onDoubleClick: onHeadDoubleClick, children: [icon && _jsx("span", { className: "nx-popup__icon", children: icon }), _jsxs("div", { className: "nx-popup__heading", children: [title && (_jsx("h2", { id: titleId, className: "nx-popup__title", children: title })), description && (_jsx("p", { id: descriptionId, className: "nx-popup__description", children: description }))] }), hasControls && (_jsxs("div", { className: "nx-popup__controls", children: [canMinimize && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__minimize", "aria-label": "Minimize", title: "Minimize", onMouseDown: keepFocus, onClick: () => changeWindowState("minimized"), children: _jsx(InlineIcon, { icon: iconMinus }) })), maximizable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__maximize", "aria-label": maximized ? "Restore down" : "Maximize", title: maximized ? "Restore down" : "Maximize", onMouseDown: keepFocus, onClick: toggleMaximize, children: _jsx(InlineIcon, { icon: maximized ? iconSquares : iconSquare }) })), closable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__close", "aria-label": "Close", title: "Close", onClick: () => onClose("close"), children: _jsx(InlineIcon, { icon: iconX }) }))] }))] })), _jsx("div", { className: "nx-popup__body", children: children }), footer && _jsx("footer", { className: "nx-popup__foot", children: footer })] }, round)) }));
+    return (_jsx("dialog", { ref: dialogRef, className: cx("nx-popup", `nx-popup--${variant}`, `nx-popup--${size}`, flush && "nx-popup--flush", maximized && "nx-popup--maximized", movable && "nx-popup--movable", closing && "nx-popup--closing", className), "data-window-state": windowState, "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, "aria-describedby": cx(description ? descriptionId : undefined, ariaDescribedBy) || undefined, onCancel: onCancel, onClose: onNativeClose, onPointerDown: onPointerDown, onMouseDown: onMouseDown, onClick: onClick, children: shown && (_jsxs(HostedPopupContext, { value: false, children: [(title || icon || hasControls) && (_jsxs("header", { className: "nx-popup__head", onPointerDown: onHeadPointerDown, onDoubleClick: onHeadDoubleClick, children: [icon && _jsx("span", { className: "nx-popup__icon", children: icon }), _jsxs("div", { className: "nx-popup__heading", children: [title && (_jsx("h2", { id: titleId, className: "nx-popup__title", children: title })), description && (_jsx("p", { id: descriptionId, className: "nx-popup__description", children: description }))] }), hasControls && (_jsxs("div", { className: "nx-popup__controls", children: [canMinimize && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__minimize", "aria-label": "Minimize", title: "Minimize", onMouseDown: keepFocus, onClick: () => changeWindowState("minimized"), children: _jsx(InlineIcon, { icon: iconMinus }) })), maximizable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__maximize", "aria-label": maximized ? "Restore down" : "Maximize", title: maximized ? "Restore down" : "Maximize", onMouseDown: keepFocus, onClick: toggleMaximize, children: _jsx(InlineIcon, { icon: maximized ? iconSquares : iconSquare }) })), closable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__close", "aria-label": "Close", title: "Close", onClick: () => onClose("close"), children: _jsx(InlineIcon, { icon: iconX }) }))] }))] })), _jsx("div", { className: "nx-popup__body", children: children }), footer && _jsx("footer", { className: "nx-popup__foot", children: footer })] }, round)) }));
 }

package/dist/Components/Layouts/PopupDock.d.ts

@@ -3,7 +3,9 @@ import { type ReactNode } from "react";
 export interface DockedWindow {
     id: string;
     title: ReactNode;
-    /** Plain text of the title, for the tooltip. */
+    /** A second line under the title: the record or the place a window is about, so two of one kind read apart. */
+    description?: ReactNode;
+    /** Plain text of the title, and of the description, for the tooltip. */
     label?: string;
     /** The window's icon; a window icon when left out. */
     icon?: ReactNode;

package/dist/Components/Layouts/PopupDock.js

@@ -113,9 +113,10 @@ export function PopupDock() {
 function DockBar({ item, onRestore }) {
     const id = useId();
     const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
     const closeId = `${id}-close`;
     return (_jsxs("li", { className: "nx-dock__item", children: [_jsxs("button", { type: "button", className: "nx-dock__window", title: item.label ? `Restore: ${item.label}` : "Restore", onClick: () => {
                     onRestore();
                     item.restore();
-                }, children: [_jsx("span", { className: "nx-dock__icon", "aria-hidden": "true", children: item.icon ?? _jsx(InlineIcon, { icon: iconAppWindow }) }), _jsx("span", { className: "nx-visually-hidden", children: "Restore " }), _jsx("span", { id: titleId, className: "nx-dock__title", children: item.title }), _jsx(InlineIcon, { className: "nx-dock__restore", icon: iconChevronUp })] }), item.close && (_jsxs("button", { type: "button", className: "nx-dock__close", "aria-labelledby": `${closeId} ${titleId}`, title: "Close", onClick: item.close, children: [_jsx("span", { id: closeId, hidden: true, children: "Close" }), _jsx(InlineIcon, { icon: iconX })] }))] }));
+                }, children: [_jsx("span", { className: "nx-dock__icon", "aria-hidden": "true", children: item.icon ?? _jsx(InlineIcon, { icon: iconAppWindow }) }), _jsx("span", { className: "nx-visually-hidden", children: "Restore " }), _jsxs("span", { className: "nx-dock__text", children: [_jsx("span", { id: titleId, className: "nx-dock__title", children: item.title }), item.description ? (_jsx("span", { id: descriptionId, className: "nx-dock__description", children: item.description })) : null] }), _jsx(InlineIcon, { className: "nx-dock__restore", icon: iconChevronUp })] }), item.close && (_jsxs("button", { type: "button", className: "nx-dock__close", "aria-labelledby": item.description ? `${closeId} ${titleId} ${descriptionId}` : `${closeId} ${titleId}`, title: "Close", onClick: item.close, children: [_jsx("span", { id: closeId, hidden: true, children: "Close" }), _jsx(InlineIcon, { icon: iconX })] }))] }));
 }

package/dist/Components/Layouts/PopupHost.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useSyncExternalStore } from "react";
 import { Popup } from "./Popup.js";
 import { HostedPopupContext } from "./PopupContext.js";
+import { PageLeaveGuardContext } from "../Forms/FormLeaveGuard.js";
 import { PopupDock } from "./PopupDock.js";
 import { withPopupRule } from "./PopupRules.js";
 const EMPTY = [];
@@ -156,8 +157,8 @@ export function PopupHost() {
         for (const entry of list)
             rendered.add(entry.id);
     });
-    return (_jsxs(HostedPopupContext, { value: true, children: [list.map(entry => {
-                const { content, footer, onClose: _onClose, beforeClose: _beforeClose, onWindowStateChange: _onWindowStateChange, key: _key, ...rest } = entry.options;
-                return (_jsx(Popup, { ...rest, open: entry.open, windowState: entry.windowState, onWindowStateChange: state => setWindowState(entry.id, state), footer: typeof footer === "function" ? footer(entry.handle) : footer, onClose: reason => requestClose(entry.id, reason), onClosed: () => removeEntry(entry.id), children: typeof content === "function" ? content(entry.handle) : content }, entry.id));
-            }), _jsx(PopupDock, {})] }));
+    return (_jsx(PageLeaveGuardContext, { value: null, children: _jsxs(HostedPopupContext, { value: true, children: [list.map(entry => {
+                    const { content, footer, onClose: _onClose, beforeClose: _beforeClose, onWindowStateChange: _onWindowStateChange, key: _key, ...rest } = entry.options;
+                    return (_jsx(Popup, { ...rest, open: entry.open, windowState: entry.windowState, onWindowStateChange: state => setWindowState(entry.id, state), footer: typeof footer === "function" ? footer(entry.handle) : footer, onClose: reason => requestClose(entry.id, reason), onClosed: () => removeEntry(entry.id), children: typeof content === "function" ? content(entry.handle) : content }, entry.id));
+                }), _jsx(PopupDock, {})] }) }));
 }

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, 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, 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, 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,24 @@ 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 });
+    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 +165,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 +191,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 +221,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 +249,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
@@ -233,7 +275,7 @@ export function DataTable(props) {
         if (rowLabel)
             return rowLabel(row);
         const first = columns[0];
-        const text = first ? formatCellText(first, columnValue(first, row), cellOptions) : "";
+        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 +302,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 +326,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 +375,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 +415,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 +548,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 +585,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 +628,7 @@ export function DataTable(props) {
             : []),
         // The sheet's own Import replaces the page's `onImport` hook.
         ...(excel
-            ? add
+            ? addable
                 ? []
                 : sheetItems
             : onImport
@@ -545,7 +642,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 +675,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), 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 +697,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, 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 +720,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 +733,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 +780,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 +823,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"];