@crisp-ui-kit/crisp 0.54.2 → 0.54.3

package/dist/esm/components/datatable/datatable.js

@@ -9,7 +9,55 @@ import { Select } from "../select/index.js";
 import { Spinner } from "../spinner/index.js";
 import { Switch } from "../switch/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
+import { Tooltip } from "../tooltip/index.js";
 import { datatableRecipe } from "./datatable.recipe.js";
+// #534: whether an element's own content is being cut off by its own box --
+// the same fact `.crisp-datatable-th-label`'s CSS ellipsis is silently
+// applying, exported so the comparison itself (not layout) can be
+// mutation-tested without a real browser.
+export function isLabelTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+/**
+ * The header label span: a `Tooltip` (full text, `asChild` so the wrapper
+ * never displaces the ellipsis CSS the span already carries -- see
+ * `Tooltip`'s own `asChild` doc) permanently closed until the label actually
+ * overflows its own box. Re-measures on mount and on resize (column drag,
+ * viewport change, header text change) via `ResizeObserver`; SSR-safe the
+ * same way `MiddleTruncate` is -- the DOM is only touched inside an effect,
+ * so the server (and the first client paint) render the closed tooltip.
+ */
+function ThLabel({ header }) {
+    const ref = React.useRef(null);
+    const [overflowing, setOverflowing] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `header` isn't read in the body, but a rename (col.header changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setOverflowing(isLabelTruncated(el));
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [header]);
+    // `Tooltip` always wraps the SAME span (never swapped in/out of the tree
+    // based on `overflowing`) so the span's own DOM node identity survives
+    // every toggle -- a real-browser-only bug (happy-dom has no
+    // ResizeObserver, so the test suite never exercised this path): swapping
+    // between a bare `<span>` and `<Tooltip asChild><span/></Tooltip>` changes
+    // the element type at this position, so React unmounts the old span and
+    // mounts a new one; the effect above never re-runs (its deps are
+    // `[header]`, unchanged), so its ResizeObserver keeps watching the now
+    // -detached old node, whose deferred initial callback then reports 0x0 and
+    // flips `overflowing` straight back to false -- the tooltip would never
+    // actually show. `open={false}` when it fits keeps the Tooltip mounted
+    // (asChild costs no extra DOM either way) but pins it permanently closed,
+    // so hovering a non-overflowing header still opens nothing.
+    return (_jsx(Tooltip, { content: header, asChild: true, open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
+}
 /** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
  * a display string. Returns "" when it cannot be parsed, so the field opens
  * empty rather than showing an invalid value. */
@@ -214,6 +262,51 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
     }
 }
 const CHECK_W = 40;
+// crisp/#577 -- cell-level virtualization on both axes.
+//
+// ROW_HEIGHT/GROUP_ROW_HEIGHT must track table.recipe.ts's `c.size.tableRow`
+// (36px) and datatable.recipe.ts's `.crisp-datatable-group` height, which
+// reads `c.size.menuRow` (32px) -- there is no way to read a recipe's CSS
+// value back out in JS, so these are a second, deliberately-commented copy.
+// A drift between the two would only show up as visual jitter (a spacer's
+// height not quite matching the rows it stands in for), never a crash, which
+// is exactly the kind of silent drift AUTHORING.md Lesson 31 warns about.
+const ROW_HEIGHT = 36;
+const GROUP_ROW_HEIGHT = 32;
+// Overscan is a performance cushion, not a measured value -- Attio's own
+// Companies grid (measured live, #577's own issue body) rendered 24 rows for
+// what a 715px-tall viewport fits at 36px/row (~20), i.e. a handful either
+// side; these are the same shape of cushion, not a parity target.
+const ROW_OVERSCAN = 6;
+const COL_OVERSCAN = 2;
+// The row window a server render (or a client's very first paint, before a
+// real measurement lands) assumes when `height` is a CSS string rather than
+// a plain pixel number -- see the `height` prop doc on why a string can't be
+// turned into an exact row count up front.
+const DEFAULT_VIRTUAL_VIEWPORT_PX = 480;
+/**
+ * Cumulative `offsets` has length n+1 (offsets[i] is where item i STARTS,
+ * offsets[n] is the total). Returns the index i (clamped to [0, n-1]) whose
+ * span contains `target` -- i.e. the largest i with offsets[i] <= target.
+ * Shared by the row and column windowing below; a plain linear scan would
+ * also be correct but is the wrong complexity for a 10,000-row table
+ * recomputed on every scroll event.
+ */
+function offsetIndex(offsets, target) {
+    const n = offsets.length - 1;
+    if (n <= 0)
+        return 0;
+    let lo = 0;
+    let hi = n - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (offsets[mid] <= target)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return lo;
+}
 // A sentinel that can't collide with a real record id (crisp never generates
 // one, and a consumer's own ids come from their own data store) -- picking
 // this row calls `onCreateReference`, not the cell's own commit (#449).
