nexus-shared 3.0.0 → 3.2.0

package/dist/Components/Viewers/DataTable.js

@@ -1,26 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChevronDown, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconPinnedOff, iconPrinter, iconRefresh, iconRestore, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
+import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChecks, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconFilter, iconFilterOff, iconPin, iconPinnedOff, iconPlus, iconPrinter, iconRefresh, iconRestore, iconRowInsertBottom, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { flushSync } from "react-dom";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.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 { 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 { TextBox } from "../Inputs/TextBox.js";
 import { toast } from "../Layouts/Toaster.js";
 import { downloadExcelTemplate, exportExcel } from "../../Services/ExcelApi.js";
+import { joinSource } from "../../Services/JoinSources.js";
 import { openExcelImport } from "../Forms/ExcelImport.js";
 import { TableColumnsPanel } from "./DataTableColumns.js";
-import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TablePinnedHead, TableRowView, TableSkeletonRows, } from "./DataTableParts.js";
+import { TableFiltersPanel } from "./DataTableFilters.js";
+import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TableRowView, TableSectionHead, TableSkeletonRows, } from "./DataTableParts.js";
 /*
  * DataTable: rows in a table with a search, sorting by column, pages, a selection with actions on the selected rows,
  * actions on each row, and columns the user arranges (shown or hidden, in any order, resized, pinned to a side). Rows
- * given as `pinnedRows` sit in a section above the page that folds open and shut. Rows are given, loaded once, or
+ * given as `sections` (the records pinned, the favourites) sit above the page, each folding open and shut. Rows are given, loaded once, or
  * loaded a page at a time; what the table shows lives in a `TableStore`, which pages (and the CRUD component) change
  * from outside.
  */
@@ -33,6 +39,10 @@ export function useTable() {
     return store;
 }
 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;
 function readSaved(key) {
     if (!key || typeof localStorage === "undefined")
         return null;
@@ -44,7 +54,7 @@ function readSaved(key) {
         return null;
     }
 }
-// Settings are written in two places (the query and the columns together, the pinned section on its own click), so a
+// Settings are written in two places (the query and the columns together, a section's fold on its own click), so a
 // write keeps whatever it does not mention.
 function writeSaved(key, changes) {
     try {
@@ -89,26 +99,45 @@ 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, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, rowActions, onRowOpen, openOnClick = false, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize = DEFAULT_PAGE_SIZE, 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…", 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 paging = givenRows ? "client" : (props.paging ?? "client");
     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;
-    const [own] = useState(() => (givenTable ? null : new TableStore(pageSize)));
+    // 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. */
+    const openingPageSize = () => {
+        const preferred = readUserPreferences().pageSize;
+        return preferred !== null && pageSizes.includes(preferred) ? preferred : (ownPageSize ?? DEFAULT_PAGE_SIZE);
+    };
+    const [own] = useState(() => (givenTable ? null : new TableStore(ownPageSize ?? DEFAULT_PAGE_SIZE)));
     const table = givenTable ?? own;
-    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange });
+    // 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 });
     useImperativeHandle(ref, () => table, [table]);
     const state = useSyncExternalStore(table.subscribe, table.getState, table.getState);
-    const preferences = useDatePreferences();
+    // 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 dates = useDatePreferences();
     const timeZone = useBrowserTimeZone();
-    const cellOptions = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined }), [preferences, timeZone]);
+    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 tableId = useId();
     // The search box is uncontrolled: a new key clears it when a new list starts over.
     const [searchGeneration, setSearchGeneration] = useState(0);
-    // The pinned section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
-    const [pinsOpen, setPinsOpen] = useState(false);
+    // Every section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
+    const [openSections, setOpenSections] = useState(() => new Set());
     const searchTimer = useRef(undefined);
+    const searchRef = useRef(null);
     const started = useRef(false);
     const loadedKey = useRef(loadKey);
     // First rows: saved settings first, then the rows given or the first load. A layout effect, so rows that are at hand
