@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/table/DataTable.d.ts

@@ -0,0 +1,135 @@
+import type { Tone } from "../../foundations/types.js";
+import { type RowAction } from "./RowActions.js";
+import { type SortState } from "./Table.js";
+import { type ReactNode } from "react";
+/** How a column is aggregated when its rows are pulled together into a group.
+ *
+ *  **`count` is the default and it is the right one almost always**: summing
+ *  identifiers or averaging file sizes produces numbers that look like data and
+ *  mean nothing. An aggregate has to be chosen on purpose. */
+export type Aggregate = "count" | "sum" | "mean" | "min" | "max" | "unique";
+export interface DataColumn<T> {
+    id: string;
+    header: string;
+    /** Qué campo del MODELO muestra esta columna, cuando no se llama igual que
+     *  él: «filas» muestra `row_count`. Lo lee `columnsFromModel` para no volver
+     *  a agregar, en crudo, un campo que esta columna ya contesta. */
+    field?: string;
+    /** The raw value: this is what sorting and grouping run on. */
+    value: (row: T) => string | number | boolean | null;
+    /** How it is drawn. Without this the raw value is drawn. */
+    cell?: (row: T) => ReactNode;
+    /** A column of CODES — a SKU, a hash, a key — set in the monospaced face. Numbers do not
+     *  need it: they align with tabular figures in the same face as the rest of the row. */
+    mono?: boolean;
+    /**
+     * Cómo se LEE la columna donde no se puede dibujar: la planilla, que es una
+     * cuadrícula de texto y números y no puede recibir un nodo.
+     *
+     * Context: sin esto, la planilla caía a `value`, que es la clave de ORDEN y
+     * no lo que una persona lee. La columna «estado» de Facturas mostraba
+     * `posted` y `paid` —los valores del contrato— en vez de «publicada» y
+     * «pagada», que es lo que dice la ficha de al lado en la tabla. Dos
+     * presentaciones del mismo conjunto diciendo cosas distintas.
+     */
+    text?: (row: T) => string;
+    /** Paints the BACKGROUND of the cell, row by row. It is what turns a table
+     *  into something you look at: «this amount is out of range», «this value was
+     *  imputed by the engine». Returning `undefined` leaves the cell unpainted,
+     *  which is the normal case — a table with everything colored highlights
+     *  nothing. */
+    tone?: (row: T) => Tone | undefined;
+    /** Why it is painted, on hover. */
+    note?: (row: T) => string | undefined;
+    numeric?: boolean;
+    width?: number;
+    aggregate?: Aggregate;
+    sortable?: boolean;
+    /** Odoo: fields without `optional` cannot leave the view. When true, the
+     *  column appears in the columns submenu and can be hidden. */
+    optional?: boolean;
+    /** Odoo `optional="hide"`: start off. Only with `optional`. */
+    defaultHidden?: boolean;
+    /**
+     * Edit this cell IN the list, through a small popover anchored to it: the salesperson of
+     * an invoice, its due date, its stage. The cell becomes a button (with a pencil on hover
+     * and focus) and `render` draws the editor inside the popover.
+     *
+     * Context: one function and not a kind of editor, because the editor is the system's own
+     * control — a `Picker`, a `Calendar`, a `Select` — written by whoever knows the field.
+     * The editor commits with its own gesture and then calls `done`, which closes the popover
+     * and returns the focus to the cell. Escape and a click outside close without committing.
+     * Do not draw links in an editable column: the cell is already a button.
+     */
+    edit?: {
+        render: (row: T, done: () => void) => ReactNode;
+        /** Which rows can be changed — a paid invoice cannot. All of them by default. */
+        when?: (row: T) => boolean;
+    };
+}
+/**
+ * El agregado de una columna sobre un conjunto de filas.
+ *
+ * Vive afuera del componente porque lo preguntan tres lugares: el pie de la
+ * tabla, la banda de un montón en la planilla, y la línea de un informe armado
+ * a partir de los montones. Tres implementaciones de «cuánto suma esto» es que
+ * el pie diga un número y el montón otro.
+ *
+ * `null` cuando la columna no declaró agregado, no es numérica, o no hay ningún
+ * número que sumar — que es distinto de sumar cero.
+ */
+export declare function aggregateOf<T extends object>(column: DataColumn<T>, rows: readonly T[]): number | null;
+/**
+ * UN NIVEL, como lo necesita una tabla.
+ *
+ * La identidad es la del NIVEL y no la del campo: un mismo `registered_at`
+ * puesto por mes y por día son dos cortes, y con el nombre del campo serían el
+ * mismo repetido. `keyOf` da la clave del motor —la misma que arman las otras
+ * presentaciones, así que lo plegado vale para todas— y `labelOf` la lee en el
+ * idioma activo.
+ */
+export type GroupColumn<T> = {
+    /** La identidad del nivel: `levelKey(level)`. */
+    id: string;
+    /** Cómo se llama el corte, a la izquierda del valor. Sin él, «Septiembre» no
+     *  dice si es cuándo se registró o cuándo se corrió. */
+    label: string;
+    /** A qué montón va cada fila en este nivel. */
+    keyOf: (item: T) => string;
+    /** Cómo se lee esa clave. */
+    labelOf: (key: string) => string;
+};
+export declare function DataTable<T extends object>({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals, collapsed, onGroupToggle, }: {
+    data: readonly T[];
+    columns: readonly DataColumn<T>[];
+    getRowId: (row: T) => string;
+    sort?: SortState | null;
+    onSortChange?: (next: SortState | null) => void;
+    /**
+     * Los NIVELES por los que se parte, de afuera hacia adentro. Vacío o ausente
+     * es «sin agrupar».
+     *
+     * Varios, porque agrupar no es una pregunta: «por cliente y después por
+     * mes» es un árbol y no una lista de montones. El orden ES la jerarquía.
+     */
+    levels?: readonly GroupColumn<T>[];
+    selected?: ReadonlySet<string>;
+    onSelectedChange?: (next: Set<string>) => void;
+    height?: number;
+    onRowClick?: (row: T) => void;
+    /** What you do to ONE row without going into it. They are drawn hidden and
+     *  show up on the hovered row — see `RowActions.tsx`. */
+    rowActions?: (row: T) => readonly RowAction[];
+    /** The footer with the aggregate of every column that declared one.
+     *
+     *  Context: up to now the aggregate only existed INSIDE a group, so an
+     *  ungrouped table had no way to say how much it adds up to — and «how much
+     *  does it add up to» is the question that makes a table of amounts a report
+     *  and not a list. It stays pinned at the bottom: in a four-hundred-row table,
+     *  a total you have to scroll to is a total nobody sees. */
+    totals?: boolean;
+    /** Group keys that are closed. Same keys as `ListGroup.collapsed`, so the
+     *  table does not reopen what rows just folded. */
+    collapsed?: readonly string[];
+    onGroupToggle?: (key: string) => void;
+}): import("react").JSX.Element;

