@svgrid/grid 3.0.5 → 3.0.6

package/README.md

@@ -17,7 +17,7 @@
 <p align="center">
   <a href="https://svgrid.com">Website</a> ·
   <a href="https://svgrid.com/docs/">Docs</a> ·
-  <a href="https://svgrid.com/demos/">370+ Demos</a> ·
+  <a href="https://svgrid.com/demos/">400+ Demos</a> ·
   <a href="https://svgrid.com/pricing/">Pricing</a> ·
   <a href="https://svgrid.com/roadmap/">Roadmap</a>
 </p>
@@ -78,7 +78,7 @@ all wire up the moment you turn on the matching prop.
 |---|---|
 | **License** | MIT, free for commercial use |
 | **Requires** | `svelte@^5` (peer dependency), Node 16+ |
-| **Bundle (gzip)** | ~2 KB headless core, ~80 KB full `<SvGrid>` + ~9 KB CSS |
+| **Bundle (gzip)** | ~2.7 KB headless core, ~98 KB full `<SvGrid>` + ~10 KB CSS; charts, date pickers, menus and export load as separate chunks on first use |
 | **Types** | Bundled, no `@types/` package needed |
 | **Module format** | ESM, plus a CDN build at `@svgrid/grid/cdn` |
 | **SSR** | Works under SvelteKit SSR and static builds |
@@ -90,7 +90,10 @@ all wire up the moment you turn on the matching prop.
 - **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
 - **Editing** - 15 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus `date-native` / `datetime-native` / `time-native` to opt out of the rich pickers, and a `cellEditor` snippet slot for anything custom.
 - **Selection** - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
-- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas.
+- **Views** - row grouping with aggregation, tree data, master/detail, full-width detail rows, and a
+  spreadsheet layout mode (merged cells, per-cell borders). Formula cells here go through an adapter
+  seam you point at your own `hyperformula` install; the built-in formula engine and `<SvSheet>` are
+  in the Suite edition of `@svgrid/enterprise`.
 - **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.
 - **Data operations** - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side data with sort / filter / paging / infinite-scroll pushdown (lazy grouping, tree, pivot and transactions on the server are in `@svgrid/enterprise`).
 - **AI helpers, free** - natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: register one provider, nothing is bundled.
