nexus-shared 3.2.0 → 4.1.0

package/dist/Helpers/TableFilters.js

@@ -1,14 +1,15 @@
+import { EInputTypes } from "../Interfaces/FormInterfaces.js";
 import { addDays } from "./DateHelpers.js";
 import { fromLocalDateTime, toLocalDateTime, toUtcDateTime } from "./DateTimeHelpers.js";
 import { foldSearchText, searchWords } from "./DropdownHelpers.js";
-import { emptyInputValue, inputFieldName, inputValuesEqual, isEmptyInputValue } from "./InputParamsHelpers.js";
+import { emptyInputValue, inputFieldName, inputTypeName, inputValuesEqual, isEmptyInputValue } from "./InputParamsHelpers.js";
 import { columnValue, readPath, searchTextOf } from "./TableHelpers.js";
 /*
  * A data table's advanced filter, with no React: input params as filters, the values that filter, a client table's
  * test of a row, and the names a server takes.
  */
 // Inputs whose value cannot filter a row, and names a Nexus page request already uses for its paging.
-const UNSUPPORTED = new Set(["markdown", "rich-text", "tree", "tabular", "group", "password"]);
+const UNSUPPORTED = new Set([EInputTypes.Markdown, EInputTypes.RichText, EInputTypes.Tree, EInputTypes.Tabular, EInputTypes.Group, EInputTypes.Password, EInputTypes.Picture]);
 const RESERVED = new Set(["searchKeyword", "skipCount", "maxCount", "sorting", "sortType"]);
 const warned = new Set();
 function filterable(params) {
@@ -17,7 +18,7 @@ function filterable(params) {
         return true;
     if (!warned.has(params.name)) {
         warned.add(params.name);
-        console.warn(`DataTable: the filter "${params.name}" is ignored: ${reserved ? "a page request already sends that name" : `a ${params.type} input cannot filter rows`}.`);
+        console.warn(`DataTable: the filter "${params.name}" is ignored: ${reserved ? "a page request already sends that name" : `a ${inputTypeName(params.type)} input cannot filter rows`}.`);
     }
     return false;
 }
@@ -62,12 +63,12 @@ function cellTest(params, value, column, bound) {
     // A moment's day is the one the table shows it on; any other value is read as an ISO date.
     const dayOf = (cell) => (column?.format === "date-time" ? toLocalDateTime(cell)?.date : String(cell).slice(0, 10));
     switch (params.type) {
-        case "text":
-        case "email":
-        case "search":
-        case "tel":
-        case "url":
-        case "textarea": {
+        case EInputTypes.Text:
+        case EInputTypes.Email:
+        case EInputTypes.Search:
+        case EInputTypes.Tel:
+        case EInputTypes.Url:
+        case EInputTypes.TextArea: {
             // Every word, folded as the search folds it, in the text the cell shows (an option's label, Yes or No).
             const words = searchWords(String(value));
             return (cell, row) => {
@@ -75,31 +76,31 @@ function cellTest(params, value, column, bound) {
                 return words.every(word => text.includes(word));
             };
         }
-        case "checkbox":
-        case "switch":
-        case "radio":
+        case EInputTypes.CheckBox:
+        case EInputTypes.Switch:
+        case EInputTypes.Radio:
             return cell => cell === true || cell === "true" || cell === 1;
-        case "number":
-        case "slider": {
+        case EInputTypes.Number:
+        case EInputTypes.Slider: {
             const number = Number(value);
             return cell => (bound === "From" ? Number(cell) >= number : bound === "To" ? Number(cell) <= number : Number(cell) === number);
         }
-        case "range-slider": {
+        case EInputTypes.RangeSlider: {
             const [low, high] = value;
             return cell => Number(cell) >= low && Number(cell) <= high;
         }
-        case "date":
+        case EInputTypes.Date:
             return cell => dayOf(cell) === value;
-        case "date-range": {
+        case EInputTypes.DateRange: {
             const [from, to] = value;
             return cell => {
                 const day = dayOf(cell);
                 return day !== undefined && (!from || day >= from) && (!to || day <= to);
             };
         }
-        case "time":
+        case EInputTypes.Time:
             return cell => String(cell).slice(0, 5) === String(value).slice(0, 5);
-        case "date-time": {
+        case EInputTypes.DateTime: {
             // The same minute, however each side writes the moment ("…Z", "+05:45", or no zone for UTC).
             const minute = (moment) => toUtcDateTime(moment)?.slice(0, 16);
             const wanted = minute(value);
@@ -121,7 +122,7 @@ export function filterMatcher(columns, inputs, filters) {
     const tests = activeInputs(inputs, filters).map(([params, value]) => {
         const { name } = params;
         let column = columns.find(candidate => candidate.key === name);
-        const [, key, bound] = (!column && params.type === "number" && /^(.+)(From|To)$/.exec(name)) || [];
+        const [, key, bound] = (!column && params.type === EInputTypes.Number && /^(.+)(From|To)$/.exec(name)) || [];
         column ??= columns.find(candidate => candidate.key === key);
         const test = cellTest(params, value, column, column ? bound : undefined);
         return (row) => {
@@ -149,11 +150,11 @@ export function filterRequest(filters, inputs, columns, timeZone) {
             if (to)
                 request[`${name}Before`] = moments ? fromLocalDateTime(addDays(to, 1), "00:00", timeZone) : addDays(to, 1);
         };
-        if (params.type === "date-range")
+        if (params.type === EInputTypes.DateRange)
             days(...value);
-        else if (params.type === "date" && moments)
+        else if (params.type === EInputTypes.Date && moments)
             days(value, value);
-        else if (params.type === "range-slider")
+        else if (params.type === EInputTypes.RangeSlider)
             [request[`${name}From`], request[`${name}To`]] = value;
         else
             request[name] = value;

package/dist/Helpers/TableHelpers.d.ts

@@ -1,6 +1,6 @@
 import type { DatePreferences } from "../Interfaces/DateInterfaces.ts";
 import type { InputParams } from "../Interfaces/FormInterfaces.ts";
-import type { TableColumn, TableColumnOption, TableHeadBand, TableKey, TablePage, TablePinSide, TableQuery, TableRow, TableSort, TableViewColumn } from "../Interfaces/TableInterfaces.ts";
+import type { TableColumn, TableColumnOption, TableHeadBand, TableKey, TablePage, TablePinSide, TablePins, TableQuery, TableRow, TableSort, TableViewColumn } from "../Interfaces/TableInterfaces.ts";
 /** Rows per page when nothing says otherwise. */
 export declare const DEFAULT_PAGE_SIZE = 10;
 /** Choices of rows per page. */
@@ -26,12 +26,17 @@ export interface CellTextOptions {
     timeZone?: string;
     /** How numbers are written: a locale, or the person's settings (`numberLocale`, `useNumberLocale`). Default `en-US`. */
     locale?: string;
+    /** The currency of a `money` column without its own (`DataTableProps.currency`): "Rs.". */
+    currency?: string | null;
 }
 /**
  * A value as the cell writes it, in the column's format: "1,250.00", "Rs. 4,500.00", "12.5%", the date and time in the
- * user's settings, "Yes" or "No", an option's label. Empty values give "".
+ * user's settings, "Yes" or "No", an option's label. Empty values give "". `row` is the record, for a currency the
+ * column reads from it (`currency: row => row.currencyText`).
  */
-export declare function formatCellText<TRow extends TableRow>(column: TableColumn<TRow>, value: unknown, options?: CellTextOptions): string;
+export declare function formatCellText<TRow extends TableRow>(column: TableColumn<TRow>, value: unknown, options?: CellTextOptions, row?: TRow): string;
+/** A money column's currency: its own (a text, or read from the row), else the table's; "" for none. */
+export declare function columnCurrency<TRow extends TableRow>(column: TableColumn<TRow>, options?: CellTextOptions, row?: TRow): string;
 /** Text the search looks in: the column's `text`, an option's label, or the value as text (dates as ISO text). */
 export declare function searchTextOf<TRow extends TableRow>(column: TableColumn<TRow>, row: TRow): string;
 /** Compares two values of a column for sorting: numbers as numbers, text as a person reads it ("Room 9" before "Room 10"). */
@@ -76,6 +81,19 @@ export declare const TABLE_ACTIONS_COLUMN = "#actions";
 export declare const MIN_COLUMN_WIDTH = 56;
 /** Whether a key names one of the table's own columns, not a column of the page's. */
 export declare const isOwnColumn: (key: string) => boolean;
+/**
+ * The columns as the table arranges them before the user does: every `lead` column (a picture, a logo) first, the
+ * others in the order given. When the page pins other columns on the left, a lead column without a side of its own is
+ * pinned there too, so it still comes first. The same array when there is nothing to move.
+ */
+export declare function leadColumns<TRow extends TableRow>(columns: readonly TableColumn<TRow>[]): readonly TableColumn<TRow>[];
+/**
+ * The column whose text names a row when no `rowLabel` is given ("Delete Kathmandu?"): the first that is not a `lead`
+ * column, whose picture has no words.
+ */
+export declare function namingColumn<TRow extends TableRow>(columns: readonly TableColumn<TRow>[]): TableColumn<TRow> | undefined;
+/** The side a column is pinned to: the user's choice (`null` when they unpinned it), else its own `pinned`. */
+export declare function columnPin(column: Pick<TableColumn, "key" | "pinned">, pinned: TablePins): TablePinSide | null;
 /**
  * The columns in the order the user put them: the keys of `order` first, in that order, then any column it does not
  * name, where the columns were given. A key of a column that is gone is left out.
@@ -91,11 +109,27 @@ export interface ColumnRights {
 }
 export interface ViewColumnsOptions extends ColumnRights {
     order?: readonly string[];
-    pinned?: Readonly<Record<string, TablePinSide>>;
+    pinned?: TablePins;
     widths?: Readonly<Record<string, number>>;
     /** Pixels from the pinned side, measured from the columns before it. */
     offsets?: Readonly<Record<string, number>>;
+    /** Pinned columns that scroll for now, the table being too narrow for them (`releasedPins`): their `pin` is null. */
+    released?: ReadonlySet<string>;
 }
+/**
+ * The most of a table's width on screen that the columns staying in place may take: the numbers, the checkboxes and the
+ * actions, which always stay, and the pinned columns. Past it the pinned ones give way (`releasedPins`), so a phone
+ * keeps at least 40% of the table for the columns that scroll.
+ */
+export declare const PINNED_SHARE = 0.6;
+/**
+ * Which pinned columns scroll for now, the table being narrow: the pinned ones stay from the outer edge in - the left
+ * side first - while they and the columns that always stay (`frame`: the numbers and checkboxes, the actions; their
+ * width in pixels) take at most `share` of `view`, the width on screen; every one past that scrolls with the rest,
+ * and so do the ones inside it on the same side. `left` and `right`: each side's pinned columns with their widths,
+ * from the outer edge in. A table not laid out (`view` 0, in a closed tab) releases none.
+ */
+export declare function releasedPins(view: number, frame: number, left: readonly (readonly [string, number])[], right: readonly (readonly [string, number])[], share?: number): Set<string>;
 /**
  * The columns as the table draws them: in the user's order, with the pinned ones moved to their side (keeping their
  * order among themselves), each with its width, its distance from that edge, and what the user may do with it.

package/dist/Helpers/TableHelpers.js

@@ -72,14 +72,18 @@ function toNumber(value) {
 }
 /**
  * A value as the cell writes it, in the column's format: "1,250.00", "Rs. 4,500.00", "12.5%", the date and time in the
- * user's settings, "Yes" or "No", an option's label. Empty values give "".
+ * user's settings, "Yes" or "No", an option's label. Empty values give "". `row` is the record, for a currency the
+ * column reads from it (`currency: row => row.currencyText`).
  */
-export function formatCellText(column, value, options = {}) {
+export function formatCellText(column, value, options = {}, row) {
     const option = columnOption(column, value);
     if (option)
         return option.label;
     if (isEmpty(value))
         return "";
+    // A list of rows a record's details draw as a table (`column.table`): elsewhere, how many it holds.
+    if (column.table && Array.isArray(value))
+        return String(value.length);
     const { prefix = "", suffix = "" } = column;
     switch (column.format) {
         case "number":
@@ -90,7 +94,8 @@ export function formatCellText(column, value, options = {}) {
                 return String(value);
             const decimals = column.decimals ?? (column.format === "money" ? 2 : undefined);
             const text = formatNumber(number, { decimals, fixedDecimals: column.format === "money" || column.decimals !== undefined, grouping: true, locale: options.locale });
-            return `${prefix}${text}${column.format === "percent" && !suffix ? "%" : suffix}`;
+            const currency = column.format === "money" ? columnCurrency(column, options, row) : "";
+            return `${currency ? currency + " " : ""}${prefix}${text}${column.format === "percent" && !suffix ? "%" : suffix}`;
         }
         case "date":
             return formatDate(value, options.preferences) || String(value);
@@ -104,6 +109,11 @@ export function formatCellText(column, value, options = {}) {
             return `${prefix}${typeof value === "object" ? JSON.stringify(value) : String(value)}${suffix}`;
     }
 }
+/** A money column's currency: its own (a text, or read from the row), else the table's; "" for none. */
+export function columnCurrency(column, options = {}, row) {
+    const own = typeof column.currency === "function" ? (row ? column.currency(row) : undefined) : column.currency;
+    return (own ?? options.currency ?? "").trim();
+}
 /** Text the search looks in: the column's `text`, an option's label, or the value as text (dates as ISO text). */
 export function searchTextOf(column, row) {
     if (column.text)
@@ -225,6 +235,30 @@ export const TABLE_ACTIONS_COLUMN = "#actions";
 export const MIN_COLUMN_WIDTH = 56;
 /** Whether a key names one of the table's own columns, not a column of the page's. */
 export const isOwnColumn = (key) => key.startsWith("#");
+/**
+ * The columns as the table arranges them before the user does: every `lead` column (a picture, a logo) first, the
+ * others in the order given. When the page pins other columns on the left, a lead column without a side of its own is
+ * pinned there too, so it still comes first. The same array when there is nothing to move.
+ */
+export function leadColumns(columns) {
+    if (!columns.some(column => column.lead))
+        return columns;
+    const pinsLeft = columns.some(column => !column.lead && column.pinned === "left");
+    const leads = columns.filter(column => column.lead).map(column => (pinsLeft && !column.pinned ? { ...column, pinned: "left" } : column));
+    const arranged = [...leads, ...columns.filter(column => !column.lead)];
+    return arranged.every((column, index) => column === columns[index]) ? columns : arranged;
+}
+/**
+ * The column whose text names a row when no `rowLabel` is given ("Delete Kathmandu?"): the first that is not a `lead`
+ * column, whose picture has no words.
+ */
+export function namingColumn(columns) {
+    return columns.find(column => !column.lead) ?? columns[0];
+}
+/** The side a column is pinned to: the user's choice (`null` when they unpinned it), else its own `pinned`. */
+export function columnPin(column, pinned) {
+    return Object.hasOwn(pinned, column.key) ? (pinned[column.key] ?? null) : (column.pinned ?? null);
+}
 /**
  * The columns in the order the user put them: the keys of `order` first, in that order, then any column it does not
  * name, where the columns were given. A key of a column that is gone is left out.
@@ -256,18 +290,52 @@ export function moveColumnKey(keys, key, beforeKey) {
     rest.splice(at, 0, key);
     return rest;
 }
+/**
+ * The most of a table's width on screen that the columns staying in place may take: the numbers, the checkboxes and the
+ * actions, which always stay, and the pinned columns. Past it the pinned ones give way (`releasedPins`), so a phone
+ * keeps at least 40% of the table for the columns that scroll.
+ */
+export const PINNED_SHARE = 0.6;
+/**
+ * Which pinned columns scroll for now, the table being narrow: the pinned ones stay from the outer edge in - the left
+ * side first - while they and the columns that always stay (`frame`: the numbers and checkboxes, the actions; their
+ * width in pixels) take at most `share` of `view`, the width on screen; every one past that scrolls with the rest,
+ * and so do the ones inside it on the same side. `left` and `right`: each side's pinned columns with their widths,
+ * from the outer edge in. A table not laid out (`view` 0, in a closed tab) releases none.
+ */
+export function releasedPins(view, frame, left, right, share = PINNED_SHARE) {
+    const released = new Set();
+    if (!(view > 0))
+        return released;
+    const room = view * share;
+    let used = frame;
+    for (const side of [left, right]) {
+        let open = true;
+        for (const [key, width] of side) {
+            if (open && used + width <= room + 0.5)
+                used += width;
+            else {
+                open = false;
+                released.add(key);
+            }
+        }
+    }
+    return released;
+}
 /**
  * The columns as the table draws them: in the user's order, with the pinned ones moved to their side (keeping their
  * order among themselves), each with its width, its distance from that edge, and what the user may do with it.
  */
 export function viewColumns(columns, options = {}) {
-    const { order, pinned = {}, widths = {}, offsets = {}, reorderable = true, resizable = true } = options;
+    const { order, pinned = {}, widths = {}, offsets = {}, released, reorderable = true, resizable = true } = options;
     const groups = { left: [], middle: [], right: [] };
     for (const column of orderColumns(columns, order)) {
-        const pin = pinned[column.key] ?? column.pinned ?? null;
-        groups[pin === "left" ? "left" : pin === "right" ? "right" : "middle"].push({
+        const side = columnPin(column, pinned);
+        groups[side === "left" ? "left" : side === "right" ? "right" : "middle"].push({
             column,
-            pin,
+            // A pinned column the table is too narrow for keeps its side and scrolls with the rest.
+            pin: side && !released?.has(column.key) ? side : null,
+            side,
             offset: offsets[column.key] ?? 0,
             edge: false,
             resizable: resizable && column.resizable !== false,
@@ -275,11 +343,11 @@ export function viewColumns(columns, options = {}) {
             width: widths[column.key],
         });
     }
-    // The shadow that says columns scroll under a pinned side belongs to its last column.
-    const last = groups.left[groups.left.length - 1];
+    // The shadow that says columns scroll under a pinned side belongs to its last column that stays.
+    const last = groups.left.filter(view => view.pin).at(-1);
     if (last)
         last.edge = true;
-    const first = groups.right[0];
+    const first = groups.right.find(view => view.pin);
     if (first)
         first.edge = true;
     return [...groups.left, ...groups.middle, ...groups.right];

package/dist/Helpers/TableJoins.d.ts

@@ -29,6 +29,12 @@ export declare class TableJoins {
      * in - or that it is missing, on its way, or could not be read. A key nobody has asked for yet reads as on its way.
      */
     peek(name: string, key: string): JoinedState;
+    /**
+     * The record kept for `key` while its answer is fresh - within `lifetime`, and not marked old since (`expire`: a save
+     * there, a Reload) - at once and with no call; `undefined` otherwise. What names a value from a form's first draw
+     * without standing in for a record that may have changed since.
+     */
+    peekFresh(name: string, key: string, lifetime?: number): TableJoinedRecord | undefined;
     /**
      * Asks for every key the cache cannot answer fresh. The keys asked for in one moment - by every table and input on
      * the page - go in one call per source, after the moment is over; a key already on its way is not asked again.
@@ -36,6 +42,11 @@ export declare class TableJoins {
     request(source: TableJoinSource, keys: Iterable<string>): void;
     private queue;
     private send;
+    /**
+     * Records the page already holds, kept as if a lookup of `source` had just answered them: a form opened on a record
+     * whose parent the page shows - a tree's row - names that parent with no call.
+     */
+    remember(source: TableJoinSource, records: readonly TableJoinedRecord[]): void;
     /**
      * The records behind these keys, once they are in: what a picker shows for the values a form already holds. The
      * calls and the answers are the ones the tables share, so a form opened from a table costs nothing more.
@@ -45,6 +56,8 @@ export declare class TableJoins {
      * A whole list kept under `name` - a picker's options - loaded once per lifetime; a second ask while it loads waits for
      * the same call. A list that failed is not kept, so the next ask tries again.
      */
+    /** The list kept under `name` while it is fresh, without loading it; `undefined` when there is none yet, or it aged. */
+    peekList(name: string, lifetime?: number): readonly TableJoinedRecord[] | undefined;
     list(name: string, load: (signal: AbortSignal) => Promise<readonly TableJoinedRecord[]>, lifetime?: number): Promise<readonly TableJoinedRecord[]>;
     /**
      * Marks answers as old - a source's, some of its keys, or every one - after the records behind them may have changed:

package/dist/Helpers/TableJoins.js

@@ -65,6 +65,15 @@ export class TableJoins {
             return FAILED;
         return LOADING;
     }
+    /**
+     * The record kept for `key` while its answer is fresh - within `lifetime`, and not marked old since (`expire`: a save
+     * there, a Reload) - at once and with no call; `undefined` otherwise. What names a value from a form's first draw
+     * without standing in for a record that may have changed since.
+     */
+    peekFresh(name, key, lifetime = JOIN_LIFETIME) {
+        const entry = this.sources.get(name)?.entries.get(key);
+        return entry?.record && Date.now() - entry.at < lifetime ? entry.record : undefined;
+    }
     /**
      * Asks for every key the cache cannot answer fresh. The keys asked for in one moment - by every table and input on
      * the page - go in one call per source, after the moment is over; a key already on its way is not asked again.
@@ -136,6 +145,26 @@ export class TableJoins {
             this.notify();
         }
     }
+    /**
+     * Records the page already holds, kept as if a lookup of `source` had just answered them: a form opened on a record
+     * whose parent the page shows - a tree's row - names that parent with no call.
+     */
+    remember(source, records) {
+        const cache = this.cacheOf(source.name);
+        const keyField = source.key ?? "id";
+        const at = Date.now();
+        let changed = false;
+        for (const record of records) {
+            const key = record[keyField];
+            if (key === undefined || key === null || key === "")
+                continue;
+            cache.entries.set(String(key), { record, at });
+            cache.failedAt.delete(String(key));
+            changed = true;
+        }
+        if (changed)
+            this.notify();
+    }
     /**
      * The records behind these keys, once they are in: what a picker shows for the values a form already holds. The
      * calls and the answers are the ones the tables share, so a form opened from a table costs nothing more.
@@ -157,6 +186,11 @@ export class TableJoins {
      * A whole list kept under `name` - a picker's options - loaded once per lifetime; a second ask while it loads waits for
      * the same call. A list that failed is not kept, so the next ask tries again.
      */
+    /** The list kept under `name` while it is fresh, without loading it; `undefined` when there is none yet, or it aged. */
+    peekList(name, lifetime = JOIN_LIFETIME) {
+        const kept = this.lists.get(name);
+        return kept?.rows && Date.now() - kept.at < lifetime ? kept.rows : undefined;
+    }
     list(name, load, lifetime = JOIN_LIFETIME) {
         const kept = this.lists.get(name);
         if (kept?.pending)

package/dist/Helpers/TableStore.d.ts

@@ -1,5 +1,5 @@
 import type { InputParams } from "../Interfaces/FormInterfaces.ts";
-import type { TableColumn, TableKey, TableLoader, TablePaging, TablePinSide, TableRow, TableSort, TableState } from "../Interfaces/TableInterfaces.ts";
+import type { TableColumn, TableKey, TableLoader, TablePaging, TablePinSide, TablePins, TableRow, TableSort, TableState } from "../Interfaces/TableInterfaces.ts";
 /** What the table component tells its store on every render. */
 export interface TableStoreOptions<TRow extends TableRow = TableRow> {
     columns: readonly TableColumn<TRow>[];
@@ -10,6 +10,8 @@ export interface TableStoreOptions<TRow extends TableRow = TableRow> {
     paging: TablePaging;
     maxSelection?: number;
     onSelectionChange?: (rows: TRow[]) => void;
+    /** After the picked row changes: another row, its newest copy, or none (`DataTable` `onPick`). */
+    onPickChange?: (row: TRow | null) => void;
     /** The advanced filter's inputs, as the table prepared them (`asFilterInput`). */
     filterInputs?: readonly InputParams[];
 }
@@ -63,14 +65,19 @@ export declare class TableStore<TRow extends TableRow = TableRow> {
     /** Takes the component's props. Tells nobody: the component calls it while rendering. */
     configure(options: TableStoreOptions<TRow>): void;
     private set;
-    /** Puts back what was saved on this device (page size, sort, columns), before the first load. Tells nobody. */
+    /**
+     * Puts back what was saved on this device (page size, sort, columns): before the first load, telling nobody, or, with
+     * `notify`, over a table already shown (another key's settings), its rows shown again in them on the first page.
+     */
     restore(saved: {
         pageSize?: number;
         sort?: TableSort | null;
         hidden?: readonly string[];
         order?: readonly string[];
         widths?: Readonly<Record<string, number>>;
-        pinned?: Readonly<Record<string, TablePinSide>>;
+        pinned?: TablePins;
+    }, options?: {
+        notify?: boolean;
     }): void;
     /** Shows these rows: every row there is. The table searches, sorts, and pages them. */
     setRows(rows: readonly TRow[]): void;
@@ -126,6 +133,19 @@ export declare class TableStore<TRow extends TableRow = TableRow> {
     private refreshSelected;
     /** A client table forgets selected rows that are gone from its rows. */
     private dropMissingSelection;
+    /**
+     * Picks a row (`DataTable` `onPick`), or none: the one row whose own records the page shows beside the table. It
+     * follows the record from then on - its newest copy after an upsert, none once it is removed or gone after a load -
+     * and every change is told to `onPickChange`.
+     */
+    pick(row: TRow | null): void;
+    /**
+     * The picked row as these rows hold it: its newest copy, or none when they are every row there is (`whole`, a client
+     * table) and it is not among them. A server page without it keeps it, since it may be on another page.
+     */
+    private followPicked;
+    /** Tells the page when a change left another copy of the picked row, or none. */
+    private pickedChanged;
     setBusy(keys: readonly TableKey[], on: boolean): void;
     flash(keys: readonly TableKey[]): void;
     setHidden(key: string, hidden: boolean): void;
@@ -139,7 +159,11 @@ export declare class TableStore<TRow extends TableRow = TableRow> {
     setWidths(widths: Readonly<Record<string, number>>): void;
     /** Back to widths that follow the content. */
     clearWidths(): void;
-    /** Keeps a column on the left or the right while the others scroll, or lets it scroll again (`null`). */
+    /**
+     * Keeps a column on the left or the right while the others scroll, or lets it scroll again (`null`). A choice equal
+     * to the column's own `pinned` is no change to remember; unpinning a column its params pin is remembered as `null`,
+     * which wins over them.
+     */
     setPinned(key: string, side: TablePinSide | null): void;
     /** Every column back as its params say: the given order, widths from the content, no pins, and the hidden ones. */
     resetColumns(): void;