@@ -301,7 +394,7 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -443,21 +536,52 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const [pending, setPending] = React.useState(null);
     const [editError, setEditError] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
-    // Mirrors `scrolledX` for the trailing edge: true while there is still
-    // unrevealed content sliding under the sticky trailing column, i.e. while
-    // NOT scrolled all the way to the end. Recomputed after every render (see
-    // the effect below), not just on scroll, because a column resize or a data
-    // change can move `scrollWidth` without firing a scroll event.
-    const [scrolledXEnd, setScrolledXEnd] = React.useState(false);
     const scrollRef = React.useRef(null);
+    // crisp/#577 -- the scroll container's own position/size, read on scroll
+    // and on mount/resize. `w` (viewport width) is ALWAYS tracked, since column
+    // virtualization doesn't need `height` -- the grid already has a
+    // determinate horizontal scroll container. `h` only matters once `height`
+    // is set; its initial value is the "first window" SSR/first-paint renders
+    // (see the `height` prop doc): a plain-number `height` gets an exact
+    // viewport up front, a CSS-string one gets `DEFAULT_VIRTUAL_VIEWPORT_PX`
+    // until the real size is measured after mount. `w` starts at `Infinity` --
+    // "not yet measured" reads as "render every column", the same as today,
+    // rather than guessing a width and risking a visible column pop after
+    // hydration.
+    const [viewport, setViewport] = React.useState(() => ({
+        top: 0,
+        left: 0,
+        h: typeof height === "number"
+            ? height
+            : height != null
+                ? DEFAULT_VIRTUAL_VIEWPORT_PX
+                : Number.POSITIVE_INFINITY,
+        w: Number.POSITIVE_INFINITY,
+    }));
+    // Client-only measurement: re-reads the scroll container's real box on
+    // mount and whenever it resizes (a window resize, a sidebar toggling, a
+    // consumer's own layout change) -- none of which fire a `scroll` event.
+    // Never runs during SSR (effects don't run there at all), which is what
+    // keeps the "first window" guess above the only thing a server ever
+    // renders.
     React.useEffect(() => {
-        if (!stickyLast)
-            return;
         const el = scrollRef.current;
         if (!el)
             return;
-        setScrolledXEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-    });
+        const measure = () => {
+            setViewport((v) => ({
+                ...v,
+                h: height != null ? el.clientHeight : v.h,
+                w: el.clientWidth,
+            }));
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [height]);
     // column widths (drag-to-resize) + fixed-layout sizing
     const [widths, setWidths] = React.useState({});
     const [resizingKey, setResizingKey] = React.useState(null);
@@ -466,6 +590,33 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const minWidth = (showGrip ? GRIP_W : 0) +
         (selectable ? CHECK_W : 0) +
         columns.reduce((sum, col) => sum + colWidth(col), 0);