@@ -131,7 +134,7 @@ import {
 ```
 
 - **Headless** - drive `createSvGrid` and the row-model factories, render your own markup.
-  `getGrid*A11yProps` helpers keep custom markup accessible. About 2 KB gzipped.
+  `getGrid*A11yProps` helpers keep custom markup accessible. About 2.7 KB gzipped.
 - **Render-ready** - `<SvGrid />` is a complete, accessible, themeable grid you configure with props.
 
 Compatibility aliases are provided for the framework-neutral names: `createGrid`, `createGridState`,
@@ -141,7 +144,7 @@ Compatibility aliases are provided for the framework-neutral names: `createGrid`
 
 SvGrid publishes an [MCP server](https://www.npmjs.com/package/@svgrid/mcp) plus
 [llms.txt](https://svgrid.com/llms.txt) and [llms-full.txt](https://svgrid.com/llms-full.txt), so Claude,
-Cursor, and Zed answer with accurate, version-pinned APIs and all 370+ demo sources as context rather
+Cursor, and Zed answer with accurate, version-pinned APIs and all 400+ demo sources as context rather
 than hallucinated methods.
 
 ```bash
@@ -158,12 +161,30 @@ editing, virtualization, **server-side data** (paging, infinite block scroll, so
 **AI helpers** all ship in the free package. The optional [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise) pack layers
 on the export- and analytics-heavy features teams tend to need last:
 
+The pack sells in two editions, both covering unlimited production apps.
+
+**Grid edition:**
+
 - **Excel / PDF / CSV / TSV / HTML export** plus paginated print.
 - **Excel / CSV / TSV / JSON import** with auto-mapping and per-row validation.
 - **Pivot tables** with a drag-and-drop pivot Designer.
 - **Kanban board, scheduler / calendar and Gantt renderers** for the `board`, `scheduler` and `gantt` props.
+- **Server-side row model** for lazy grouping, tree, pivot and transactions.
+
+**Suite edition** adds everything above plus:
+
+- **A real spreadsheet.** `<SvSheet>` and the `<sv-sheet>` element over a built-in formula engine
+  with cross-sheet references, named ranges, dynamic arrays and spill, iterative calculation, and
+  dependency-graph recalculation. No `hyperformula` needed, and no runtime dependency.
+- **Spreadsheet file formats.** Read and write `.xlsx`, `.xls`, `.ods` and `.csv`, with formulas,
+  merges, frozen panes, named ranges and charts surviving the round trip.
+- **SvGrid Studio.** The designer, the code generator and the SQL data sources.
+
+Both editions come with a 30-day evaluation period: every feature runs without a key, and under a
+key that does not cover it, with a watermark and a console message about the Enterprise package. `licenseCovers('spreadsheet')` tells you which
+side of the line the current key is on, if you would rather hide an entry point than let it nudge.
 
-OSS projects receive an Enterprise key free. See [Pricing](https://svgrid.com/pricing/).
+OSS projects receive a Suite key free. See [Pricing](https://svgrid.com/pricing/).
 
 ## Also in the box
 
@@ -203,7 +224,7 @@ Full detail: [SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/docs/help/
 ## Documentation
 
 - [Getting started](https://svgrid.com/docs/getting-started/) - end-to-end walkthrough.
-- [370+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
+- [400+ live demos](https://svgrid.com/demos/) - copy-paste recipes for every feature.
 - [Why headless?](https://svgrid.com/docs/why-headless/) - when to compose vs. drop in.
 - [Theming and Tailwind](https://svgrid.com/docs/help/tailwind/) - re-skin via `--sg-*` tokens and dark mode.
 - [Accessibility](https://svgrid.com/docs/help/accessibility/) - the WAI-ARIA grid pattern as implemented.

package/dist/GridMenus.svelte

@@ -214,6 +214,19 @@
     });
   }
 
+  /**
+   * Whether a column's active filter operator is one of the set operators,
+   * read at event time from component state: the condition input's focus
+   * and blur handlers cannot depend on a template `@const`, because blur
+   * also fires while the popover is being torn down, after that const's
+   * effect is gone.
+   */
+  function isSetOperatorFor(colId: string): boolean {
+    const column = allColumns.find((c) => c.id === colId);
+    const op = filterMenuValues[colId]?.operator ?? defaultOperatorFor(column);
+    return op === "in" || op === "notIn";
+  }
+
   /** Enter anywhere in the panel means "done" - filtering is already live. */
   function onFilterPanelKeydown(event: KeyboardEvent) {
     if (event.key !== "Enter" || event.shiftKey) return;
@@ -286,8 +299,23 @@
   const saveComment = $derived(ctrl.saveComment);
   const removeComment = $derived(ctrl.removeComment);
   const closeCommentEditor = $derived(ctrl.closeCommentEditor);
+
+  function onContextMenuKeydown(event: KeyboardEvent) {
+    // Escape closes the context menu, the way every spreadsheet and desktop
+    // app does. The backdrop closes it on a click, but a keyboard user who
+    // opened it (Shift+F10, the Menu key) otherwise has no way out, and the
+    // menu sits over the sheet swallowing every other key. Handled at the
+    // window so it works whatever holds focus while the menu is open.
+    if (contextMenuFor && (event.key === "Escape" || event.key === "Esc")) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeContextMenu();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onContextMenuKeydown} />
+
   {#if tooltip}
     <!-- Custom hover tooltip. Floats above the grid; positioned by
          showTooltipFor(). Notes and column tooltips both surface here. -->
@@ -396,10 +424,12 @@
               : menuActiveOperator === "regex"
                 ? "Pattern..."
                 : "Filter value..."}
-          onfocus={isSetOp
-            ? (event) => onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId)
-            : undefined}
-          onblur={isSetOp ? () => closeInSuggest() : undefined}
+          onfocus={(event) => {
+            if (isSetOperatorFor(colId)) onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId);
+          }}
+          onblur={() => {
+            if (isSetOperatorFor(colId)) closeInSuggest();
+          }}
           oninput={(event) => {
             const input = event.currentTarget as HTMLInputElement;
             updateFilterMenuValue(colId, input.value);

package/dist/SvGrid.controller.svelte.d.ts

@@ -78,6 +78,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     history: SharedHistoryStep[];
     historyPtr: number;
     historyGroupId: string | undefined;
+    historyTag: unknown;
     historyVersion: number;
     tooltip: {
         text: string;
@@ -116,6 +117,14 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     columnVirtualizerVersion: number;
     gridStateVersion: number;
     readonly selectionColumnWidth: number;
+    readonly detailToggleColumnWidth: number;
+    readonly detailToggleColumnLeft: number;
+    readonly showDetailToggleEffective: boolean;
+    readonly systemColumnsWidth: number;
+    readonly detailToggleOf: (row: Row<TData>, rowIndex: number) => {
+        open: boolean;
+        toggle: () => void;
+    } | null;
     readonly rowNumberColumnWidth: number;
     readonly showRowNumbersEffective: boolean;
     readonly filterOperatorOptions: import("./SvGrid.types.js").FilterOption[];
@@ -241,7 +250,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     colDropSide: "before" | "after" | null;
     rowDragActive: boolean;
     rowDropIndex: number | null;
-    rowDropSide: "before" | "after" | null;
+    rowDropSide: "before" | "after" | "into" | null;
     readonly onRowDragStart: (e: DragEvent, rowIndex: number) => void;
     readonly onRowDragOver: (e: DragEvent, rowIndex: number) => void;
     readonly onRowDragLeave: (rowIndex: number) => void;
@@ -525,6 +534,13 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly frozenRowList: Row<TData>[];
     readonly frozenBandHeight: number;
     readonly frozenRowTop: (i: number) => number;
+    readonly stickyGroupRows: {
+        row: Row<TData>;
+        rowIndex: number;
+        top: number;
+        size: number;
+    }[];
+    readonly stickyTopOfRow: (rowIndex: number) => number | undefined;
     /** Record the height the user dragged a row to. */
     readonly setRowResizeHeight: (index: number, height: number | null) => void;
     readonly isRowCollapsed: (index: number) => boolean;
@@ -534,6 +550,8 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly autosizeColumnByUser: (columnId: string) => void;
     /** A row's dragged height, or undefined when it has not been resized. */
     readonly rowResizeHeightPx: (index: number) => number | undefined;
+    /** The height row i is drawn at: dragged, measured, detail, declared or default. */
+    readonly rowSizePxOf: (i: number) => number;
     readonly virtualRowTotalSize: number;
     readonly virtualRowStart: number;
     readonly virtualRowEnd: number;
@@ -672,11 +690,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     columnResizable(columnId: string): boolean;
     readonly readCellRaw: (rowIndex: number, columnId: string) => unknown;
     readonly writeCellRaw: (rowIndex: number, columnId: string, value: unknown) => void;
-    readonly applyFillPattern: () => void;
+    readonly applyFillPattern: (toggled?: boolean) => void;
     readonly clearSelectedCellValues: () => void;
     readonly startFillDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => void;
     readonly onFillPointerMove: (event: PointerEvent) => void;
-    readonly onFillPointerUp: () => void;
+    readonly onFillPointerUp: (event?: PointerEvent) => void;
     readonly fillDownToNeighbour: () => void;
     readonly isOnMoveGrabStrip: (cell: HTMLElement, rowIndex: number, colIndex: number, clientX: number, clientY: number) => boolean;
     readonly startMoveDrag: (event: PointerEvent, rowIndex: number, colIndex: number) => boolean;

package/dist/SvGrid.controller.svelte.js

@@ -327,7 +327,11 @@ export function createSvGridController(rawProps, domIdBase) {
     // grows with rows x columns and a Map lookup per cell per render.
     let editedCellValues = $state.raw({});
     const UNDO_LIMIT = 200;
-    let history = $state([]);
+    // Raw: pushHistory always assigns a fresh array and nothing renders from a
+    // step, so deep proxies would cost 200 wrapped objects for nothing. It also
+    // keeps a consumer's `tag` the object it passed, which a proxy would not be:
+    // the sheet shell compares tags by identity.
+    let history = $state.raw([]);
     /** Index in `history` of the LAST applied step. -1 means "nothing applied".
      *  undo() decrements; redo() increments. New edits truncate everything
      *  past the pointer (the classic "you can't redo after editing" rule). */
@@ -340,6 +344,9 @@ export function createSvGridController(rawProps, domIdBase) {
      *  $state: it is written and read synchronously inside a single call and
      *  nothing renders from it. */
     let historyGroupId = undefined;
+    /** The consumer's mark for the steps recorded from now on (`api.setHistoryTag`);
+     *  not $state for the same reason. */
+    let historyTag = undefined;
     let tooltip = $state(null);
     let tooltipTimer = null;
     // ---- Find-in-grid ----------------------------------------------------
@@ -410,7 +417,28 @@ export function createSvGridController(rawProps, domIdBase) {
     // catch-all gridStateVersion, so navigation doesn't rebuild 1M rows.
     let dataStateVersion = $state(0);
     const selectionColumnWidth = 44;
+    const detailToggleColumnWidth = 36;
     const rowNumberColumnWidth = $derived(props.rowNumberWidth ?? 56);
+    const showDetailToggleEffective = $derived(props.showDetailToggle === true);
+    /**
+     * What the chevron on a row does, or null when the row has no detail to
+     * open: a detail row itself, a group or placeholder on a server model, a
+     * row `hasDetail` rules out, or a grid with nothing to call.
+     */
+    function detailToggleOf(row, rowIndex) {
+        const data = row.original;
+        if (props.isDetailRow?.(data, rowIndex))
+            return null;
+        const sg = props.serverGroup;
+        if (sg) {
+            if (!sg.toggleDetail || sg.isGroup(data) || (sg.hasDetail && !sg.hasDetail(data)))
+                return null;
+            return { open: sg.detailOpen?.(data) ?? false, toggle: () => sg.toggleDetail(data) };
+        }
+        if (!props.onDetailToggle || (props.hasDetail && !props.hasDetail(data)))
+            return null;
+        return { open: props.isDetailOpen?.(data) ?? false, toggle: () => props.onDetailToggle(data, rowIndex) };
+    }
     // A per-row `rowHeight` function already supplies heights, so auto-measuring
     // would fight it. Fixed numbers are fine - they become the pre-measure estimate.
     const autoRowHeightOn = $derived(props.autoRowHeight === true && typeof props.rowHeight !== "function");
@@ -563,6 +591,12 @@ export function createSvGridController(rawProps, domIdBase) {
     const showRowSelectionEffective = $derived(props.showRowSelection ??
         ((props.selectionMode ?? "both") === "row" ||
             (props.selectionMode ?? "both") === "both"));
+    /** The system columns to the left of the data: row numbers, selection, the detail toggle. */
+    const systemColumnsWidth = $derived((showRowNumbersEffective ? rowNumberColumnWidth : 0) +
+        (showRowSelectionEffective ? selectionColumnWidth : 0) +
+        (showDetailToggleEffective ? detailToggleColumnWidth : 0));
+    /** Where the detail-toggle column sticks: after the row numbers and the selection column. */
+    const detailToggleColumnLeft = $derived((showRowNumbersEffective ? rowNumberColumnWidth : 0) + (showRowSelectionEffective ? selectionColumnWidth : 0));
     // `selectable` is the shortcut alias, so it wins over the fine-grained prop,
     // which in turn wins over `selectionMode` - the same precedence the other
     // shortcuts use. Unlike them it starts ON (selectionMode defaults to 'both'),
@@ -661,35 +695,41 @@ export function createSvGridController(rawProps, domIdBase) {
     // the row-model pipeline is read before any later prop change could apply.
     // svelte-ignore state_referenced_locally
     const treeDataConfig = props.treeData;
+    // Pagination is intentionally NOT in the grid's row-model pipeline. The
+    // wrapper applies its own filters (filterMenuValues, globalFilter,
+    // valueFilters) on top of `grid.getRowModel().rows`. If pagination ran
+    // first, those filters would only see the visible page. Instead the wrapper
+    // paginates last - see `allRows` below.
+    //
+    // Built ONCE. Both inputs are captured at mount, and the stages keep state
+    // between runs: the sorted and filtered stages hold their last output so a
+    // data tick can repair it instead of recomputing (core.ts, `replacedRowsOf`).
+    // This used to be a getter that built fresh stages on every read, which
+    // threw that cache away on each run - a live feed re-sorted 100k rows on
+    // every tick and the row-model memo's `cachedPipeline` never matched.
+    const rowModels = {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        // External-sort mode: pass the rows through untouched so the consumer
+        // controls ordering (e.g. tree data that must preserve hierarchy).
+        sortedRowModel: externalSortEnabled
+            ? passthroughSortedRowModel
+            : createSortedRowModel(sortFns),
+        // Tree nesting replaces grouping when `treeData` is set - a row cannot
+        // be both a hierarchy node and bucketed under a group banner.
+        groupedRowModel: treeDataConfig
+            ? createTreeRowModel({
+                parentField: treeDataConfig.parentField,
+                idField: treeDataConfig.idField,
+            })
+            : createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+    };
     const grid = createSvGrid({
         get _features() {
             return resolveEffectiveFeatures();
         },
-        get _rowModels() {
-            // Pagination is intentionally NOT in the grid's row-model pipeline.
-            // The wrapper applies its own filters (filterMenuValues, globalFilter,
-            // valueFilters) on top of `grid.getRowModel().rows`. If pagination
-            // ran first, those filters would only see the visible page. Instead
-            // the wrapper paginates last - see `allRows` below.
-            return {
-                coreRowModel: createCoreRowModel(),
-                filteredRowModel: createFilteredRowModel(),
-                // External-sort mode: pass the rows through untouched so the consumer
-                // controls ordering (e.g. tree data that must preserve hierarchy).
-                sortedRowModel: externalSortEnabled
-                    ? passthroughSortedRowModel
-                    : createSortedRowModel(sortFns),
-                // Tree nesting replaces grouping when `treeData` is set - a row cannot
-                // be both a hierarchy node and bucketed under a group banner.
-                groupedRowModel: treeDataConfig
-                    ? createTreeRowModel({
-                        parentField: treeDataConfig.parentField,
-                        idField: treeDataConfig.idField,
-                    })
-                    : createGroupedRowModel(),
-                expandedRowModel: createExpandedRowModel(),
-            };
-        },
+        _rowModels: rowModels,
         get columns() {
             return internalColumns;
         },
@@ -1091,10 +1131,8 @@ export function createSvGridController(rawProps, domIdBase) {
     });
     /** Cumulative pixel offsets for left- and right-pinned columns. */
     const pinnedOffsets = $derived.by(function pinnedOffsets_d() {
-        const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
-        const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
         const left = {};
-        let leftAcc = rowNumberWidth + selectionWidth;
+        let leftAcc = systemColumnsWidth;
         for (const id of effectivePinning.left) {
             // Hidden pinned columns don't render, so they must contribute neither an
             // offset entry nor width - otherwise the next visible pinned column is
@@ -1611,16 +1649,13 @@ export function createSvGridController(rawProps, domIdBase) {
     // so consumers don't see spurious callbacks during re-renders.
     let lastCellRangeSerialized = "";
     $effect(() => {
-        const a = selectionRange.anchor;
-        const f = selectionRange.focus;
-        const ranges = a && f
-            ? [[
-                    Math.min(a.rowIndex, f.rowIndex),
-                    Math.min(a.colIndex, f.colIndex),
-                    Math.max(a.rowIndex, f.rowIndex),
-                    Math.max(a.colIndex, f.colIndex),
-                ]]
-            : [];
+        // Every rectangle, the committed ones a Ctrl+click added and the
+        // active one last, the order getSelectionRects gives: a consumer's
+        // status bar and shading cover the whole selection, not only its last
+        // range. Depend on selectionRanges so a change to the committed set
+        // re-runs this too.
+        void selectionRanges;
+        const ranges = getSelectionRects().map((r) => [r.minRow, r.minCol, r.maxRow, r.maxCol]);
         const serialized = JSON.stringify(ranges);
         if (serialized === lastCellRangeSerialized)
             return;
@@ -2651,6 +2686,16 @@ export function createSvGridController(rawProps, domIdBase) {
         return total;
     });
     /** The declared or dragged height of one row; measured under auto height. */
+    /** A detail row's declared height, or null when the row is not one (or none is declared). */
+    function detailRowHeightPx(i) {
+        const dh = props.detailRowHeight;
+        if (dh == null || !props.isDetailRow)
+            return null;
+        const row = allRows[i];
+        if (!row || !props.isDetailRow(row.original, i))
+            return null;
+        return typeof dh === "function" ? dh(row.original) : dh;
+    }
     function rowSizePxOf(i) {
         if (isRowCollapsed(i))
             return 0;
@@ -2659,6 +2704,9 @@ export function createSvGridController(rawProps, domIdBase) {
         const own = rowResizeHeightPx(i);
         if (own != null)
             return own;
+        const detail = detailRowHeightPx(i);
+        if (detail != null)
+            return detail;
         const rh = props.rowHeight;
         return typeof rh === "function" ? rh(i) : (rh ?? 30);
     }
@@ -2669,10 +2717,91 @@ export function createSvGridController(rawProps, domIdBase) {
             top += rowSizePxOf(k);
         return top;
     }
+    const NO_STICKY = [];
+    /** Whether a row is a group and how deep it sits, for any of the three tree sources. */
+    function rowGroupLevel(row) {
+        const sg = props.serverGroup;
+        if (sg) {
+            const data = row.original;
+            return { group: sg.isGroup(data), level: sg.level(data) };
+        }
+        // Client grouping and tree data: an expandable row is the group (a tree
+        // row is a data row too, which is why isGroupRow() excludes it, but for
+        // the band it is the parent its children scroll under).
+        if (typeof row.getCanExpand === "function" && row.getCanExpand())
+            return { group: true, level: row.depth ?? 0 };
+        return { group: false, level: row.depth ?? 0 };
+    }
+    /** The first row whose bottom edge is under the header, in row-index space. */
+    const firstRowUnderHeader = $derived.by(function firstRowUnderHeader_d() {
+        if (allRows.length === 0)
+            return -1;
+        if (rowVirtualizationEnabled) {
+            virtualizer.version;
+            const offset = virtualizer.getState().scrollOffset;
+            const hit = virtualRows.find((it) => it.end > offset);
+            return hit ? hit.index : -1;
+        }
+        rowResizeVersion;
+        autoRowHeightVersion;
+        const top = scrollMetrics.scrollTop;
+        let acc = 0;
+        let i = 0;
+        while (i < allRows.length - 1 && acc + rowSizePxOf(i) <= top) {
+            acc += rowSizePxOf(i);
+            i += 1;
+        }
+        return i;
+    });
+    const stickyGroupRows = $derived.by(function stickyGroupRows_d() {
+        if (!props.stickyGroupRows)
+            return NO_STICKY;
+        const first = firstRowUnderHeader;
+        if (first < 0)
+            return NO_STICKY;
+        const head = allRows[first];
+        if (!head)
+            return NO_STICKY;
+        // A group row at level L, or a leaf at level L, has its ancestors at
+        // levels L-1 .. 0, each the nearest group row above at that level.
+        let want = rowGroupLevel(head).level - 1;
+        if (want < 0)
+            return NO_STICKY;
+        const found = [];
+        for (let i = first - 1; i >= frozenRowCount && want >= 0; i -= 1) {
+            const row = allRows[i];
+            const info = rowGroupLevel(row);
+            if (info.group && info.level === want) {
+                found.push({ row, rowIndex: i });
+                want -= 1;
+            }
+        }
+        if (found.length === 0)
+            return NO_STICKY;
+        found.reverse();
+        rowResizeVersion;
+        autoRowHeightVersion;
+        let top = headerHeight + frozenBandHeight;
+        return found.map((f) => {
+            const at = top;
+            const size = rowSizePxOf(f.rowIndex);
+            top += size;
+            return { ...f, top: at, size };
+        });
+    });
+    /** The band's height under virtualization, taken off the top spacer. */
+    const stickyBandHeight = $derived(rowVirtualizationEnabled ? stickyGroupRows.reduce((sum, s) => sum + s.size, 0) : 0);
+    /** Without virtualization the real row sticks: its top, or undefined. */
+    function stickyTopOfRow(rowIndex) {
+        if (rowVirtualizationEnabled || stickyGroupRows.length === 0)
+            return undefined;
+        return stickyGroupRows.find((s) => s.rowIndex === rowIndex)?.top;
+    }
     // Spacer heights in DOM space. With scaling inert these equal the original
-    // virtualRowStart / virtualRowBottomSpacer. The frozen band is in the flow
-    // before the spacer whatever the window shows, so it comes off the spacer.
-    const rowTopSpacer = $derived(Math.max(virtualRowStart - rowOffsetAdjustment - frozenBandHeight, 0));
+    // virtualRowStart / virtualRowBottomSpacer. The frozen band and the sticky
+    // group band are in the flow before the spacer whatever the window shows,
+    // so they come off the spacer.
+    const rowTopSpacer = $derived(Math.max(virtualRowStart - rowOffsetAdjustment - frozenBandHeight - stickyBandHeight, 0));
     const rowBottomSpacer = $derived(Math.max(rowDomTotalSize - (virtualRowEnd - rowOffsetAdjustment), 0));
     const virtualColumns = $derived.by(function virtualColumns_d() {
         columnVirtualizerVersion;
@@ -2757,9 +2886,7 @@ export function createSvGridController(rawProps, domIdBase) {
      *  `fittedColumnWidths`, so the overflow decision settles in the same
      *  render where fit-scaling lands - no race, no scrollbar flash. */
     const hasHorizontalOverflow = $derived.by(function hasHorizontalOverflow_d() {
-        const fixedCols = (showRowNumbersEffective ? rowNumberColumnWidth : 0) +
-            (showRowSelectionEffective ? selectionColumnWidth : 0);
-        let total = fixedCols;
+        let total = systemColumnsWidth;
         for (const column of allColumns)
             total += getColumnWidth(column.id);
         // +1 to tolerate sub-pixel rounding residue from `fitColumns`.
@@ -3208,8 +3335,12 @@ export function createSvGridController(rawProps, domIdBase) {
             : typeof rh === "function"
                 ? rh
                 : (rh ?? 30);
-        const estimateSize = rowResizeHeights.size > 0 || collapsedRows.size > 0
+        // Detail rows have their own height; only when the props say so does
+        // the per-index lookup replace the uniform fast path.
+        const detailOn = props.detailRowHeight != null && !!props.isDetailRow;
+        const estimateSize = rowResizeHeights.size > 0 || collapsedRows.size > 0 || detailOn
             ? (index) => rowResizeHeightPx(index) ??
+                detailRowHeightPx(index) ??
                 (typeof base === "function" ? base(index) : base)
             : base;
         virtualizer.setOptions({
@@ -3320,6 +3451,18 @@ export function createSvGridController(rawProps, domIdBase) {
         // onto a server.
         if (props.rowSelectionModel)
             return props.rowSelectionModel.headerState();
+        // Nothing checked is the common case and needs no walk: this derived
+        // re-runs on every data change, and on a 100k-row live feed the filter
+        // below was 30 ms per tick spent to conclude "none".
+        let anyChecked = false;
+        for (const id in rowSelectionState) {
+            if (rowSelectionState[id]) {
+                anyChecked = true;
+                break;
+            }
+        }
+        if (!anyChecked)
+            return "none";
         const selectable = allRows.filter((row) => !isGroupRow(row) && !placeholderStateOf(row));
         if (!selectable.length)
             return "none";
@@ -3367,8 +3510,6 @@ export function createSvGridController(rawProps, domIdBase) {
         const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id] && !hiddenByGroupCollapse[c.id] && !collapsedColumns[c.id]);
         if (!cols.length)
             return null;
-        const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
-        const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
         // Reserve the custom vertical scrollbar's width when it's visible. It
         // overlays the right 16px of the viewport (absolute, z-index 40) and
         // does NOT shrink clientWidth, so without this the last fitted column
@@ -3376,8 +3517,7 @@ export function createSvGridController(rawProps, domIdBase) {
         // is hidden behind the opaque scrollbar.
         const scrollbarWidth = hasVerticalOverflow ? 16 : 0;
         const target = (scrollContainer?.clientWidth ?? 0) -
-            rowNumberWidth -
-            selectionWidth -
+            systemColumnsWidth -
             scrollbarWidth;
         if (target <= 0)
             return null;
@@ -3779,6 +3919,8 @@ export function createSvGridController(rawProps, domIdBase) {
         set historyPtr(v) { historyPtr = v; },
         get historyGroupId() { return historyGroupId; },
         set historyGroupId(v) { historyGroupId = v; },
+        get historyTag() { return historyTag; },
+        set historyTag(v) { historyTag = v; },
         get historyVersion() { return historyVersion; },
         set historyVersion(v) { historyVersion = v; },
         get tooltip() { return tooltip; },
@@ -3815,6 +3957,11 @@ export function createSvGridController(rawProps, domIdBase) {
         get gridStateVersion() { return gridStateVersion; },
         set gridStateVersion(v) { gridStateVersion = v; },
         get selectionColumnWidth() { return selectionColumnWidth; },
+        get detailToggleColumnWidth() { return detailToggleColumnWidth; },
+        get detailToggleColumnLeft() { return detailToggleColumnLeft; },
+        get showDetailToggleEffective() { return showDetailToggleEffective; },
+        get systemColumnsWidth() { return systemColumnsWidth; },
+        get detailToggleOf() { return detailToggleOf; },
         get rowNumberColumnWidth() { return rowNumberColumnWidth; },
         get showRowNumbersEffective() { return showRowNumbersEffective; },
         get filterOperatorOptions() { return filterOperatorOptions; },
@@ -4234,6 +4381,8 @@ export function createSvGridController(rawProps, domIdBase) {
         get frozenRowList() { return frozenRowList; },
         get frozenBandHeight() { return frozenBandHeight; },
         get frozenRowTop() { return frozenRowTop; },
+        get stickyGroupRows() { return stickyGroupRows; },
+        get stickyTopOfRow() { return stickyTopOfRow; },
         /** Record the height the user dragged a row to. */
         get setRowResizeHeight() { return setRowResizeHeight; },
         get isRowCollapsed() { return isRowCollapsed; },
@@ -4246,6 +4395,12 @@ export function createSvGridController(rawProps, domIdBase) {
             rowResizeVersion;
             return rowResizeHeightPx;
         },
+        /** The height row i is drawn at: dragged, measured, detail, declared or default. */
+        get rowSizePxOf() {
+            rowResizeVersion;
+            autoRowHeightVersion;
+            return rowSizePxOf;
+        },
         get virtualRowTotalSize() { return virtualRowTotalSize; },
         get virtualRowStart() { return virtualRowStart; },
         get virtualRowEnd() { return virtualRowEnd; },