@@ -118,15 +147,16 @@ export function DataTable(props) {
             started.current = true;
             const saved = readSaved(stateKey);
             table.restore({
-                pageSize: saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : pageSize,
+                pageSize: 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,
                 widths: saved?.widths,
                 pinned: saved?.pinned,
             });
-            if (saved?.pinsOpen)
-                setPinsOpen(true);
+            const open = saved?.openSections ?? (saved?.pinsOpen ? [PINS_SECTION] : []);
+            if (open.length)
+                setOpenSections(new Set(open));
             if (givenRows)
                 table.setRows(givenRows);
             else
@@ -159,7 +189,8 @@ export function DataTable(props) {
         if (!stateKey || !started.current)
             return;
         writeSaved(stateKey, {
-            pageSize: state.query.pageSize,
+            // 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,
@@ -167,6 +198,34 @@ export function DataTable(props) {
             pinned: Object.keys(state.pinned).length ? state.pinned : undefined,
         });
     }, [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
+    // check then would find nothing saved and undo a size picked earlier. The size is read from storage, not from the
+    // hook's value, which is the server's default while the page hydrates.
+    const preferredSize = useRef(preferences.pageSize);
+    useEffect(() => {
+        if (preferredSize.current === preferences.pageSize)
+            return;
+        preferredSize.current = preferences.pageSize;
+        if (!started.current || readSaved(stateKey)?.pageSize)
+            return;
+        table.setPageSize(openingPageSize());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [preferences.pageSize]);
+    // Every key the rows hold for a join, asked for together: a client table's every row, since it searches and sorts them
+    // all, a server table's page, and the rows of the sections above it. What is known already is not asked again.
+    useEffect(() => {
+        if (!joins.length || state.status !== "ready")
+            return;
+        const shown = [...table.getRows(), ...(pinnedRows ?? []), ...(ownSections ?? []).flatMap(section => section.rows)];
+        for (const [source, keys] of joinKeys(joins, shown))
+            tableJoins.request(joinSource(source), keys);
+    }, [joins, state.status, state.rows, pinnedRows, ownSections, table]);
+    // Names came in: a client table searches and sorts again with them.
+    useEffect(() => {
+        if (joinsVersion)
+            table.refreshValues();
+    }, [joinsVersion, table]);
     const visible = useMemo(() => columns.filter(column => !state.hidden.has(column.key)), [columns, state.hidden]);
     // Every column in the order the user put them in, hidden ones among them: what the Columns panel lists.
     const ordered = useMemo(() => orderColumns(columns, state.order), [columns, state.order]);
@@ -360,15 +419,19 @@ export function DataTable(props) {
         });
     };
     /* The bar above the table, and the options menu */
+    // The labels of the filters that are on: the menu's second line, the dot's title, and an export's note.
+    const filtersOn = filterNames(filterInputs ?? [], query.filters);
     const outputName = exportName ?? props["aria-label"] ?? "Table";
     const output = () => {
         const shown = views.map(view => view.column);
         const rowsOut = table.getViewRows();
-        const note = [`${formatCount(rowsOut.length)} ${rowsOut.length === 1 ? "row" : "rows"}`, query.search && `search: ${query.search}`].filter(Boolean).join(" · ");
+        const note = [`${formatCount(rowsOut.length)} ${rowsOut.length === 1 ? "row" : "rows"}`, query.search && `search: ${query.search}`, filtersOn.length && `filters: ${filtersOn.join(", ")}`]
+            .filter(Boolean)
+            .join(" · ");
         return { columns: shown, rows: rowsOut, cellOptions, name: outputName, note };
     };
     const serverPage = paging === "server";
-    /** What an export to Excel asks the server for: the search and the sort on screen, and the page's own filters. */
+    /** What an export to Excel asks the server for: the search, the filters and the sort on screen, and the page's own filters. */
     const exportQuery = () => {
         const column = query.sort ? columns.find(candidate => candidate.key === query.sort.key) : undefined;
         return {
@@ -379,32 +442,98 @@ export function DataTable(props) {
                 search: query.search || null,
                 sort: column ? (column.sortKey ?? column.key) : null,
                 direction: query.sort?.direction,
-                filters: excel?.filters?.(),
+                filters: { ...filterRequest(query.filters, filterInputs ?? [], columns), ...excel?.filters?.() },
             },
         };
     };
-    /** After an import: the rows it wrote are the server's, so the table reads its page again. */
+    /**
+     * After an import: the rows it wrote are the server's, so the table reads its page again - after the page has heard
+     * of it. A `Crud` drops the lists it keeps in `onImported`, and a reload asked first was answered from that cache: on a
+     * page just opened, the list stayed as it was until the person reloaded it themselves (the owner, 2026-10-07).
+     */
     const onImported = () => {
-        void table.reload({ quiet: true });
         excel?.onImported?.();
+        void table.reload({ quiet: true });
+    };
+    // The Filters and Columns panels open from the options menu, under its button.
+    const optionsRef = useRef(null);
+    const filtersRef = useRef(null);
+    const columnsRef = useRef(null);
+    const hasColumnsPanel = columnsMenu && columns.length > 1;
+    // The stylesheet takes the bar's steps by the table's width. A bar wider than those steps expect (a long Add label,
+    // the page's own buttons, cozy density) is squeezed into the next step as soon as a line would break, a frame after
+    // its size changed, so the ResizeObserver never loops. Reload waits in the options menu whenever its button is hidden:
+    // the menu asks the button, so what decides it is written once, in the stylesheet.
+    const barRef = useRef(null);
+    const reloadRef = useRef(null);
+    const [reloadHidden, setReloadHidden] = useState(false);
+    const addPart = Boolean(add || actions);
+    const listsPart = Boolean(toolbar);
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const bar = barRef.current;
+        if (!root || !bar)
+            return;
+        let frame = 0;
+        const fit = () => {
+            squeezeBar(bar);
+            setReloadHidden(reloadRef.current ? getComputedStyle(reloadRef.current).display === "none" : false);
+        };
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(fit);
+        });
+        observer.observe(root);
+        for (const part of Array.from(bar.children))
+            observer.observe(part);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(frame);
+        };
+    }, [addPart, listsPart, searchable, reloadable]);
+    // A person's Reload is a refresh of what the table shows, the names it looked up included: those are marked old - still
+    // drawn, asked again with the rows - and nothing else the page keeps is touched.
+    const reload = () => {
+        for (const join of joins)
+            tableJoins.expire(joinSourceName(join.source));
+        onReload?.();
+        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.
+    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
+                ? [{ 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()) }]
+                : []),
+        ]
+        : [];
+    // 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 optionItems = [
+        ...(filterInputs?.length
+            ? [{ id: "filters", label: "Filters", description: filtersOn.join(", ") || undefined, icon: _jsx(InlineIcon, { icon: iconFilter }), onSelect: () => filtersRef.current?.open() }]
+            : []),
+        ...(filtersOn.length ? [{ id: "clear-filters", label: "Clear filters", icon: _jsx(InlineIcon, { icon: iconFilterOff }), onSelect: () => table.setFilters({}) }] : []),
+        ...(hasColumnsPanel ? [{ id: "columns", label: "Columns", icon: _jsx(InlineIcon, { icon: iconColumns3 }), onSelect: () => columnsRef.current?.open() }] : []),
         ...(exportable && status === "ready" && rows.length > 0
             ? [{ id: "export", label: serverPage ? "Export this page (CSV)" : "Export as CSV", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => exportTableCsv(output()) }]
             : []),
         ...(printable && status === "ready" && rows.length > 0
             ? [{ id: "print", label: serverPage ? "Print this page" : "Print", icon: _jsx(InlineIcon, { icon: iconPrinter }), onSelect: () => printTable(output()) }]
             : []),
