@stealthscale/component-tables 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,867 @@
+import "@stealthscale/component-actions";
+import { Popover } from "@stealthscale/component-disclosure";
+import { Sortable, Table } from "@stealthscale/component-collections";
+import { Checkbox, NativeSelect, SearchInputProps } from "@stealthscale/component-forms";
+import { Column, ColumnFiltersState, ColumnHelper, DisplayColumnDef, ExpandedState, GroupingState, PaginationState, ReactTable, RowData, SortingState, TableOptions } from "@tanstack/react-table";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Pagination } from "@stealthscale/component-navigation";
+//#region src/data-table/features.d.ts
+/**
+ * Describes the props a column's editor receives: its name, its state, the draft, and the calls
+ * that change, save or abandon the draft.
+ */
+interface EditorProps {
+  /**
+   * Id of the reason a value was refused, which the control's description points at, or
+   * undefined while no value is refused.
+   */
+  readonly "aria-describedby": string | undefined;
+  /**
+   * Whether the table refused the last value saved.
+   */
+  readonly "aria-invalid": boolean;
+  /**
+   * Accessible name of the control, which names the column.
+   */
+  readonly "aria-label": string;
+  /**
+   * Abandons the edit: the draft is dropped and focus returns to the cell.
+   */
+  readonly cancel: () => void;
+  /**
+   * Saves the draft, or the value passed, through the column's check and the table's
+   * `onCellEdit`. A control that knows its value when a person picks it passes the value.
+   */
+  readonly commit: (next?: string) => void;
+  /**
+   * Id of the control, which takes focus when the editor opens.
+   */
+  readonly id: string;
+  /**
+   * Replaces the draft.
+   */
+  readonly setValue: (next: string) => void;
+  /**
+   * Size of the table, which the control takes so its text matches the cells'.
+   */
+  readonly size: "lg" | "md" | "sm";
+  /**
+   * The draft.
+   */
+  readonly value: string;
+}
+/**
+ * Describes how a grid edits a column's cells: the control and the check of a value.
+ */
+interface CellEdit {
+  /**
+   * Renders the control that edits a cell. A text field at the table's size unless stated.
+   */
+  readonly editor?: ((props: EditorProps) => ReactNode) | undefined;
+  /**
+   * Returns why a value cannot be saved, from its text and the row's record, or undefined for a
+   * value that can.
+   */
+  readonly validate?: ((text: string, record: RowData) => string | undefined) | undefined;
+}
+/**
+ * Describes what a column states about its cells beyond TanStack's column definition.
+ */
+interface ColumnMeta {
+  /**
+   * Returns the content of the detail row rendered under an expanded row, from the row's record.
+   * `DataTable.expandColumn` sets it.
+   */
+  readonly detail?: ((record: RowData) => ReactNode) | undefined;
+  /**
+   * How a grid edits the column's cells. A column without it is read-only.
+   */
+  readonly edit?: CellEdit | undefined;
+  /**
+   * Filter `DataTable.ColumnFilter` offers for the column: a text the values contain, a choice of
+   * the column's values, or a range of figures.
+   *
+   * @remarks
+   *   `text` writes a string, which TanStack's `includesString` reads, the function it picks for a
+   *   column of strings. `range` writes a minimum and a maximum, which `inNumberRange` reads, the
+   *   function it picks for a column of numbers. `select` writes the chosen values in an array, so
+   *   the column states `filterFn: "arrHas"`.
+   */
+  readonly filter?: "range" | "select" | "text" | undefined;
+  /**
+   * Whether the column is as narrow as its content while the table lays out its columns by their
+   * content, such as a column of checkboxes. The kit's select, expand and pin columns set it.
+   */
+  readonly fit?: boolean | undefined;
+  /**
+   * Name of the column in words, which the sort announcement reads. The header when it is a
+   * string, and the column's id otherwise, unless stated.
+   */
+  readonly label?: string | undefined;
+  /**
+   * Whether the column contains figures, aligned to the end in tabular figures.
+   */
+  readonly numeric?: boolean | undefined;
+  /**
+   * Whether the column's cells render as row headers, the `th` a screen reader names each row by.
+   */
+  readonly rowHeader?: boolean | undefined;
+  /**
+   * Whether the column's cells select their rows. While the column is visible each row states
+   * `aria-selected`. `DataTable.selectColumn` sets it.
+   */
+  readonly selects?: boolean | undefined;
+}
+/**
+ * Registers every stock feature, each row model, the stock functions and the column meta type.
+ */
+declare const FEATURES: {
+  cellSelectionFeature: import("@tanstack/react-table").TableFeature;
+  cellSpanningFeature: import("@tanstack/react-table").TableFeature;
+  columnFacetingFeature: import("@tanstack/react-table").TableFeature;
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnGroupingFeature: import("@tanstack/react-table").TableFeature;
+  columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+  columnPinningFeature: import("@tanstack/react-table").TableFeature;
+  columnResizingFeature: import("@tanstack/react-table").TableFeature;
+  columnSizingFeature: import("@tanstack/react-table").TableFeature;
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowAggregationFeature: import("@tanstack/react-table").TableFeature;
+  rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowPinningFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  aggregationFns: {
+    count: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+    extent: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, [(number | Date) | undefined, (number | Date) | undefined]>;
+    first: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown>;
+    last: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown>;
+    max: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, (number | Date) | undefined>;
+    mean: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number | undefined>;
+    median: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number | undefined>;
+    min: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, (number | Date) | undefined>;
+    sum: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+    unique: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, unknown[]>;
+    uniqueCount: import("@tanstack/react-table").AggregationFnDef<any, any, unknown, number>;
+  };
+  columnMeta: ColumnMeta;
+  expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  facetedMinMaxValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => undefined | [number, number];
+  facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
+  facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    arrHas: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludesAll: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    between: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    betweenInclusive: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    empty: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    endsWith: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equalsString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equalsStringSensitive: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    greaterThan: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    greaterThanOrEqualTo: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    includesStringSensitive: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    lessThan: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    lessThanOrEqualTo: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    notEmpty: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    startsWith: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  groupedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+};
+/**
+ * Describes the features every data table registers.
+ */
+type Features = typeof FEATURES;
+//#endregion
+//#region src/data-table/use-data-table.d.ts
+/**
+ * Describes the options of a data table: TanStack's table options without `features`, which the
+ * kit states.
+ *
+ * @typeParam Row - Type of one record.
+ */
+type DataTableOptions<Row extends RowData> = Omit<TableOptions<Features, Row>, "features">;
+/**
+ * Describes the table `useDataTable` returns, which `DataTable.Root` takes.
+ *
+ * @typeParam Row - Type of one record.
+ */
+type DataTableApi<Row extends RowData = RowData> = ReactTable<Features, Row>;
+/**
+ * Creates a data table and renders the calling component again on every change of its state.
+ *
+ * @typeParam Row - Type of one record.
+ * @param options - TanStack's table options without `features`. A stated option applies over the
+ *   kit's default.
+ * @returns The table, a new object after each change.
+ */
+declare function useDataTable<Row extends RowData>(options: DataTableOptions<Row>): DataTableApi<Row>;
+//#endregion
+//#region src/data-table/columns.d.ts
+/**
+ * Describes a column of a data table, which a column's actions receive.
+ */
+type TableColumn = Column<Features, RowData>;
+/**
+ * Describes the function that returns the controls a column's header renders beside its name, such
+ * as `DataTable.ColumnMenu`, from the column.
+ */
+type ColumnActions = (column: TableColumn) => ReactNode;
+/**
+ * Describes a sort direction in the words `aria-sort` takes.
+ */
+type Direction = "ascending" | "descending";
+//#endregion
+//#region src/data-table/column-filter.d.ts
+/**
+ * Describes the props of a column's filter: the column, the glyphs and the words.
+ */
+interface ColumnFilterProps {
+  /**
+   * Glyph inside a checked box of a `select` filter, such as a check mark.
+   */
+  readonly checkIndicator?: ReactNode | undefined;
+  /**
+   * Words of the button that clears the filter. "Clear" unless stated.
+   */
+  readonly clearLabel?: string | undefined;
+  /**
+   * Column the filter acts on, which `DataTable.Table`'s `columnActions` receives.
+   */
+  readonly column: TableColumn;
+  /**
+   * Glyph inside the button, such as a funnel.
+   */
+  readonly indicator: ReactNode;
+  /**
+   * Returns the accessible name of the button from the column's name and whether the column
+   * filters, and the panel's title while `active` is false. "Filter Amount" and "Filter Amount,
+   * active" unless stated.
+   */
+  readonly label?: ((column: string, active: boolean) => string) | undefined;
+  /**
+   * Label of a `range` filter's field for the maximum. "Maximum" unless stated.
+   */
+  readonly maxLabel?: string | undefined;
+  /**
+   * Label of a `range` filter's field for the minimum. "Minimum" unless stated.
+   */
+  readonly minLabel?: string | undefined;
+}
+/**
+ * Renders the column's filter, or nothing for a column without one.
+ *
+ * @param props - The column, the glyphs and the words.
+ * @returns The popover's root, or `null`.
+ */
+declare function ColumnFilter({ checkIndicator, clearLabel, column, indicator, label, maxLabel, minLabel }: ColumnFilterProps): null | ReactElement;
+//#endregion
+//#region src/data-table/column-helper.d.ts
+/**
+ * Creates a column helper typed with the kit's features.
+ *
+ * @typeParam Row - Type of one record.
+ * @returns TanStack's helper: `accessor`, `display`, `group` and `columns`.
+ */
+declare function createColumnHelper$1<Row extends RowData>(): ColumnHelper<Features, Row>;
+//#endregion
+//#region src/data-table/column-manager.d.ts
+/**
+ * Describes the props of the column manager: the glyphs, the words and the sortable kit's words.
+ */
+interface ColumnManagerProps extends Sortable.SortableWords {
+  /**
+   * Glyph inside a checked box, such as a check mark.
+   */
+  readonly checkIndicator?: ReactNode | undefined;
+  /**
+   * Glyph inside each row's handle, such as a grip.
+   */
+  readonly handleIndicator?: ReactNode | undefined;
+  /**
+   * Accessible name of the list. "Columns" unless stated.
+   */
+  readonly label?: string | undefined;
+  /**
+   * Words of the button that restores the order and the visibility. "Reset" unless stated.
+   */
+  readonly resetLabel?: string | undefined;
+}
+/**
+ * Renders the column manager.
+ *
+ * @param props - The glyphs, the words and the sortable kit's words.
+ * @returns The `div` around the list and the reset button.
+ */
+declare function ColumnManager({ checkIndicator, handleIndicator, label, resetLabel, ...words }: ColumnManagerProps): ReactElement;
+//#endregion
+//#region src/data-table/column-menu.d.ts
+/**
+ * Describes an action a column's menu lists.
+ */
+type ColumnMenuAction = "ascending" | "descending" | "end" | "grouped" | "hide" | "start" | "ungrouped" | "unpinned" | "unsorted";
+/**
+ * Describes the glyph each action's row leads with, by the action.
+ */
+type ColumnMenuIndicators = Readonly<Partial<Record<ColumnMenuAction, ReactNode>>>;
+/**
+ * Describes the props of a column's menu: the column, the button's glyph and name, and the glyph
+ * and the words of each action.
+ */
+interface ColumnMenuProps {
+  /**
+   * Glyph each action's row leads with, such as an arrow for a sort. A row without one starts with
+   * its words.
+   */
+  readonly actionIndicators?: ColumnMenuIndicators | undefined;
+  /**
+   * Words of the action that sorts the column ascending. "Sort ascending" unless stated.
+   */
+  readonly ascendingLabel?: string | undefined;
+  /**
+   * Column the menu acts on, which `DataTable.Table`'s `columnActions` receives.
+   */
+  readonly column: TableColumn;
+  /**
+   * Words of the action that sorts the column descending. "Sort descending" unless stated.
+   */
+  readonly descendingLabel?: string | undefined;
+  /**
+   * Words of the action that pins the column to the end. "Pin to end" unless stated.
+   */
+  readonly endLabel?: string | undefined;
+  /**
+   * Words of the action that groups the rows by the column. "Group by column" unless stated.
+   */
+  readonly groupedLabel?: string | undefined;
+  /**
+   * Words of the action that hides the column. "Hide column" unless stated.
+   */
+  readonly hideLabel?: string | undefined;
+  /**
+   * Glyph inside the button, such as three dots.
+   */
+  readonly indicator: ReactNode;
+  /**
+   * Returns the accessible name of the button from the column's name. "Options for Amount" unless
+   * stated.
+   */
+  readonly label?: ((column: string) => string) | undefined;
+  /**
+   * Words of the action that pins the column to the start. "Pin to start" unless stated.
+   */
+  readonly startLabel?: string | undefined;
+  /**
+   * Words of the action that stops grouping the rows by the column. "Ungroup" unless stated.
+   */
+  readonly ungroupedLabel?: string | undefined;
+  /**
+   * Words of the action that unpins the column. "Unpin" unless stated.
+   */
+  readonly unpinnedLabel?: string | undefined;
+  /**
+   * Words of the action that clears the column's sort. "Clear sort" unless stated.
+   */
+  readonly unsortedLabel?: string | undefined;
+}
+/**
+ * Renders the column's menu, or nothing for a column without an action that changes it.
+ *
+ * @param props - The column, the button's glyph and name, and the glyph and the words of each
+ *   action.
+ * @returns The menu's root, or `null`.
+ */
+declare function ColumnMenu(props: ColumnMenuProps): null | ReactElement;
+//#endregion
+//#region src/data-table/cross-tab.d.ts
+/**
+ * Computes a pivot's cross-tab from flat records: a cell for each row path and column value, a
+ * total for each row and each column value, and the grand total.
+ *
+ * @remarks
+ *   Every total is aggregated from the records, never from the cells. With `sum` the two agree, and
+ *   with `average` they do not: a row of one record of 10 and ninety-nine of 90 in two cells has
+ *   cell averages of 10 and 90, whose mean is 50, while its records average 89.2. `min` and `max`
+ *   differ the same way. A cell no record falls into is `null` with a count of zero, never `0`,
+ *   because no records and records that sum to zero are different facts. The rows follow the
+ *   first-seen order of each dimension, level by level, so the rows of an outer group are
+ *   adjacent. The column values follow their first-seen order.
+ */
+/**
+ * Describes a built-in aggregate: the sum, the mean, the least or the greatest of a cell's
+ * figures, or the number of its records.
+ */
+type PivotAggregate = "average" | "count" | "max" | "min" | "sum";
+/**
+ * Describes a function that returns one figure from a cell's records, or `null` for nothing to
+ * measure.
+ *
+ * @typeParam Row - Type of one record.
+ */
+type PivotAggregator<Row> = (records: readonly Row[]) => null | number;
+/**
+ * Describes a field of a record that a pivot reads.
+ *
+ * @typeParam Row - Type of one record.
+ */
+type PivotField<Row> = Extract<keyof Row, string>;
+/**
+ * Describes one cell of a cross-tab: its figure and the number of records it aggregates.
+ */
+interface PivotCell {
+  /**
+   * Number of records that fall into the cell, zero for a cell no record falls into.
+   */
+  readonly count: number;
+  /**
+   * Figure the aggregate returns, or `null` for a cell with nothing to measure.
+   */
+  readonly value: null | number;
+}
+/**
+ * Describes one value of the column dimension: the value and the total of its records.
+ */
+interface PivotColumn {
+  /**
+   * Cell aggregated from every record with the value.
+   */
+  readonly total: PivotCell;
+  /**
+   * Value of the column dimension, as text.
+   */
+  readonly value: string;
+}
+/**
+ * Describes one row of a cross-tab: its path through the row dimensions, a cell per column value
+ * and its total.
+ */
+interface PivotRow {
+  /**
+   * Cells in the order of the cross-tab's columns.
+   */
+  readonly cells: readonly PivotCell[];
+  /**
+   * Value of each row dimension as text, the outermost first.
+   */
+  readonly path: readonly string[];
+  /**
+   * Cell aggregated from every record of the row.
+   */
+  readonly total: PivotCell;
+}
+//#endregion
+//#region src/data-table/expand-column.d.ts
+/**
+ * Describes the options of the expand column: the detail, the names and the glyph.
+ *
+ * @typeParam Row - Type of one record.
+ */
+interface ExpandColumnOptions<Row extends RowData> {
+  /**
+   * Returns the content of the detail row from the record.
+   */
+  readonly detail: (record: Row) => ReactNode;
+  /**
+   * Name of the column, which only assistive technology reads. "Details" unless stated.
+   */
+  readonly header?: string | undefined;
+  /**
+   * Glyph inside each button, pointing to the inline end, such as a chevron.
+   */
+  readonly indicator?: ReactNode | undefined;
+  /**
+   * Returns the accessible name of a row's button from its record, such as "Details of Halden
+   * Freight".
+   */
+  readonly label: (record: Row) => string;
+}
+/**
+ * Creates the expand column, with the id `expand`.
+ *
+ * @typeParam Row - Type of one record.
+ * @param options - The detail, the names and the glyph.
+ * @returns The column's definition.
+ */
+declare function expandColumn<Row extends RowData>(options: ExpandColumnOptions<Row>): DisplayColumnDef<Features, Row>;
+//#endregion
+//#region src/data-table/page-size.d.ts
+/**
+ * Describes the props of the page size select: the sizes, the label, the glyph and the props of
+ * the native select's box.
+ */
+interface PageSizeProps extends Omit<NativeSelect.RootProps, "children"> {
+  /**
+   * Glyph at the select's end, such as a chevron.
+   */
+  readonly indicator?: ReactNode | undefined;
+  /**
+   * Words of the label before the select, such as "Rows per page", for a select outside a `Field`.
+   */
+  readonly label?: string | undefined;
+  /**
+   * Sizes a person chooses from, in the order the options list them.
+   */
+  readonly sizes: readonly number[];
+}
+/**
+ * Renders the select on the table's page size, after its label when one is given.
+ *
+ * @param props - The sizes, the label, the glyph and the props of the native select's box.
+ * @returns The row of the label and the select, or the native select's box alone.
+ */
+declare function PageSize({ indicator, label, sizes, ...props }: PageSizeProps): ReactElement;
+//#endregion
+//#region src/data-table/pagination.d.ts
+/**
+ * Describes the props of the pagination: the navigation pagination root's props without the
+ * count, the page and the page size, which the table's state supplies.
+ */
+type PaginationProps = Omit<Pagination.RootProps, "count" | "defaultPage" | "defaultPageSize" | "onPageChange" | "onPageSizeChange" | "page" | "pageSize">;
+/**
+ * Renders the pagination on the table's page state, which the kit exports as
+ * `DataTable.Pagination`.
+ *
+ * @param props - The navigation pagination root's props, its triggers, pages and page text
+ *   included.
+ * @returns The `nav` element.
+ */
+declare function TablePagination(props: PaginationProps): ReactElement;
+//#endregion
+//#region src/data-table/pin-column.d.ts
+/**
+ * Describes the options of the pin column: the region, the names and the glyph.
+ *
+ * @typeParam Row - Type of one record.
+ */
+interface PinColumnOptions<Row extends RowData> {
+  /**
+   * Name of the column, which only assistive technology reads. "Pin" unless stated.
+   */
+  readonly header?: string | undefined;
+  /**
+   * Glyph inside each toggle, such as a pin.
+   */
+  readonly indicator?: ReactNode | undefined;
+  /**
+   * Returns the accessible name of a row's toggle from its record, such as "Pin Halden Freight".
+   */
+  readonly label: (record: Row) => string;
+  /**
+   * Region a press pins a row to. `top` unless stated.
+   */
+  readonly position?: "bottom" | "top" | undefined;
+}
+/**
+ * Creates the pin column, with the id `pin`.
+ *
+ * @typeParam Row - Type of one record.
+ * @param options - The region, the names and the glyph.
+ * @returns The column's definition.
+ */
+declare function pinColumn<Row extends RowData>(options: PinColumnOptions<Row>): DisplayColumnDef<Features, Row>;
+//#endregion
+//#region src/data-table/pivot.d.ts
+/**
+ * Describes the options of a pivot: its dimensions, the measured field, the aggregate and the words
+ * of its headers and cells.
+ *
+ * @typeParam Row - Type of one record.
+ */
+interface PivotOptions<Row> {
+  /**
+   * Aggregate of each cell's records: `sum` unless stated, `average`, `min`, `max`, `count`, or a
+   * function of the records.
+   */
+  readonly aggregate?: PivotAggregate | PivotAggregator<Row> | undefined;
+  /**
+   * Field whose values become the columns, in the order they first appear.
+   */
+  readonly column: PivotField<Row>;
+  /**
+   * Options of `Intl.NumberFormat` every figure is written with, such as a currency.
+   */
+  readonly format?: Intl.NumberFormatOptions | undefined;
+  /**
+   * Header of each row dimension's column, by field. The field unless stated.
+   */
+  readonly headers?: Readonly<Partial<Record<PivotField<Row>, string>>> | undefined;
+  /**
+   * Words that only assistive technology reads in a cell with nothing to measure. "No value"
+   * unless stated.
+   */
+  readonly missingLabel?: string | undefined;
+  /**
+   * Fields whose values become the rows, the outermost first.
+   */
+  readonly rows: ReadonlyArray<PivotField<Row>>;
+  /**
+   * Header of the totals column and name of the footer row. "Total" unless stated.
+   */
+  readonly totalLabel?: string | undefined;
+  /**
+   * Whether the table renders the totals column and the footer row. `true` unless stated.
+   */
+  readonly totals?: boolean | undefined;
+  /**
+   * Field the built-in aggregates measure. `count` reads none.
+   */
+  readonly value?: PivotField<Row> | undefined;
+}
+/**
+ * Describes what `pivot` returns: the columns, the rows and the row ids `useDataTable` takes.
+ */
+type Pivot = Required<Pick<DataTableOptions<PivotRow>, "columns" | "data" | "getRowId">>;
+/**
+ * Returns the columns, rows and row ids of a pivot table of records, for `useDataTable`.
+ *
+ * @typeParam Row - Type of one record.
+ * @param records - The records to aggregate, filtered and translated by the caller.
+ * @param options - The dimensions, the measured field, the aggregate and the words.
+ * @returns The options that render the cross-tab.
+ */
+declare function pivot<Row>(records: readonly Row[], options: PivotOptions<NoInfer<Row>>): Pivot;
+//#endregion
+//#region src/data-table/root.d.ts
+/**
+ * Renders the `div` with the recipe's root class.
+ */
+declare const Column$1: import("@stealthscale/theme").StyledComponent<"div", {}>;
+/**
+ * Describes the props of the root: the table and the props of a `div`.
+ *
+ * @typeParam Row - Type of one record.
+ */
+interface RootProps<Row extends RowData> extends ComponentProps<typeof Column$1> {
+  /**
+   * Table `useDataTable` returns, which every part reads.
+   */
+  readonly table: DataTableApi<Row>;
+}
+/**
+ * Renders the column inside the table's provider.
+ *
+ * @typeParam Row - Type of one record.
+ * @param props - The table and the props of a `div`.
+ * @returns The `div` element inside the provider.
+ */
+declare function Root<Row extends RowData>({ table, ...props }: RootProps<Row>): ReactElement;
+//#endregion
+//#region src/data-table/search.d.ts
+/**
+ * Describes the props of the search field: the search input's props without its value, which the
+ * table's global filter supplies.
+ */
+type SearchProps = Omit<SearchInputProps, "defaultValue" | "onValueChange" | "value">;
+/**
+ * Renders the search field.
+ *
+ * @param props - The search input's props, its name included.
+ * @returns The `div` around the search input.
+ */
+declare function Search(props: SearchProps): ReactElement;
+//#endregion
+//#region src/data-table/select-column.d.ts
+/**
+ * Describes the options of the select column: the names of its boxes and their glyphs.
+ *
+ * @typeParam Row - Type of one record.
+ */
+interface SelectColumnOptions<Row extends RowData> {
+  /**
+   * Accessible name of the header's box, which selects every row.
+   */
+  readonly allLabel: string;
+  /**
+   * Glyph inside a box while some of the rows it selects are selected, such as a dash: the header's
+   * box, and a row's box while some rows under the row are.
+   */
+  readonly indeterminateIndicator?: ReactNode | undefined;
+  /**
+   * Glyph inside a checked box, such as a check mark.
+   */
+  readonly indicator?: ReactNode | undefined;
+  /**
+   * Returns the accessible name of a row's box from its record, such as "Select Halden Freight".
+   */
+  readonly label: (record: Row) => string;
+}
+/**
+ * Creates the select column, with the id `select`.
+ *
+ * @typeParam Row - Type of one record.
+ * @param options - The names of the boxes and their glyphs.
+ * @returns The column's definition.
+ */
+declare function selectColumn<Row extends RowData>(options: SelectColumnOptions<Row>): DisplayColumnDef<Features, Row>;
+//#endregion
+//#region src/data-table/bound.d.ts
+/**
+ * Describes the props of the collections table's scroller, which the frame takes.
+ */
+type ScrollerProps = Table.ScrollerProps;
+//#endregion
+//#region src/data-table/use-grid.d.ts
+/**
+ * Describes an edit a grid saves: the cell's column and row, the row's record and the text.
+ */
+interface CellEditEvent {
+  /**
+   * Id of the cell's column.
+   */
+  readonly columnId: string;
+  /**
+   * Record of the cell's row.
+   */
+  readonly record: unknown;
+  /**
+   * Id of the cell's row.
+   */
+  readonly rowId: string;
+  /**
+   * Text saved.
+   */
+  readonly value: string;
+}
+//#endregion
+//#region src/data-table/table.d.ts
+/**
+ * Describes the props of the table: its caption, its empty row, the glyphs of the sort and the
+ * toggles, the words of the announcements, the separators and the toggles, the window, whether it
+ * is a grid, and the scroller's props with the collections table's axes.
+ */
+interface TableProps extends Omit<ScrollerProps, "children" | "grid" | "viewportRef"> {
+  /**
+   * Caption rendered under the table, and the accessible name of the table and its scroll region.
+   */
+  readonly caption?: ReactNode | undefined;
+  /**
+   * Accessible name of the toggle of an open row in a table with levels. "Collapse" unless stated.
+   */
+  readonly collapseLabel?: string | undefined;
+  /**
+   * Returns the controls a column's header renders beside its name from the column, such as
+   * `DataTable.ColumnFilter` and `DataTable.ColumnMenu`.
+   */
+  readonly columnActions?: ColumnActions | undefined;
+  /**
+   * Returns the accessible name of a grid cell's editor from its column's name. "Edit Amount"
+   * unless stated.
+   */
+  readonly editLabel?: ((column: string) => string) | undefined;
+  /**
+   * Content of the full-width row rendered while the table has no rows. "No rows" unless stated.
+   */
+  readonly empty?: ReactNode | undefined;
+  /**
+   * Height in pixels a windowed table takes for a body row before it measures the first one, whose
+   * height it takes after. 40 unless stated.
+   */
+  readonly estimateSize?: number | undefined;
+  /**
+   * Glyph inside each toggle of a table with levels, pointing to the inline end, such as a
+   * chevron. The recipe turns it a quarter while its row is open.
+   */
+  readonly expandIndicator?: ReactNode | undefined;
+  /**
+   * Accessible name of the toggle of a closed row in a table with levels. "Expand" unless stated.
+   */
+  readonly expandLabel?: string | undefined;
+  /**
+   * Returns the announcement of the rows that match the filters, from their count and the count of
+   * every row. "12 of 40 rows" unless stated.
+   */
+  readonly filteredAnnouncement?: ((count: number, total: number) => string) | undefined;
+  /**
+   * Whether the table is a grid of cells a person selects, moves between with the arrow keys and
+   * copies, as in a spreadsheet. A table with levels remains a `treegrid`.
+   */
+  readonly grid?: boolean | undefined;
+  /**
+   * Words of the row under an open row whose sub-rows have not arrived, in a table with levels.
+   * "Loading…" unless stated.
+   */
+  readonly loadingLabel?: string | undefined;
+  /**
+   * Receives each edit a person saves in a grid cell of an editable column, whose text the caller
+   * writes into `data`.
+   */
+  readonly onCellEdit?: ((edit: CellEditEvent) => void) | undefined;
+  /**
+   * Runs when a windowed table's last row comes within `overscan` rows of the viewport, once per
+   * number of rows, so a caller loads the next rows.
+   */
+  readonly onEndReached?: (() => void) | undefined;
+  /**
+   * Number of rows a windowed table renders beyond each end of the viewport. 8 unless stated.
+   */
+  readonly overscan?: number | undefined;
+  /**
+   * Returns the accessible name of a column's resize separator. "Resize Amount" unless stated.
+   */
+  readonly resizeLabel?: ((column: string) => string) | undefined;
+  /**
+   * Returns a column's size in words. "150 pixels" unless stated.
+   */
+  readonly resizeValue?: ((size: number) => string) | undefined;
+  /**
+   * Returns the announcement of a sort from the column's name and the direction. "Sorted by
+   * Amount, descending" unless stated.
+   */
+  readonly sortedAnnouncement?: ((column: string, direction: Direction) => string) | undefined;
+  /**
+   * Glyph beside a sortable column's name, pointing up. The recipe turns it for a descending sort.
+   */
+  readonly sortIndicator?: ReactNode | undefined;
+  /**
+   * Returns whether a grid cell has a change the caller has not saved, from its row's and its
+   * column's ids. The cell marks its inline start and states the change for assistive technology.
+   */
+  readonly unsaved?: ((rowId: string, columnId: string) => boolean) | undefined;
+  /**
+   * Words of an unsaved change, which a cell with one renders for assistive technology. "Unsaved
+   * change" unless stated.
+   */
+  readonly unsavedLabel?: string | undefined;
+  /**
+   * Announcement of a table sorted by no column. "Not sorted" unless stated.
+   */
+  readonly unsortedAnnouncement?: string | undefined;
+  /**
+   * Whether the table renders only the body rows in or near the viewport, for thousands of rows.
+   * The caller gives the scroller a height, such as `style={{ maxBlockSize: "24rem" }}`.
+   */
+  readonly windowed?: boolean | undefined;
+}
+/**
+ * Renders the scroller with the table inside it.
+ *
+ * @param props - The caption, the empty row, the glyphs, the words, the window, whether the table
+ *   is a grid, and the scroller's props.
+ * @returns The scroller element.
+ */
+declare function Table$1(props: TableProps): ReactElement;
+declare namespace index_d_exports {
+  export { CellEdit, CellEditEvent, ColumnActions, ColumnFilter, ColumnFilterProps, ColumnFiltersState, ColumnManager, ColumnManagerProps, ColumnMenu, ColumnMenuAction, ColumnMenuIndicators, ColumnMenuProps, ColumnMeta, DataTableApi, DataTableOptions, EditorProps, ExpandColumnOptions, ExpandedState, GroupingState, PageSize, PageSizeProps, TablePagination as Pagination, PaginationProps, PaginationState, PinColumnOptions, Pivot, PivotAggregate, PivotAggregator, PivotCell, PivotColumn, PivotField, PivotOptions, PivotRow, Root, RootProps, Search, SearchProps, SelectColumnOptions, SortingState, Table$1 as Table, TableColumn, TableProps, createColumnHelper$1 as createColumnHelper, expandColumn, pinColumn, pivot, selectColumn, useDataTable };
+}
+//#endregion
+export { index_d_exports as DataTable };