+    // Mirrors `scrolledX` for the trailing edge: true while there is still
+    // unrevealed content sliding under the sticky trailing column, i.e. while
+    // NOT scrolled all the way to the end. Recomputed whenever `minWidth`
+    // changes (a column resize or the column set changing), not just on
+    // scroll, since either can move `scrollWidth` without firing a scroll
+    // event. This used to run after EVERY render (no dependency array at
+    // all) -- harmless on its own, but crisp/#577's own `viewport` effects
+    // (below) also read layout and call `setViewport` on their own schedule,
+    // and the two together resonated: each render's `setScrolledXEnd`
+    // triggered another render, which reran this effect, which could
+    // observe a still-settling layout and set a DIFFERENT value, which
+    // triggered yet another render -- "Maximum update depth exceeded",
+    // caught reviewing the virtualized docs example (the first place this
+    // repo ever exercises `stickyLast` in a real browser; the existing
+    // jsdom tests never hit real layout, so this never surfaced there).
+    // `minWidth` is exactly what this comparison's `scrollWidth` side
+    // tracks, so it's the one dependency that actually matters.
+    const [scrolledXEnd, setScrolledXEnd] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: minWidth is what scrollWidth tracks, see comment above -- not read directly in the body
+    React.useEffect(() => {
+        if (!stickyLast)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setScrolledXEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    }, [stickyLast, minWidth]);
     const colByKey = React.useMemo(() => {
         const m = new Map();
         for (const c of columns)
@@ -526,6 +677,110 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             rows: groupRows,
         }));
     }, [rows, groupBy]);