-        // A spreadsheet: the template to fill, the file to bring back, and an export the server writes from what is on
-        // screen. Its own Import replaces the page's `onImport` hook.
+        // The sheet's own Import replaces the page's `onImport` hook.
         ...(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 }) },
-                ...(excel.endpoints.export
-                    ? [{ id: "excel-export", label: "Export to Excel", description: "Everything the search leaves, from the server", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => void exportExcel(excel.endpoints, exportQuery()) }]
-                    : []),
-            ]
+            ? add
+                ? []
+                : sheetItems
             : onImport
                 ? [{ id: "import", label: "Import", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: onImport }]
                 : []),
@@ -413,11 +542,9 @@ export function DataTable(props) {
         ...(!columnsMenu && table.hasColumnChanges()
             ? [{ id: "reset-columns", label: "Reset columns", description: "Their order, widths, and pins", icon: _jsx(InlineIcon, { icon: iconRestore }), separator: true, onSelect: () => table.resetColumns() }]
             : []),
+        ...(reloadable && reloadHidden ? [{ id: "reload", label: "Reload", icon: _jsx(InlineIcon, { icon: iconRefresh }), separator: true, onSelect: reload }] : []),
     ];
-    const optionEntries = optionItems.flatMap((action, index) => [
-        ...(action.separator && index > 0 ? [{ separator: true }] : []),
-        { value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled },
-    ]);
+    const optionEntries = menuEntries(optionItems);
     const pageSizePicker = _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable, onChange: value => table.setPageSize(value) });
     let body;
     if (status === "loading") {
@@ -426,55 +553,86 @@ export function DataTable(props) {
     else if (status === "error") {
         body = (_jsx(TableMessageRow, { span: span, tone: "danger", icon: iconAlertCircle, title: "The rows could not be loaded.", detail: state.error, children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: () => void table.reload({ quiet: false }), children: "Retry" }) }));
     }