package/dist/primitives/table/DataTable.js

@@ -0,0 +1,244 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { pathKey } from "../../foundations/grouping.js";
+import { CellEditor } from "./CellEditor.js";
+import { RowActions } from "./RowActions.js";
+import { SelectBox, Table, Td, Th, THead, Tr, } from "./Table.js";
+import { aggregationFns, columnGroupingFeature, createColumnHelper, createExpandedRowModel, createGroupedRowModel, createSortedRowModel, rowAggregationFeature, rowExpandingFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from "@tanstack/react-table";
+import { ChevronRight } from "lucide-react";
+import { useMemo } from "react";
+function aggregateLabel(copy, kind, v) {
+    const n = v.toLocaleString(copy.locale);
+    switch (kind) {
+        case "sum":
+            return n;
+        case "count":
+            return `${n} ${v === 1 ? copy.table.row : copy.table.rows}`;
+        case "mean":
+            return fillCopy(copy.table.mean, {
+                value: v.toLocaleString(copy.locale, { maximumFractionDigits: 2 }),
+            });
+        case "min":
+            return fillCopy(copy.table.min, { value: n });
+        case "max":
+            return fillCopy(copy.table.max, { value: n });
+        case "unique":
+            return fillCopy(copy.table.distinct, { value: n });
+    }
+}
+function raw(copy, v) {
+    if (v === null)
+        return "—";
+    if (typeof v === "number")
+        return v.toLocaleString(copy.locale);
+    if (typeof v === "boolean")
+        return v ? copy.table.yes : copy.table.no;
+    return v;
+}
+/** What a cell draws: its `cell`, or the raw value. */
+function drawCell(copy, column, row) {
+    return column.cell === undefined ? raw(copy, column.value(row)) : column.cell(row);
+}
+/* The features are declared once. In v9 they are opt-in: asking only for what
+   is used is what keeps the bundle down to what is actually needed. */
+const FEATURES = tableFeatures({
+    rowSortingFeature,
+    columnGroupingFeature,
+    rowExpandingFeature,
+    // `rowAggregationFeature` is what enables `aggregationFn` on a column.
+    // Without it, grouping pulls rows together but each column does not know what
+    // to show in the group row — which is half of the reason for grouping.
+    rowAggregationFeature,
+    sortedRowModel: createSortedRowModel(),
+    groupedRowModel: createGroupedRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    sortFns,
+    aggregationFns,
+});
+/**
+ * El agregado de una columna sobre un conjunto de filas.
+ *
+ * Vive afuera del componente porque lo preguntan tres lugares: el pie de la
+ * tabla, la banda de un montón en la planilla, y la línea de un informe armado
+ * a partir de los montones. Tres implementaciones de «cuánto suma esto» es que
+ * el pie diga un número y el montón otro.
+ *
+ * `null` cuando la columna no declaró agregado, no es numérica, o no hay ningún
+ * número que sumar — que es distinto de sumar cero.
+ */
+export function aggregateOf(column, rows) {
+    if (column.aggregate === undefined || column.numeric !== true)
+        return null;
+    const numbers = rows
+        .map((row) => column.value(row))
+        .filter((value) => typeof value === "number");
+    if (numbers.length === 0)
+        return null;
+    switch (column.aggregate) {
+        case "sum":
+            return numbers.reduce((a, b) => a + b, 0);
+        case "mean":
+            return numbers.reduce((a, b) => a + b, 0) / numbers.length;
+        case "min":
+            return Math.min(...numbers);
+        case "max":
+            return Math.max(...numbers);
+        case "unique":
+            return new Set(numbers).size;
+        default:
+            return numbers.length;
+    }
+}
+export function DataTable({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals = false, collapsed, onGroupToggle, }) {
+    const copy = useUiCopy();
+    // In v9 the helper is bound to the features AND to the data type: that is what
+    // makes the compiler know about `enableGrouping` only if we ask for the
+    // feature.
+    const helper = useMemo(() => createColumnHelper(), []);
+    const defs = useMemo(() => [
+        ...columns.map((c) => helper.accessor((row) => c.value(row), {
+            id: c.id,
+            header: c.header,
+            enableSorting: c.sortable !== false,
+            /* Ninguna columna agrupa. Lo que parte el conjunto son los NIVELES, y
+               cada uno entra como una columna suya —abajo— que existe sólo para
+               eso: nadie la dibuja y nadie la ordena. */
+            enableGrouping: false,
+            aggregationFn: c.aggregate ?? "count",
+        })),
+        /* Una columna por NIVEL, no por campo. Es la única forma de que «por mes y
+           adentro por día» sea dos cortes: con el id de la columna, los dos niveles
+           de `registered_at` eran el mismo id repetido, y un mismo id no se puede
+           agrupar dos veces.
+  
+           Y la clave la pone el nivel, no la columna: `value` es la clave de
+           ORDEN —para una fecha, los milisegundos— y agrupar por ella deja un
+           montón por instante, con «1789294903895» de rótulo. Acá entra la misma
+           clave que arman las otras cinco presentaciones, así que los montones de
+           la tabla son LOS MISMOS y lo plegado vale para todas. */
+        ...(levels ?? []).map((level) => helper.accessor((row) => level.keyOf(row), {
+            id: level.id,
+            header: level.label,
+            enableSorting: false,
+            enableGrouping: true,
+        })),
+    ], [columns, helper, levels]);
+    /* The assertion, and why it is safe: `ColumnDef` is INVARIANT in its value
+       type (`in out TValue`), so an array of columns with concrete values is not
+       assignable to the one of `unknown` even though each one on its own is. The
+       library solves this with `helper.columns([...])`, which needs a literal
+       tuple — and here the columns come out of a `map` over what the consumer
+       declared, which is not literal.
+  
+       It is safe because that value is only used by the library to sort and
+       group; it is never read with its type from our side. What gets drawn comes
+       from `c.cell(row)` or from `c.value(row)`, both typed against `T`. */
+    const table = useTable({
+        features: FEATURES,
+        data,
+        columns: defs,
+        getRowId: (row) => getRowId(row),
+        state: {
+            sorting: sort === null || sort === undefined
+                ? []
+                : [{ id: sort.key, desc: sort.direction === "desc" }],
+            grouping: (levels ?? []).map((level) => level.id),
+        },
+        // Groups start open: grouping and then having to open each group is two
+        // gestures for what the user asked for in one.
+        initialState: { expanded: true },
+    });
+    const rows = table.getRowModel().rows;
+    /**
+     * The PATH of a row: the values of every group it hangs from, outermost
+     * first.
+     *
+     * The identity of a pile is its route and not its value, because with several
+     * levels two piles can be called the same — «2026-09» inside «Ferretería Sur» and
+     * «2026-09» inside «Distribuidora Andina» are different piles, and folding one must not
+     * fold the other. It walks up because that is where TanStack keeps the
+     * ancestry; a leaf contributes nothing, since `groupingColumnId` is only set
+     * on grouped rows.
+     */
+    function pathOf(row) {
+        const path = [];
+        let node = row;
+        while (node !== undefined) {
+            const columnId = node.groupingColumnId;
+            if (columnId !== undefined && columnId !== null) {
+                path.unshift(String(node.getGroupingValue(columnId) ?? "—"));
+            }
+            node = node.getParentRow();
+        }
+        return path;
+    }
+    /* TanStack keeps every leaf in the model when `expanded: true`. Folding is
+       ours: the same path keys as the rows presentation, so switching present
+       does not reopen a group.
+  
+       It checks EVERY ancestor and not just the parent. With one level they were
+       the same thing; with several, folding the outer pile has to take the inner
+       ones with it — otherwise closing «Ferretería Sur» leaves its months on screen,
+       orphaned under a header that says it is closed. */
+    const drawn = collapsed === undefined
+        ? rows
+        : rows.filter((row) => {
+            let node = row.getParentRow();
+            while (node !== undefined) {
+                if (collapsed.includes(pathKey(pathOf(node))))
+                    return false;
+                node = node.getParentRow();
+            }
+            return true;
+        });
+    const selecting = onSelectedChange !== undefined;
+    const leaves = useMemo(() => rows.filter((r) => r.subRows.length === 0), [rows]);
+    /* The aggregates are computed by the component and not by TanStack: its
+       `aggregationFn` lives in the GROUP model, and a footer exists precisely when
+       there are no groups. */
+    const footer = useMemo(() => (totals ? columns.map((c) => aggregateOf(c, data)) : null), [totals, columns, data]);
+    const all = leaves.length > 0 && leaves.every((r) => selected?.has(r.id) === true);
+    const some = leaves.some((r) => selected?.has(r.id) === true);
+    function toggle(id, on) {
+        const n = new Set(selected ?? []);
+        if (on)
+            n.add(id);
+        else
+            n.delete(id);
+        onSelectedChange?.(n);
+    }
+    return (_jsxs(Table, { height: height, children: [_jsxs(THead, { children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves.map((r) => r.id)) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : _jsx(Th, { width: 1, children: "" })] }), _jsx("tbody", { children: drawn.map((row) => {
+                    const isGroup = row.subRows.length > 0;
+                    if (isGroup) {
+                        const path = pathOf(row);
+                        const key = pathKey(path);
+                        const depth = path.length - 1;
+                        const id = row.groupingColumnId ?? undefined;
+                        const level = levels?.find((one) => one.id === id);
+                        /* La CLAVE del montón —la del motor— y el rótulo, que lo pone el
+                           nivel: son dos textos y sólo el segundo cambia con el idioma. */
+                        const value = path[depth] ?? key;
+                        const open = collapsed === undefined
+                            ? row.getIsExpanded()
+                            : collapsed.includes(key) !== true;
+                        return (
+                        /* The group row: it spans the whole width, says which value it
+                           groups by and how many are inside. The counter is what makes it
+                           useful without opening it. */
+                        _jsx("tr", { className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1), className: "px-3 py-1.5", style: depth === 0
+                                    ? undefined
+                                    : { paddingLeft: `calc(var(--spacing-indent) * ${depth} + 0.75rem)` }, children: _jsxs("button", { type: "button", onClick: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key), "aria-expanded": open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted/70", children: level.label })), _jsx("span", { children: level === undefined ? value : level.labelOf(value) }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: row.getLeafRows().length.toLocaleString(copy.locale) })] }) }) }, row.id));
+                    }
+                    const original = row.original;
+                    return (_jsxs(Tr, { selected: selected?.has(row.id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(row.id) === true, onChange: (v) => toggle(row.id, v) }) })) : null, columns.map((c) => {
+                                const t = c.tone?.(original);
+                                const n = c.note?.(original);
+                                const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
+                                return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
+                            }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, row.id));
+                }) }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
+                            const value = footer[i] ?? null;
+                            return (_jsx("td", { className: `px-3 py-1.5 text-meta font-semibold text-ink ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: i === 0 && value === null ? (_jsxs("span", { className: "text-muted", children: [data.length.toLocaleString(copy.locale), " ", data.length === 1 ? copy.table.row : copy.table.rows] })) : value === null ? null : (aggregateLabel(copy, c.aggregate ?? "count", value)) }, c.id));
+                        }), rowActions === undefined ? null : _jsx("td", {})] }) }))] }));
+}

package/dist/primitives/table/EditableTable.d.ts

@@ -0,0 +1,96 @@
+import { type Grouping } from "../../foundations/grouping.js";
+import { type ReactNode } from "react";
+/** Where a column goes when the row is drawn as a stacked card (a narrow box).
+ *  `trail` sits at the top right, beside the title — a state, the row's buttons. */
+export type StackPlace = "title" | "detail" | "amount" | "trail" | "hidden";
+/** How the rows are drawn: `auto` measures the box and stacks them below
+ *  `--container-handheld`; `table` and `stacked` force one — a side panel that is
+ *  always narrow, a test that has no box to measure. */
+export type EditLayout = "auto" | "table" | "stacked";
+export interface EditColumn<T> {
+    id: string;
+    header: string;
+    width?: number;
+    numeric?: boolean;
+    /** How the cell reads when the row is NOT being edited. */
+    render: (row: T) => ReactNode;
+    /** The control, when the row is being edited. Without this the column is read
+     *  only: an identifier or a computed value. Give the control an `aria-label`
+     *  (the column's name, or a longer one): a cell has no `Field` to name it, and
+     *  `Tab` through the row reads each control by that name. */
+    edit?: (row: T, set: (next: T) => void) => ReactNode;
+    /** Where the column goes in the stacked card, below `--container-handheld`. By
+     *  default the first column is the `title`, the last numeric one the `amount` and
+     *  the rest `detail`. `hidden` for what another column's `brief` already says. */
+    stack?: StackPlace;
+    /** How the column reads inside the card's detail line, when «header value» is not
+     *  the way to say it: «12 × Bs. 120,00» for a quantity, «desc. 10 %» for a
+     *  discount. `null` or `""` leaves it out of that row's line — a zero discount is
+     *  not news. Without it the line reads «<header> <cell>». */
+    brief?: (row: T) => ReactNode;
+}
+/**
+ * Where each column goes in the stacked card, defaults resolved: a declared `stack`
+ * wins; otherwise the first undeclared column is the title (unless one was declared),
+ * the last undeclared numeric one is the amount (unless one was declared), and the rest
+ * are detail.
+ */
+export declare function stackPlaces(columns: readonly {
+    stack?: StackPlace;
+    numeric?: boolean;
+}[]): StackPlace[];
+/**
+ * A table whose rows are edited in place, one row at a time.
+ *
+ * Mouse: touching a row opens it. Keyboard: the rows are one tab stop, the arrows walk
+ * them, `Enter` / `F2` open one, `Tab` walks its controls, `Enter` commits and `Escape`
+ * puts the row back as it was; both return the focus to the row. Leaving the row
+ * (click outside, tabbing past its last control) commits.
+ *
+ * Narrower than `--container-handheld`, each row is a stacked card (see the file's
+ * header): the same keys, and `onOpen` —when given— instead of editing in place.
+ */
+export declare function EditableTable<T>({ rows, columns, getRowId, onChange, onRemove, onAdd, addLabel, 
+/** The footer with the aggregates, already formatted. `null` on the columns
+ *  that do not add up. Whoever composes computes it, because whoever composes
+ *  knows what adding up means in their domain —a percentage is not summed, it
+ *  is averaged. */
+totals, empty, grouping, 
+/** El total de una columna DENTRO de un montón, ya formateado. Lo calcula quien
+ *  compone, por el mismo motivo que `totals`: sumar significa cosas distintas
+ *  según el dominio, y un porcentaje se promedia, no se suma. */
+groupTotal, height, layout, onOpen, }: {
+    rows: readonly T[];
+    columns: readonly EditColumn<T>[];
+    getRowId: (row: T) => string;
+    onChange?: (id: string, next: T) => void;
+    onRemove?: (id: string) => void;
+    onAdd?: () => void;
+    addLabel?: string;
+    totals?: readonly (ReactNode | null)[];
+    empty?: string;
+    /**
+     * El agrupado, con el mismo contrato que el resto de las vistas de datos.
+     *
+     * Editar y agrupar no se estorban: la fila que se edita sigue siendo una fila,
+     * y el montón sólo decide dónde cae. Lo que no se hereda es el orden — las
+     * filas de un montón quedan juntas, así que agregar una fila nueva la pone al
+     * final de todo y no adentro del montón que estabas mirando, que es el
+     * comportamiento honesto: todavía no tiene valor en el campo por el que se
+     * agrupa.
+     */
+    grouping?: Grouping<T>;
+    groupTotal?: (column: EditColumn<T>, rows: readonly T[]) => ReactNode | null;
+    /** A height of its own, as `Table`'s: the lines scroll inside the box and the header
+     *  sticks to its top. A number means pixels; a string goes through as is (`20rem`).
+     *  Without it the table grows with its lines and the header sticks to the page. */
+    height?: number | string;
+    /** `auto` (the default) stacks the rows as cards when the box is narrower than
+     *  `--container-handheld`; `table` and `stacked` force one. */
+    layout?: EditLayout;
+    /** Only in the stacked layout: pressing a card (or `Enter` / `F2` on it) calls this
+     *  instead of editing the row in place — for a consumer that edits the whole row in a
+     *  form of its own, a dialog that is a bottom sheet on a phone. The table ignores it:
+     *  there the row is edited where it is read. */
+    onOpen?: (id: string) => void;
+}): import("react").JSX.Element;