+    const renderItems = React.useMemo(() => {
+        const items = [];
+        for (const { group, rows: groupRows } of groupedRows) {
+            if (group !== null) {
+                items.push({
+                    kind: "group",
+                    key: `__group_${group}`,
+                    label: group,
+                    count: groupRows.length,
+                    height: GROUP_ROW_HEIGHT,
+                });
+            }
+            for (const row of groupRows)
+                items.push({ kind: "row", key: row.id, row, height: ROW_HEIGHT });
+        }
+        return items;
+    }, [groupedRows]);
+    const rowOffsets = React.useMemo(() => {
+        const offsets = new Array(renderItems.length + 1);
+        offsets[0] = 0;
+        for (let i = 0; i < renderItems.length; i++)
+            offsets[i + 1] = offsets[i] + renderItems[i].height;
+        return offsets;
+    }, [renderItems]);
+    const totalRowsHeight = rowOffsets[rowOffsets.length - 1] ?? 0;
+    // O(1) lookup from a row's id to its position in `renderItems` -- used by
+    // the keyboard-nav scroll-into-view effect below, which knows a row by id
+    // (from `selCell`), not by its index in the flattened item list.
+    const rowIdToItemIndex = React.useMemo(() => {
+        const m = new Map();
+        renderItems.forEach((it, i) => {
+            if (it.kind === "row")
+                m.set(it.row.id, i);
+        });
+        return m;
+    }, [renderItems]);
+    // `height == null` (the default) makes this a no-op: `viewport.h` starts at
+    // `Infinity`, so the visible range below covers every item, both spacers
+    // come out to 0px, and neither renders (see the `> 0` guards further down)
+    // -- the DOM is byte-identical to before virtualization existed.
+    const rowFirstVisible = renderItems.length === 0 ? 0 : offsetIndex(rowOffsets, viewport.top);
+    const rowLastVisible = renderItems.length === 0
+        ? 0
+        : offsetIndex(rowOffsets, Math.max(viewport.top, viewport.top + viewport.h - 1));
+    const rowStart = Math.max(0, rowFirstVisible - ROW_OVERSCAN);
+    const rowEnd = Math.min(renderItems.length, rowLastVisible + 1 + ROW_OVERSCAN);
+    const topSpacerHeight = rowOffsets[rowStart] ?? 0;
+    const bottomSpacerHeight = totalRowsHeight - (rowOffsets[rowEnd] ?? 0);
+    const visibleItems = renderItems.slice(rowStart, rowEnd);
+    // crisp/#577 -- COLUMN virtualization. Always on (no `height` needed): the
+    // sticky-pinned columns (the leading `columns[0]` when `stickyFirst`, the
+    // trailing column when `stickyLast`) are excluded from the window and
+    // always render, exactly like Attio's own checkbox + entity columns while
+    // its own grid scrolls under them. Coordinates below are in the SAME
+    // horizontal axis `scrollLeft` uses: a sticky column doesn't leave layout
+    // flow (only its paint position pins), so its width still occupies real
+    // space in that axis.
+    const colAlwaysFirst = stickyFirst && columns.length > 0;
+    const colAlwaysLastIdx = stickyLast &&
+        columns.length > 0 &&
+        !(colAlwaysFirst && columns.length === 1)
+        ? columns.length - 1
+        : -1;
+    const colWindowStart = colAlwaysFirst ? 1 : 0;
+    const colWindowEnd = colAlwaysLastIdx >= 0 ? colAlwaysLastIdx : columns.length;
+    const colLeadingFixedWidth = (showGrip ? GRIP_W : 0) +
+        (selectable ? CHECK_W : 0) +
+        (colAlwaysFirst ? colWidth(columns[0]) : 0);
+    // Cumulative widths of just the WINDOWABLE columns, relative to their own
+    // start (not the table's) -- kept separate from the absolute scroll axis
+    // so `leftSpacerWidth + rightSpacerWidth + (visible widths)` provably sums
+    // to the windowable total no matter how many leading fixed columns there are.
+    const colRelOffsets = [0];
+    for (let i = colWindowStart; i < colWindowEnd; i++)
+        colRelOffsets.push(colRelOffsets[colRelOffsets.length - 1] + colWidth(columns[i]));
+    const colWindowableCount = colWindowEnd - colWindowStart;
+    const colTargetLeft = Math.max(0, Math.min(colRelOffsets[colWindowableCount] ?? 0, viewport.left - colLeadingFixedWidth));
+    const colTargetRight = Math.max(0, Math.min(colRelOffsets[colWindowableCount] ?? 0, viewport.left - colLeadingFixedWidth + viewport.w - 1));
+    const colFirstVisibleK = colWindowableCount === 0 ? 0 : offsetIndex(colRelOffsets, colTargetLeft);
+    const colLastVisibleK = colWindowableCount === 0 ? 0 : offsetIndex(colRelOffsets, colTargetRight);
+    const colStartK = Math.max(0, colFirstVisibleK - COL_OVERSCAN);
+    const colEndK = Math.min(colWindowableCount, colLastVisibleK + 1 + COL_OVERSCAN);
+    const leftSpacerWidth = colRelOffsets[colStartK] ?? 0;
+    const rightSpacerWidth = (colRelOffsets[colWindowableCount] ?? 0) - (colRelOffsets[colEndK] ?? 0);
+    const colSlots = [];
+    if (colAlwaysFirst)
+        colSlots.push({ type: "col", i: 0 });
+    if (leftSpacerWidth > 0)
+        colSlots.push({ type: "spacer", side: "left", width: leftSpacerWidth });
+    for (let i = colWindowStart + colStartK; i < colWindowStart + colEndK; i++)
+        colSlots.push({ type: "col", i });
+    if (rightSpacerWidth > 0)
+        colSlots.push({ type: "spacer", side: "right", width: rightSpacerWidth });
+    if (colAlwaysLastIdx >= 0)
+        colSlots.push({ type: "col", i: colAlwaysLastIdx });
+    // aria-rowcount/-rowindex, aria-colcount/-colindex (#577): a virtualized
+    // native `<table>` still exposes its TRUE size and each real cell's TRUE
+    // position to assistive tech, even though most rows/columns aren't in the
+    // DOM at any moment -- the spacer/placeholder cells are `aria-hidden`
+    // instead of numbered. `+1` header row, 1-based indices per the ARIA spec.
+    const ariaRowCount = 1 + renderItems.length;
+    const ariaColCount = (showGrip ? 1 : 0) + (selectable ? 1 : 0) + columns.length;
+    const ariaColIndexBase = (showGrip ? 1 : 0) + (selectable ? 1 : 0);
+    const colAriaIndex = (i) => ariaColIndexBase + i + 1;
     const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
     function toggleAll() {
@@ -677,6 +932,72 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         }
         setEditing(null);
     }