-    else if (rows.length === 0 && query.search) {
-        body = (_jsx(TableMessageRow, { span: span, icon: iconSearchOff, title: `Nothing matches “${query.search}”.`, detail: "Check the spelling, or search for something shorter.", children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), onClick: () => {
-                    clearTimeout(searchTimer.current);
-                    setSearchGeneration(count => count + 1);
-                    table.setSearch("");
-                }, children: "Clear search" }) }));
+    else if (rows.length === 0 && (query.search || query.filters)) {
+        // What left no rows, the search, the filters or both, and a way to clear each.
+        const title = !query.filters ? `Nothing matches “${query.search}”.` : query.search ? `Nothing matches “${query.search}” with these filters.` : "No rows match the filters.";
+        const detail = !query.filters ? "Check the spelling, or search for something shorter." : query.search ? undefined : "Change them, or clear them.";
+        body = (_jsxs(TableMessageRow, { span: span, icon: query.search ? iconSearchOff : iconFilterOff, title: title, detail: detail, children: [query.search && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), onClick: () => {
+                        clearTimeout(searchTimer.current);
+                        flushSync(() => {
+                            setSearchGeneration(count => count + 1);
+                            table.setSearch("");
+                        });
+                        searchRef.current?.focus();
+                    }, children: "Clear search" })), query.filters && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconFilterOff }), onClick: () => {
+                        optionsRef.current?.focus();
+                        table.setFilters({});
+                    }, children: "Clear filters" }))] }));
     }
     else if (rows.length === 0) {
-        body = (_jsx(TableMessageRow, { span: span, icon: iconDatabase, title: emptyMessage, children: emptyAction }));
+        body = (_jsx(TableMessageRow, { span: span, icon: iconDatabase, title: emptyMessage, children: emptyAction === undefined ? addButton() : emptyAction }));
     }
     else {
         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, 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 }, key || index));
         });
     }
-    /* The pinned section above the page: the records the user pinned, folded open or shut, remembered on this device */
+    /* The sections above the page: the records pinned, the favourites, each folded open or shut, remembered on this device */
+    const pinsSection = pinnedRows ? { key: PINS_SECTION, label: pinnedLabel, icon: iconPin, rows: pinnedRows, loading: pinnedLoading, max: pinnedMax } : null;
     // A section with nothing in it and nothing on its way would be an empty heading, so it does not show at all.
-    const pins = pinnedRows && (pinnedRows.length > 0 || pinnedLoading) ? pinnedRows : null;
-    const togglePins = () => {
-        const next = !pinsOpen;
-        setPinsOpen(next);
+    const sections = [...(pinsSection ? [pinsSection] : []), ...(ownSections ?? [])].filter(section => section.rows.length > 0 || section.loading);
+    const toggleSection = (key) => {
+        const next = new Set(openSections);
+        if (!next.delete(key))
+            next.add(key);
+        setOpenSections(next);
         if (stateKey)
-            writeSaved(stateKey, { pinsOpen: next });
+            writeSaved(stateKey, { openSections: [...next], pinsOpen: undefined });
     };
-    const pinnedBody = pinsOpen &&
-        pins?.map((row, index) => {
+    const sectionRows = (section) => {
+        // A row with no marks of its own still wears the section's icon.
+        const own = [{ icon: section.icon, label: section.label }];
+        return section.rows.map((row, index) => {
             const key = table.keyOf(row);
             const selected = state.selected.has(key);
-            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, pinned: true, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, `pin:${key || index}`));
+            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));
         });
+    };
     const selectedRows = selecting ? [...state.selected.values()] : [];
+    // Select again by what the rows are: exactly the rows on the page that pass, or the whole page.
+    const pick = (label, test) => {
+        const matching = test ? rows.filter(test) : rows;
+        if (matching.length === 0)
+            return toast(`No row on this page is ${label.toLowerCase()}.`);
+        table.clearSelection();
+        table.select(matching, true);
+    };
+    const picks = selectBy?.length
+        ? [
+            { id: "page", label: "All on this page", icon: _jsx(InlineIcon, { icon: iconChecks }), onSelect: () => pick("on this page") },
+            ...selectBy.map((rule, index) => ({ id: `by-${index}`, label: rule.label, icon: rule.icon, separator: index === 0, onSelect: () => pick(rule.label, rule.test) })),
+        ]
+        : [];
     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", { className: "nx-table__bar", children: [toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [searchable ? (_jsx(TextBox, { 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 => {
-                                    if (event.key === "Enter") {
-                                        clearTimeout(searchTimer.current);
-                                        table.setSearch(event.currentTarget.value);
-                                    }
-                                } }, searchGeneration)) : (pageSizePicker), columnsMenu && columns.length > 1 && (_jsx(TableColumnsPanel, { 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, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: () => {
-                                    onReload?.();
-                                    void table.reload({ quiet: true });
-                                } })), 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, { size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), "aria-label": "More options", title: "More options", "data-table-options": true }) })), actions] })] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: fill ? undefined : { maxHeight: cssLength(maxHeight) }, children: _jsxs("table", { ref: tableRef, id: tableId, className: "nx-table__table", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-busy": status === "loading" || refreshing || undefined, children: [sized && _jsx(TableColumnGroup, { columns: views, widths: state.widths, frame: frame, colRefs: colRefs }), _jsxs("thead", { ref: headRef, className: "nx-table__thead", children: [_jsxs("tr", { className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, rowSpan: headRows, own: frame.index, number: "#", numbered: numbered, selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", children: _jsx("input", { ref: headerCheck, type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: allOnPage, disabled: rows.length === 0 || status !== "ready", "aria-label": "Select every row on this page", onChange: 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: [_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 => {
+                            if (event.key === "Enter") {
+                                clearTimeout(searchTimer.current);
+                                table.setSearch(event.currentTarget.value);
+                            }
+                        } }, searchGeneration))] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, picks: picks, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: fill ? undefined : { maxHeight: cssLength(maxHeight) }, children: _jsxs("table", { ref: tableRef, id: tableId, className: "nx-table__table", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-busy": status === "loading" || refreshing || undefined, children: [sized && _jsx(TableColumnGroup, { columns: views, widths: state.widths, frame: frame, colRefs: colRefs }), _jsxs("thead", { ref: headRef, className: "nx-table__thead", children: [_jsxs("tr", { className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, rowSpan: headRows, own: frame.index, number: "#", numbered: numbered, selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", children: _jsx("input", { ref: headerCheck, type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: allOnPage, disabled: rows.length === 0 || status !== "ready", "aria-label": "Select every row on this page", onChange: event => {
                                                                 lastToggled.current = null;
                                                                 if (table.selectPage(event.currentTarget.checked) > 0)
                                                                     warnFull();
-                                                            } }) })) })), 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))) })] }), pins && (_jsxs("tbody", { className: "nx-table__pins", "data-open": pinsOpen || undefined, children: [_jsx(TablePinnedHead, { span: span, label: pinnedLabel, count: pins.length, max: pinnedMax, loading: pinnedLoading, open: pinsOpen, onToggle: togglePins }), pinnedBody] })), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
+                                                            } }) })) })), 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) })] }));
 }
 /** 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) {
@@ -565,8 +723,40 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
     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 }))] }));
 }
+/** 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"];
+/** Whether the parts of the bar that are not meant to take a line of their own share one line. */
+function barFits(bar) {
+    let middle = null;
+    for (const part of Array.from(bar.children)) {
+        if (part.offsetWidth === 0 || getComputedStyle(part).flexBasis === "100%")
+            continue;
+        const at = part.offsetTop + part.offsetHeight / 2;
+        if (middle === null)
+            middle = at;
+        else if (Math.abs(at - middle) > 4)
+            return false;
+    }
+    return true;
+}
+/** Takes the squeeze off, then squeezes the bar one step at a time until it fits (or runs out of steps). */
+function squeezeBar(bar) {
+    bar.removeAttribute("data-squeeze");
+    for (const squeeze of BAR_SQUEEZES) {
+        if (barFits(bar))
+            return;
+        bar.setAttribute("data-squeeze", squeeze);
+    }
+}
 /** The bar over the column headings while rows are selected: the count, one button for the actions, and Clear. */