+    // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
+    // scrolls it into the rendered window, on both axes. Column scroll-into-
+    // view runs regardless of `height` -- the horizontal scroll container (and
+    // its own virtualization) exists either way; row scroll-into-view only
+    // makes sense once `height` gives the grid an internal vertical scroll
+    // position to move. `widths` is read only indirectly, through `colWidth`'s
+    // closure over it -- biome can't see that, but a column resize while a
+    // cell is selected genuinely needs to re-run this to keep it in view, so
+    // the dependency is real even though the lint rule can't prove it.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: widths is read via colWidth's closure, see comment above
+    React.useEffect(() => {
+        if (!selCell)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        // Sets `viewport` directly from the SAME value just assigned to the
+        // real DOM property, rather than waiting for a follow-up `scroll` event
+        // to round-trip through the `onScroll` handler above -- a real browser
+        // does fire one when `scrollTop`/`scrollLeft` is set programmatically,
+        // but relying on that would make this effect's own visible result (the
+        // newly-selected cell actually rendering) depend on a second render
+        // triggered from outside React's own update, which is both slower and
+        // one more thing that has to be true for this to work.
+        if (height != null) {
+            const itemIndex = rowIdToItemIndex.get(selCell.id);
+            if (itemIndex != null) {
+                const itemTop = rowOffsets[itemIndex];
+                const itemBottom = itemTop + renderItems[itemIndex].height;
+                if (itemTop < el.scrollTop) {
+                    el.scrollTop = itemTop;
+                    setViewport((v) => ({ ...v, top: itemTop }));
+                }
+                else if (itemBottom > el.scrollTop + el.clientHeight) {
+                    const newTop = itemBottom - el.clientHeight;
+                    el.scrollTop = newTop;
+                    setViewport((v) => ({ ...v, top: newTop }));
+                }
+            }
+        }
+        const ci = columns.findIndex((c) => c.key === selCell.key);
+        if (ci >= 0) {
+            let left = (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0);
+            for (let i = 0; i < ci; i++)
+                left += colWidth(columns[i]);
+            const right = left + colWidth(columns[ci]);
+            if (left < el.scrollLeft) {
+                el.scrollLeft = left;
+                setViewport((v) => ({ ...v, left }));
+            }
+            else if (right > el.scrollLeft + el.clientWidth) {
+                const newLeft = right - el.clientWidth;
+                el.scrollLeft = newLeft;
+                setViewport((v) => ({ ...v, left: newLeft }));
+            }
+        }
+    }, [
+        selCell,
+        height,
+        columns,
+        widths,
+        selectable,
+        rowIdToItemIndex,
+        rowOffsets,
+        renderItems,
+    ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary);
     // sticky attrs for the leading column(s): grip col (index -2) + selection
@@ -781,19 +1102,51 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return dir === "asc" ? (_jsx(ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, 
+                // crisp/#581: on the <table> itself (`tableStyle`), not the outer
+                // wrapper (`style`) -- see `Table`'s own doc comment on why. This is
+                // what lets the grid actually scroll horizontally INSIDE its own
+                // box instead of widening its consumer's page.
+                tableStyle: { minWidth }, "aria-rowcount": ariaRowCount, "aria-colcount": ariaColCount, scrollProps: {
                     ...scrollProps,
                     ref: scrollRef,
+                    // crisp/#577: `height` opts into an internally-scrolling viewport
+                    // (and so into row virtualization, see the prop's own doc) by
+                    // bounding + capping overflow here -- merged onto, not replacing,
+                    // whatever style a consumer already passed for #554's sticky
+                    // header/footer bounding.
+                    style: {
+                        ...scrollProps?.style,
+                        ...(height != null
+                            ? { overflowY: "auto", height, maxHeight: height }
+                            : {}),
+                    },
                     onScroll: (e) => {
                         const el = e.currentTarget;
                         setScrolledX(el.scrollLeft > 0);
                         if (stickyLast) {
                             setScrolledXEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
                         }
+                        // Re-reads clientHeight/clientWidth here too, not just
+                        // scrollTop/scrollLeft -- a defensive fallback for whenever
+                        // ResizeObserver isn't available (or hasn't fired yet): any
+                        // scroll re-syncs the viewport size along with its position,
+                        // rather than trusting a possibly-stale mount-time measurement.
+                        setViewport((v) => ({
+                            top: el.scrollTop,
+                            left: el.scrollLeft,
+                            h: height != null ? el.clientHeight : v.h,
+                            w: el.clientWidth,
+                        }));
                     },
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                     ...(scrolledXEnd ? { "data-scrolled-x-end": "" } : {}),
-                }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), colSlots.map((slot) => slot.type === "spacer" ? (_jsx("col", { style: { width: slot.width } }, `__spacer_${slot.side}`)) : (_jsx("col", { style: { width: colWidth(columns[slot.i]) } }, columns[slot.i].key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { "aria-rowindex": 1, children: [showGrip && (_jsx(TableHead, { className: "crisp-datatable-col-grip", "aria-colindex": showGrip ? 1 : undefined, ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), colSlots.map((slot) => {
+                                    if (slot.type === "spacer") {
+                                        return (_jsx("th", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
+                                    }
+                                    const col = columns[slot.i];
+                                    const i = slot.i;
                                     const Icon = col.icon;
                                     // The sort direction was painted (`data-sorted`) and never
                                     // announced: a screen reader heard the same header before and
@@ -809,8 +1162,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
-                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
+                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
@@ -825,104 +1178,128 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 } })) : columnMenu ? (_jsxs(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
                                                         : col.key} ${crispMessages["column options"] ?? "column options"}`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: sortAscendingLabel }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: sortDescendingLabel }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: moveColumnLeftLabel }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: moveColumnRightLabel }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: editColumnLabel }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: hideColumnLabel })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => (_jsxs(React.Fragment, { children: [group !== null && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [_jsx("span", { className: "crisp-datatable-group-label", children: group }), _jsx("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
-                                        dragRowId &&
-                                        dragRowId !== row.id &&
-                                        dropRowId === row.id
-                                        ? ""
-                                        : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, onDragOver: showGrip && dragRowId
-                                        ? (e) => {
-                                            e.preventDefault();
-                                            if (dropRowId !== row.id)
-                                                setDropRowId(row.id);
-                                        }
-                                        : undefined, onDrop: showGrip && dragRowId
-                                        ? (e) => {
-                                            e.preventDefault();
-                                            reorderRows(dragRowId, row.id);
-                                        }
-                                        : undefined, children: [showGrip && (_jsx(TableCell, { className: "crisp-datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: _jsx("button", { type: "button", className: "crisp-datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
-                                                    setDragRowId(row.id);
-                                                    e.dataTransfer.effectAllowed = "move";
-                                                }, onDragEnd: () => {
-                                                    setDragRowId(null);
-                                                    setDropRowId(null);
-                                                }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
-                                            const isEditing = editing?.id === row.id && editing?.key === col.key;
-                                            const value = cellValue(col, row);
-                                            const sticky = dataStickyCol(i);
-                                            const isPending = pending?.id === row.id && pending?.key === col.key;
-                                            const errorHere = editError?.id === row.id && editError?.key === col.key
-                                                ? editError.message
-                                                : null;
-                                            // #453: a `switch` editable column IS always its own
-                                            // live widget -- flipping the toggle IS the commit
-                                            // gesture, there's no meaningfully different "rest"
-                                            // display for a boolean. `select`/`reference` are
-                                            // NOT this: at rest they must show the column's own
-                                            // render/format like every other editable type
-                                            // (#412 empty handling included), and only open on
-                                            // double-click (#411) -- this branch previously
-                                            // rendered them unconditionally, replacing every
-                                            // row's own render with a picker trigger, which is
-                                            // the regression #453 reported (also #432/#449,
-                                            // which never had a "rest" state of their own to get
-                                            // right). See the `isEditing` block below for their
-                                            // actual editor.
-                                            if (col.editable && col.editor === "switch") {
-                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (_jsxs(_Fragment, { children: [topSpacerHeight > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: totalCols, style: {
+                                            height: topSpacerHeight,
+                                            padding: 0,
+                                            border: "none",
+                                        } }) })), visibleItems.map((item, localIndex) => {
+                                    const itemIndex = rowStart + localIndex;
+                                    // header row is aria-rowindex 1, so the first body item is 2
+                                    const ariaRowIndex = itemIndex + 2;
+                                    if (item.kind === "group") {
+                                        return (_jsx(TableRow, { "aria-rowindex": ariaRowIndex, children: _jsxs(TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [_jsx("span", { className: "crisp-datatable-group-label", children: item.label }), _jsx("span", { className: "crisp-datatable-group-count", children: item.count })] }) }, item.key));
+                                    }
+                                    const row = item.row;
+                                    return (_jsxs(TableRow, { "aria-rowindex": ariaRowIndex, "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
+                                            dragRowId &&
+                                            dragRowId !== row.id &&
+                                            dropRowId === row.id
+                                            ? ""
+                                            : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, onDragOver: showGrip && dragRowId
+                                            ? (e) => {
+                                                e.preventDefault();
+                                                if (dropRowId !== row.id)
+                                                    setDropRowId(row.id);
                                             }
-                                            if (isEditing &&
-                                                (col.editor === "select" || col.editor === "reference")) {
-                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
-                                                    // Same as the plain text editor's own cell:
-                                                    // opening/using the picker must not also fire
-                                                    // the row's onRowClick. Escape is handled by
-                                                    // `DataSelectEditor`/`DataReferenceEditor`
-                                                    // themselves (a document-level listener, not a
-                                                    // `TableCell`-level `onKeyDown`) -- opening the
-                                                    // picker moves DOM focus into a floating,
-                                                    // portaled popover, so a handler here can't
-                                                    // rely on the key event ever bubbling through
-                                                    // this element (#453).
-                                                    onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            : undefined, onDrop: showGrip && dragRowId
+                                            ? (e) => {
+                                                e.preventDefault();
+                                                reorderRows(dragRowId, row.id);
                                             }
-                                            if (isEditing) {
-                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
-                                                            // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
-                                                            autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
-                                                                ? toDateInputValue(value)
-                                                                : col.type === "datetime"
-                                                                    ? toDateTimeInputValue(value)
-                                                                    : asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
-                                                                if (isPending)
-                                                                    return;
-                                                                if (e.key === "Enter")
+                                            : undefined, children: [showGrip && (_jsx(TableCell, { className: "crisp-datatable-col-grip", "aria-colindex": showGrip ? 1 : undefined, ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: _jsx("button", { type: "button", className: "crisp-datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
+                                                        setDragRowId(row.id);
+                                                        e.dataTransfer.effectAllowed = "move";
+                                                    }, onDragEnd: () => {
+                                                        setDragRowId(null);
+                                                        setDropRowId(null);
+                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), colSlots.map((slot) => {
+                                                if (slot.type === "spacer") {
+                                                    return (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
+                                                }
+                                                const col = columns[slot.i];
+                                                const i = slot.i;
+                                                const isEditing = editing?.id === row.id && editing?.key === col.key;
+                                                const value = cellValue(col, row);
+                                                const sticky = dataStickyCol(i);
+                                                const isPending = pending?.id === row.id && pending?.key === col.key;
+                                                const errorHere = editError?.id === row.id && editError?.key === col.key
+                                                    ? editError.message
+                                                    : null;
+                                                // #453: a `switch` editable column IS always its own
+                                                // live widget -- flipping the toggle IS the commit
+                                                // gesture, there's no meaningfully different "rest"
+                                                // display for a boolean. `select`/`reference` are
+                                                // NOT this: at rest they must show the column's own
+                                                // render/format like every other editable type
+                                                // (#412 empty handling included), and only open on
+                                                // double-click (#411) -- this branch previously
+                                                // rendered them unconditionally, replacing every
+                                                // row's own render with a picker trigger, which is
+                                                // the regression #453 reported (also #432/#449,
+                                                // which never had a "rest" state of their own to get
+                                                // right). See the `isEditing` block below for their
+                                                // actual editor.
+                                                if (col.editable && col.editor === "switch") {
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                }
+                                                if (isEditing &&
+                                                    (col.editor === "select" || col.editor === "reference")) {
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                        // Same as the plain text editor's own cell:
+                                                        // opening/using the picker must not also fire
+                                                        // the row's onRowClick. Escape is handled by
+                                                        // `DataSelectEditor`/`DataReferenceEditor`
+                                                        // themselves (a document-level listener, not a
+                                                        // `TableCell`-level `onKeyDown`) -- opening the
+                                                        // picker moves DOM focus into a floating,
+                                                        // portaled popover, so a handler here can't
+                                                        // rely on the key event ever bubbling through
+                                                        // this element (#453).
+                                                        onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                }
+                                                if (isEditing) {
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
+                                                                // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
+                                                                autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
+                                                                    ? toDateInputValue(value)
+                                                                    : col.type === "datetime"
+                                                                        ? toDateTimeInputValue(value)
+                                                                        : asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
+                                                                    if (isPending)
+                                                                        return;
+                                                                    if (e.key === "Enter")
+                                                                        commitEdit(row.id, col.key, e.currentTarget.value);
+                                                                    else if (e.key === "Escape")
+                                                                        setEditing(null);
+                                                                }, onBlur: (e) => {
+                                                                    if (isPending)
+                                                                        return;
                                                                     commitEdit(row.id, col.key, e.currentTarget.value);
-                                                                else if (e.key === "Escape")
-                                                                    setEditing(null);
-                                                            }, onBlur: (e) => {
-                                                                if (isPending)
-                                                                    return;
-                                                                commitEdit(row.id, col.key, e.currentTarget.value);
-                                                            } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }, col.key));
-                                            }
-                                            return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: col.editable
-                                                    ? "crisp-datatable-editable"
-                                                    : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
-                                                    ? ""
-                                                    : undefined, onClick: () => {
-                                                    // the keyboard model's anchor -- a single click
-                                                    // only selects. A genuine double-click (or Enter
-                                                    // on the selected cell) opens the editor (#411),
-                                                    // matching RecordsTable's own onDoubleClick.
-                                                    setSelCell({ id: row.id, key: col.key });
-                                                    gridRef.current?.focus({ preventScroll: true });
-                                                }, onDoubleClick: col.editable
-                                                    ? () => openEditing(row.id, col.key)
-                                                    : undefined, children: [col.render
-                                                        ? col.render(value, row)
-                                                        : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                                                } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }, col.key));
+                                                }
+                                                return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                        ? "crisp-datatable-editable"
+                                                        : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                                        ? ""
+                                                        : undefined, onClick: () => {
+                                                        // the keyboard model's anchor -- a single click
+                                                        // only selects. A genuine double-click (or Enter
+                                                        // on the selected cell) opens the editor (#411),
+                                                        // matching RecordsTable's own onDoubleClick.
+                                                        setSelCell({ id: row.id, key: col.key });
+                                                        gridRef.current?.focus({ preventScroll: true });
+                                                    }, onDoubleClick: col.editable
+                                                        ? () => openEditing(row.id, col.key)
+                                                        : undefined, children: [col.render
+                                                            ? col.render(value, row)
+                                                            : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            })] }, row.id));
+                                }), bottomSpacerHeight > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: totalCols, style: {
+                                            height: bottomSpacerHeight,
+                                            padding: 0,
+                                            border: "none",
+                                        } }) }))] })) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), colSlots.map((slot) => slot.type === "spacer" ? (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`)) : (_jsx(TableCell, { align: alignFor(columns[slot.i]), "aria-colindex": colAriaIndex(slot.i), ...dataStickyCol(slot.i), children: columns[slot.i].summary
+                                            ? columns[slot.i].summary?.(rows)
+                                            : null }, columns[slot.i].key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";