-function SelectionBar({ count, actions, rows, onClear, controls }) {
+/** Menu actions as a menu's entries: a separator wherever an action starts a group. */
+function menuEntries(actions) {
+    return actions.flatMap((action, index) => [
+        ...(action.separator && index > 0 ? [{ separator: true }] : []),
+        { value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled },
+    ]);
+}
+function SelectionBar({ count, actions, picks, rows, onClear, controls }) {
     const [running, setRunning] = useState(null);
     const [chosen, setChosen] = useState(undefined);
     const alive = useRef(true);
@@ -592,5 +782,5 @@ function SelectionBar({ count, actions, rows, onClear, controls }) {
     // Every action on the selected rows lives in one button: the one shown runs on a click, the menu holds the rest and
     // makes the one picked the button, the way a split button works everywhere else.
     const options = actions.map(action => ({ value: action.id, label: action.label, icon: action.icon, disabled: action.disabled }));
-    return (_jsxs("div", { className: "nx-table__selection", role: "toolbar", "aria-label": "Selected rows", "aria-controls": controls, children: [_jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] }), _jsx("div", { className: "nx-table__selection-actions", children: actions.length > 1 ? (_jsx(SplitButton, { options: options, value: current?.id, size: "sm", variant: current?.tone === "danger" ? "danger" : "primary", loading: running !== null, menuLabel: "More actions on the selected rows", className: "nx-table__mass", onValueChange: value => setChosen(value), onAction: value => run(actions.find(action => action.id === value)) })) : (actions.map(action => (_jsx(Button, { variant: "primary", size: "sm", icon: action.icon, loading: running === action.id, disabled: action.disabled, "data-action": action.id, title: action.label, className: "nx-table__mass", onClick: () => run(action), children: action.label }, action.id)))) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), className: "nx-table__selection-clear", disabled: running !== null, onClick: onClear, children: "Clear" })] }));
+    return (_jsxs("div", { className: "nx-table__selection", role: "toolbar", "aria-label": "Selected rows", "aria-controls": controls, children: [picks.length > 0 ? (_jsx(Menu, { items: menuEntries(picks), size: "sm", "aria-label": "Select rows", onSelect: value => picks.find(item => item.id === value)?.onSelect(), children: _jsx(Button, { variant: "ghost", size: "sm", iconEnd: _jsx(InlineIcon, { icon: iconChevronDown }), title: "Select by what the rows are", className: "nx-table__selection-pick", children: _jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] }) }) })) : (_jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] })), _jsx("div", { className: "nx-table__selection-actions", children: actions.length > 1 ? (_jsx(SplitButton, { options: options, value: current?.id, size: "sm", variant: current?.tone === "danger" ? "danger" : "primary", loading: running !== null, menuLabel: "More actions on the selected rows", className: "nx-table__mass", onValueChange: value => setChosen(value), onAction: value => run(actions.find(action => action.id === value)) })) : (actions.map(action => (_jsx(Button, { variant: "primary", size: "sm", icon: action.icon, loading: running === action.id, disabled: action.disabled, "data-action": action.id, title: action.label, className: "nx-table__mass", onClick: () => run(action), children: action.label }, action.id)))) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), className: "nx-table__selection-clear", disabled: running !== null, onClick: onClear, children: "Clear" })] }));
 }

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

@@ -1,3 +1,5 @@
+import { type Ref, type RefObject } from "react";
+import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
 import type { TableColumn, TablePinSide, 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. */
@@ -14,10 +16,12 @@ export interface TableColumnsPanelProps<TRow extends TableRow> {
     /** The whole order, by key, after a move. */
     onOrder: (keys: readonly string[]) => void;
     onReset?: () => void;
-    "aria-label"?: string;
+    /** What the panel opens under, such as the table's options button; Esc gives the focus back to it. */
+    anchor: RefObject<HTMLElement | null>;
+    ref?: Ref<PopoverPanelHandle>;
 }
 /**
- * The button that opens the Columns panel, and the panel itself: a checkbox per column, bands with their columns under
+ * The Columns panel, opened through its `open()` handle under `anchor`: a checkbox per column, bands with their columns under
  * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
  * on a click outside, and on Tab.
  *
@@ -25,4 +29,4 @@ export interface TableColumnsPanelProps<TRow extends TableRow> {
  * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
  *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
  */
-export declare function TableColumnsPanel<TRow extends TableRow>({ columns, hidden, pinned, reorderable, size, changed, onToggle, onOrder, onReset, "aria-label": ariaLabel, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;
+export declare function TableColumnsPanel<TRow extends TableRow>({ columns, hidden, pinned, reorderable, size, changed, onToggle, onOrder, onReset, anchor, ref, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;