@svgrid/grid 2.2.30 → 2.2.32

package/README.md

@@ -88,7 +88,7 @@ all wire up the moment you turn on the matching prop.
 
 - **Virtual scrolling** - row + column windowing; 100k x 100 stays smooth, with a 1M-row demo.
 - **Filtering** - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
-- **Editing** - 14 built-in `editorType`s (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) plus a `cellEditor` snippet slot for anything custom.
+- **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.
 - **Layout** - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.

package/dist/SvAvatar.svelte

@@ -71,5 +71,5 @@
   .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
   .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
   .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
-  .sv-avatar__status.is-away { background: var(--sg-warning, #f59e0b); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #d97706); }
 </style>

package/dist/SvCheckBox.svelte

@@ -56,8 +56,9 @@
 
 <SvField id={uid} {hint} {error} {required} {dir}>
   <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-readonly={readonly} class:is-invalid={invalid}>
+    <!-- role="checkbox" arrives via boxProps(), which the a11y pass cannot see through -->
+    <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
     <button
-      role="checkbox"
       class="sv-check__box"
       class:is-checked={checked && !indeterminate}
       class:is-indeterminate={indeterminate}

package/dist/SvCircularProgress.svelte

@@ -89,7 +89,7 @@
     position: relative; display: inline-flex; flex: none;
   }
   .sv-circ--success { --_c: var(--sg-success, #16a34a); }
-  .sv-circ--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-circ--warning { --_c: var(--sg-warning, #d97706); }
   .sv-circ--danger { --_c: var(--sg-danger, #dc2626); }
   .sv-circ__svg { display: block; transform: rotate(-90deg); }
   .sv-circ__track { stroke: var(--sg-border, #e2e8f0); }

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

@@ -260,6 +260,13 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly isCellEditableAt: (rowIndex: number, colIndex: number) => boolean;
     readonly sortDirectionByColumn: Record<string, false | "asc" | "desc">;
     readonly groupingColumns: any;
+    readonly groupDisplayMode: import("./group-display").GroupDisplayType;
+    readonly groupColumnMode: boolean;
+    readonly autoGroupCell: (row: Row<TData>, columnId: string) => {
+        label: string;
+        count: number;
+        depth: number;
+    } | null;
     readonly paginationState: any;
     readonly externalPaginationEnabled: boolean;
     readonly paginationTotalRows: number;
@@ -413,6 +420,15 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly rowVirtualizationEnabled: boolean;
     readonly columnVirtualizationEnabled: boolean;
     readonly virtualRows: import("./index").VirtualItem[];
+    readonly autoRowHeightOn: boolean;
+    /** Svelte action: measure this row and report its natural height. */
+    readonly measureRowHeight: (node: HTMLElement, index: number) => {
+        update(next: number): void;
+        destroy(): void;
+    };
+    /** A row's measured height, or undefined before it has been measured.
+     *  The non-virtualized body reads this directly (it has no virtual item). */
+    readonly measuredRowHeightPx: (index: number) => number | undefined;
     readonly virtualRowTotalSize: number;
     readonly virtualRowStart: number;
     readonly virtualRowEnd: number;
@@ -469,7 +485,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly getCellDisplayValue: (rowId: string, columnId: string, baseValue: unknown) => any;
     readonly getColumnAlign: typeof getColumnAlign;
     readonly editorOptionsCache: Record<string, CellEditorOption[]>;
+    asyncEditorOptions: Record<string, CellEditorOption[]>;
+    readonly asyncEditorOptionsPending: Set<string>;
+    readonly asyncEditorColumns: Set<string>;
     readonly getColumnEditorOptions: (column: Column<TData>, row?: Row<TData> | null | undefined) => CellEditorOption[];
+    readonly areEditorOptionsLoading: (column: Column<TData>, row?: Row<TData> | null | undefined) => boolean;
     readonly formatListCellValue: (column: Column<TData>, value: unknown, row?: Row<TData> | null | undefined) => string;
     readonly formatCellValue: (column: Column<TData>, value: unknown, row: Row<TData>) => string;
     readonly getPinnedCellValue: typeof getPinnedCellValue;

package/dist/SvGrid.controller.svelte.js

@@ -1,4 +1,4 @@
-import { applyExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
+import { applyExcelFilter, applyGroupAggregate, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createTreeRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
 import { createRowScrollScaling, resolveMaxDomHeight, } from "./virtualization/scroll-scaling";
 import "./sv-grid-scrollbar";
 import { computeColumnStat, formatsNeedingStats, formatNeedsStats, } from "./conditional-formatting";
@@ -17,6 +17,7 @@ import { createAlignedGrids, } from "./aligned-grids";
 import { resolveColumnTypes, } from "./column-types";
 import { computeColumnGroupMeta, hiddenLeavesForCollapse, } from "./column-groups";
 import { resolveColumnId } from "./column-id";
+import { buildAutoGroupColumns, insertGroupFooters, paginateGroupedRows } from "./group-display";
 import { createGridApi, } from "./build-api";
 import { createClipboard, } from "./clipboard";
 import { resolveGridMessages } from "./grid-messages";
@@ -463,6 +464,10 @@ export function createSvGridController(rawProps, domIdBase) {
     // consumer. Reactive (unlike sort/filter) so pageIndex/rowCount can change.
     const externalPaginationEnabled = $derived(props.externalPagination === true);
     const passthroughSortedRowModel = ({ rows }) => rows;
+    // Client tree data. Structural like external sort, so captured once at mount -
+    // the row-model pipeline is read before any later prop change could apply.
+    // svelte-ignore state_referenced_locally
+    const treeDataConfig = props.treeData;
     const grid = createSvGrid({
         get _features() {
             return resolveEffectiveFeatures();
@@ -481,7 +486,14 @@ export function createSvGridController(rawProps, domIdBase) {
                 sortedRowModel: externalSortEnabled
                     ? passthroughSortedRowModel
                     : createSortedRowModel(sortFns),
-                groupedRowModel: createGroupedRowModel(),
+                // 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(),
             };
         },
@@ -559,12 +571,108 @@ export function createSvGridController(rawProps, domIdBase) {
         lastSeededOrder = incoming;
         userColumnOrder = props.columnOrder ? [...props.columnOrder] : [];
     });
+    // Declared here rather than beside the other pagination/state derivations:
+    // the auto-group column pipeline below reads it, and a `const` used above its
+    // declaration is a type error even though `$derived` is lazy enough at runtime.
+    const groupingColumns = $derived.by(() => {
+        gridStateVersion;
+        return grid.getState().grouping ?? [];
+    });
+    /**
+     * Row-grouping display mode. `groupRows` (the default) renders a full-width
+     * banner per group - the historical behaviour. `singleColumn` folds every
+     * grouping level into one synthetic column; `multipleColumns` gives each
+     * grouped field its own. Both hide the grouped SOURCE columns, since their
+     * values now live in the auto column.
+     */
+    const groupDisplayMode = $derived(props.groupDisplayMode ?? "groupRows");
+    const autoGroupSpec = $derived(buildAutoGroupColumns(groupingColumns, groupDisplayMode));
+    /** True when group state is shown in columns rather than banner rows. */
+    const groupColumnMode = $derived(autoGroupSpec.autoColumns.length > 0);
+    /**
+     * The synthetic auto-group columns as real `Column` objects, so the rest of
+     * the pipeline (widths, pinning, virtualization, headers) treats them like
+     * any other column. They carry no `field` - their cell content is resolved
+     * from the row's group state at render time.
+     */
+    const autoGroupColumns = $derived.by(() => {
+        if (!groupColumnMode)
+            return [];
+        const sourceById = new Map(grid.getAllColumns().map((c) => [c.id, c]));
+        return autoGroupSpec.autoColumns.map((spec) => {
+            const source = spec.field ? sourceById.get(spec.field) : undefined;
+            const sourceHeader = source?.columnDef.header;
+            const header = spec.field == null
+                ? (props.autoGroupColumnHeader ?? "Group")
+                : typeof sourceHeader === "string"
+                    ? sourceHeader
+                    : spec.field;
+            const column = {
+                id: spec.id,
+                depth: 0,
+                columnDef: {
+                    header,
+                    width: props.autoGroupColumnWidth ?? 220,
+                    sortable: false,
+                    filterable: false,
+                },
+                getCanSort: () => false,
+                getCanFilter: () => false,
+                getIsSorted: () => false,
+                getToggleSortingHandler: () => () => { },
+            };
+            return column;
+        });
+    });
+    /**
+     * What an auto-group column shows for a given row.
+     *
+     * `singleColumn` puts every level in one column, so a group row renders its
+     * own level (indented by depth) and leaf rows stay blank - the ancestry is
+     * already visible in the banner rows above.
+     *
+     * `multipleColumns` gives each grouped field a column, so a group row only
+     * writes into the column matching ITS level and leaves the others blank.
+     *
+     * Returns null when the cell should render nothing.
+     */
+    function autoGroupCell(row, columnId) {
+        if (!isGroupRow(row))
+            return null;
+        const depth = row.depth ?? 0;
+        if (columnId !== "__autoGroup") {
+            // multipleColumns: only the column for this row's own level renders.
+            const field = groupingColumns[depth];
+            if (!field || `__group_${field}` !== columnId)
+                return null;
+        }
+        const groupingColumnId = groupingColumns[depth] ?? "";
+        const sourceColumn = grid
+            .getAllColumns()
+            .find((c) => c.id === groupingColumnId);
+        const raw = row.getCellValueByColumnId(groupingColumnId);
+        const label = sourceColumn
+            ? formatCellValue(sourceColumn, raw, row)
+            : String(raw ?? "");
+        return {
+            label,
+            count: row.leafCount ?? row.subRows?.length ?? 0,
+            // singleColumn indents by level; multipleColumns already separates them.
+            depth: columnId === "__autoGroup" ? depth : 0,
+        };
+    }
     const allColumns = $derived.by(() => {
         let raw = grid
             .getAllColumns()
             .filter((column) => !hiddenColumns[column.id] &&
             !hiddenByGroupCollapse[column.id] &&
-            !isHiddenByResponsive(column));
+            !isHiddenByResponsive(column) &&
+            // In a column display mode the grouped columns are folded into the
+            // auto column(s), so showing them too would just duplicate the value.
+            !autoGroupSpec.hiddenSourceIds.has(column.id));
+        // Auto-group columns lead, like a row header.
+        if (autoGroupColumns.length)
+            raw = [...autoGroupColumns, ...raw];
         // Apply user reorder (if any). Unknown ids in userColumnOrder are
         // skipped; columns not in userColumnOrder keep their original
         // relative order after the user-ordered ones.
@@ -609,8 +717,21 @@ export function createSvGridController(rawProps, domIdBase) {
         const headers = [];
         for (const column of allColumns) {
             const header = byId.get(column.id);
-            if (header)
+            if (header) {
                 headers.push(header);
+                continue;
+            }
+            // Auto-group columns have no engine header. Synthesize one rather than
+            // skipping: the header row indexes `headers` BY POSITION against the
+            // rendered columns, so a gap would shift every later header by one.
+            const synthetic = {
+                id: column.id,
+                isPlaceholder: false,
+                colSpan: 1,
+                column,
+                getContext: () => ({ header: synthetic, column, table: grid }),
+            };
+            headers.push(synthetic);
         }
         return [{ id: base[0].id, headers }];
     });
@@ -814,10 +935,6 @@ export function createSvGridController(rawProps, domIdBase) {
             directions[column.id] = column.getIsSorted();
         return directions;
     });
-    const groupingColumns = $derived.by(() => {
-        gridStateVersion;
-        return grid.getState().grouping ?? [];
-    });
     const paginationState = $derived.by(() => {
         gridStateVersion;
         return grid.getState().pagination ?? { pageIndex: 0, pageSize: 10 };
@@ -917,15 +1034,132 @@ export function createSvGridController(rawProps, domIdBase) {
      * the full dataset rather than the current page (see the comment above
      * `_rowModels`).
      */
-    const allRows = $derived.by(() => {
-        const rows = allRowsBeforePagination;
-        // External pagination: `data` already IS the current page - never slice.
+    /**
+     * Grouped pagination. `allRowsBeforePagination` interleaves group banners with
+     * data rows, so a plain slice spends the page budget on banners - ten groups of
+     * two at `pageSize: 10` used to show about three data rows (#73). When grouping
+     * is active we page by DATA rows and reprint each page's ancestor banners.
+     * Null when grouping is off, so the flat path stays a cheap slice.
+     */
+    const groupedPage = $derived.by(() => {
         if (!paginationEnabled || externalPaginationEnabled)
-            return rows;
+            return null;
+        if (!groupingColumns.length)
+            return null;
         const { pageIndex, pageSize } = paginationState;
-        const start = pageIndex * pageSize;
-        return rows.slice(start, start + pageSize);
+        return paginateGroupedRows(allRowsBeforePagination, {
+            getDepth: (row) => row.depth ?? 0,
+            isGroup: (row) => isGroupRow(row),
+            // A collapsed group is the visible unit and takes a page slot; an expanded
+            // one is a banner reprinted above its children.
+            isExpanded: (row) => row.getIsExpanded?.() === true,
+            pageIndex,
+            pageSize,
+        });
     });
+    /**
+     * The grand-total row: one synthetic row carrying each column's `aggregate`
+     * over the whole filtered set. Shaped like a group footer so it renders
+     * through the normal cell path - totals land under the columns they belong
+     * to, and `getCanExpand`/`getIsExpanded` are off so nothing treats it as a
+     * banner. Returns null when no column aggregates (nothing to total).
+     *
+     * Aggregates the LEAF rows: `allRowsBeforePagination` interleaves group
+     * banners once grouping is on, and those carry per-group subtotals that
+     * would otherwise be summed a second time.
+     */
+    const buildGrandTotalRow = () => {
+        const leaves = allRowsBeforePagination.filter((row) => !isGroupRow(row));
+        const columns = grid.getAllColumns();
+        const original = {};
+        let hasAggregate = false;
+        for (const column of columns) {
+            const field = column.columnDef.field;
+            const agg = column.columnDef.aggregate;
+            if (!field || !agg)
+                continue;
+            hasAggregate = true;
+            original[field] = applyGroupAggregate(agg, column.id, leaves);
+        }
+        if (!hasAggregate)
+            return null;
+        return {
+            id: "__grand_total__",
+            index: -1,
+            original,
+            depth: 0,
+            subRows: [],
+            leafCount: leaves.length,
+            __groupFooter: true,
+            __grandTotal: true,
+            getCanExpand: () => false,
+            getIsExpanded: () => false,
+            toggleExpanded: () => { },
+            getIsSelected: () => false,
+            toggleSelected: () => { },
+            getAllCells: () => [],
+            getCellValueByColumnId: (columnId) => {
+                const col = columns.find((c) => c.id === columnId);
+                const field = col?.columnDef.field;
+                return field && field in original ? original[field] : undefined;
+            },
+        };
+    };
+    /**
+     * Visible rows for the current page. Applied last so filters operate on
+     * the full dataset rather than the current page (see the comment above
+     * `_rowModels`).
+     */
+    const allRows = $derived.by(() => {
+        const paged = (() => {
+            const rows = allRowsBeforePagination;
+            // External pagination: `data` already IS the current page - never slice.
+            if (!paginationEnabled || externalPaginationEnabled)
+                return rows;
+            if (groupedPage)
+                return groupedPage.rows;
+            const { pageIndex, pageSize } = paginationState;
+            const start = pageIndex * pageSize;
+            return rows.slice(start, start + pageSize);
+        })();
+        const wantGroupFooters = Boolean(props.groupFooters) && groupingColumns.length > 0;
+        // The grand total belongs at the END of the dataset, so it is appended only
+        // on the last page - otherwise every page would end in a "total" that isn't
+        // one. With pagination off (or external, where the consumer owns paging and
+        // `data` is already the page) there is only one page to be last.
+        const isLastPage = (() => {
+            if (!paginationEnabled || externalPaginationEnabled)
+                return true;
+            const { pageIndex, pageSize } = paginationState;
+            const total = groupedPage ? groupedPage.dataRowCount : allRowsBeforePagination.length;
+            return pageIndex >= Math.ceil(total / pageSize) - 1;
+        })();
+        const wantGrandTotal = Boolean(props.grandTotalRow) && isLastPage;
+        if (!wantGroupFooters && !wantGrandTotal)
+            return paged;
+        // Footers are inserted AFTER paging so they never eat page budget. A footer
+        // is a clone of its group row, which already carries the group's aggregate
+        // values - so it renders through the normal cell path and the totals land
+        // under the columns they belong to, with `getCanExpand` off so nothing
+        // treats it as a banner.
+        return insertGroupFooters(paged, {
+            getDepth: (row) => row.depth ?? 0,
+            isGroup: (row) => isGroupRow(row),
+            includeGroupFooter: wantGroupFooters,
+            includeGrandTotalFooter: wantGrandTotal,
+            makeGrandTotal: buildGrandTotalRow,
+            makeFooter: (group) => ({
+                ...group,
+                id: `${group.id}__footer`,
+                subRows: [],
+                __groupFooter: true,
+                getCanExpand: () => false,
+                getIsExpanded: () => false,
+            }),
+        });
+    });
+    /** Rows the pager divides into pages: data rows only once grouping is on. */
+    const paginatedRowTotal = $derived(groupedPage ? groupedPage.dataRowCount : allRowsBeforePagination.length);
     // When a filter reduces the dataset, the stored pageIndex can point beyond
     // the last valid page. Reset to page 0 so the grid never shows a blank body.
     // Skipped for external pagination, where the consumer owns pageIndex.
@@ -933,14 +1167,14 @@ export function createSvGridController(rawProps, domIdBase) {
         if (!paginationEnabled || externalPaginationEnabled)
             return;
         const { pageIndex, pageSize } = paginationState;
-        const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
+        const pageCount = Math.ceil(paginatedRowTotal / pageSize);
         if (pageCount > 0 && pageIndex >= pageCount) {
             grid.setPagination({ pageIndex: 0, pageSize });
         }
     });
     // Footer-facing pagination values. In external mode they come from the
     // consumer-controlled props; otherwise from the local row model + state.
-    const paginationTotalRows = $derived(externalPaginationEnabled ? (props.rowCount ?? 0) : allRowsBeforePagination.length);
+    const paginationTotalRows = $derived(externalPaginationEnabled ? (props.rowCount ?? 0) : paginatedRowTotal);
     const paginationPageIndex = $derived(externalPaginationEnabled ? (props.pageIndex ?? 0) : paginationState.pageIndex);
     const paginationPageSize = $derived(externalPaginationEnabled ? (props.pageSize ?? 10) : paginationState.pageSize);
     const rowSelectionState = $derived.by(() => {
@@ -1893,6 +2127,72 @@ export function createSvGridController(rawProps, domIdBase) {
         el.addEventListener("scroll-change", onHorizontal);
         return () => el.removeEventListener("scroll-change", onHorizontal);
     });
+    // --- Auto row height -------------------------------------------------
+    // Measured natural heights, keyed by row index. A plain Map (not $state):
+    // it is written from a ResizeObserver during layout, and making it reactive
+    // would re-run the render that is doing the measuring. `autoRowHeightVersion`
+    // is the reactive signal instead, bumped only when a height actually changes.
+    const measuredRowHeights = new Map();
+    let autoRowHeightVersion = $state(0);
+    // 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");
+    const autoRowHeightFallback = $derived(typeof props.rowHeight === "number" ? props.rowHeight : 30);
+    /** Report a row's measured height. Called by the view's measuring action.
+     *  Sub-pixel churn is ignored so a fractional layout can't loop. */
+    function reportRowHeight(index, height) {
+        if (!autoRowHeightOn || height <= 0)
+            return;
+        const prev = measuredRowHeights.get(index);
+        if (prev !== undefined && Math.abs(prev - height) < 1)
+            return;
+        measuredRowHeights.set(index, height);
+        autoRowHeightVersion += 1;
+    }
+    /**
+     * Svelte action for a `<tr>` under `autoRowHeight`. Measures the row once on
+     * mount and again whenever its content reflows (a resized column rewraps
+     * text), reporting the natural height back to the virtualizer.
+     *
+     * Uses the shared rAF-deferred observer: the callback bumps state that
+     * re-lays-out the observed element, which is exactly the pattern that trips
+     * "ResizeObserver loop completed with undelivered notifications" when handled
+     * synchronously.
+     */
+    function measureRowHeight(node, index) {
+        let current = index;
+        let stop = null;
+        const measure = () => reportRowHeight(current, node.getBoundingClientRect().height);
+        const attach = () => {
+            stop?.();
+            stop = autoRowHeightOn ? observeSizeRaf(node, measure) : null;
+            if (autoRowHeightOn)
+                measure();
+        };
+        attach();
+        return {
+            update(next) {
+                if (next === current)
+                    return;
+                current = next;
+                // A recycled row now shows different data - re-measure under its new index.
+                measure();
+            },
+            destroy() {
+                stop?.();
+            },
+        };
+    }
+    // Row index -> row identity changes when the data does, so stale measurements
+    // would size new rows by the old ones. Drop them when the row set changes.
+    $effect(() => {
+        void allRows.length;
+        void internalData;
+        if (!autoRowHeightOn || measuredRowHeights.size === 0)
+            return;
+        measuredRowHeights.clear();
+        autoRowHeightVersion += 1;
+    });
     $effect(() => {
         // When containerHeight is a string (e.g. "100%") the actual pixel height
         // depends on the parent layout - read it from the live scroll container.
@@ -1905,9 +2205,18 @@ export function createSvGridController(rawProps, domIdBase) {
             ? (scrollContainer?.clientHeight ?? 520)
             : (props.containerHeight ?? 520);
         const rh = props.rowHeight;
+        // Auto height: read measured sizes, falling back to the fixed rowHeight as
+        // the estimate for rows that have not rendered yet. Touch the version so a
+        // new measurement re-runs this effect (the Map itself is not reactive).
+        autoRowHeightVersion;
+        const estimateSize = autoRowHeightOn
+            ? (index) => measuredRowHeights.get(index) ?? autoRowHeightFallback
+            : typeof rh === "function"
+                ? rh
+                : (rh ?? 30);
         virtualizer.setOptions({
             count: allRows.length,
-            estimateSize: typeof rh === "function" ? rh : (rh ?? 30),
+            estimateSize,
             overscan: props.overscan ?? 8,
             viewportHeight,
         });
@@ -1967,6 +2276,20 @@ export function createSvGridController(rawProps, domIdBase) {
      *  are resolved on every call because they can change as other cells in
      *  the same row change (the whole point of cascading editors). */
     const editorOptionsCache = {};
+    // Resolved async `editorOptions`, keyed by column id (static source) or
+    // `columnId::rowId` (per-row cascade). Reactive so a fetch landing re-renders
+    // the open editor; `...Pending` both drives the loading state and dedupes the
+    // request across the many synchronous render calls.
+    let asyncEditorOptions = $state({});
+    // Deliberately NOT reactive: this is written during render (the resolver runs
+    // inside the template), and mutating $state there is a Svelte 5 error that
+    // takes the whole editor down with it. Only the resolved result needs to be
+    // reactive; the loading flag is derived from "thenable source, no result yet".
+    const asyncEditorOptionsPending = new Set();
+    // Columns whose per-row `editorOptions` has been observed returning a Promise.
+    // Lets the resolver answer from cache without re-invoking the source, so an
+    // async source fires one request per row instead of one per render.
+    const asyncEditorColumns = new Set();
     const headerSelectionState = $derived.by(() => {
         gridStateVersion;
         const selectable = allRows.filter((row) => !isGroupRow(row));
@@ -2503,6 +2826,9 @@ export function createSvGridController(rawProps, domIdBase) {
         get isCellEditableAt() { return isCellEditableAt; },
         get sortDirectionByColumn() { return sortDirectionByColumn; },
         get groupingColumns() { return groupingColumns; },
+        get groupDisplayMode() { return groupDisplayMode; },
+        get groupColumnMode() { return groupColumnMode; },
+        get autoGroupCell() { return autoGroupCell; },
         get paginationState() { return paginationState; },
         get externalPaginationEnabled() { return externalPaginationEnabled; },
         get paginationTotalRows() { return paginationTotalRows; },
@@ -2677,6 +3003,15 @@ export function createSvGridController(rawProps, domIdBase) {
         get rowVirtualizationEnabled() { return rowVirtualizationEnabled; },
         get columnVirtualizationEnabled() { return columnVirtualizationEnabled; },
         get virtualRows() { return virtualRows; },
+        get autoRowHeightOn() { return autoRowHeightOn; },
+        /** Svelte action: measure this row and report its natural height. */
+        get measureRowHeight() { return measureRowHeight; },
+        /** A row's measured height, or undefined before it has been measured.
+         *  The non-virtualized body reads this directly (it has no virtual item). */
+        get measuredRowHeightPx() {
+            autoRowHeightVersion;
+            return (index) => measuredRowHeights.get(index);
+        },
         get virtualRowTotalSize() { return virtualRowTotalSize; },
         get virtualRowStart() { return virtualRowStart; },
         get virtualRowEnd() { return virtualRowEnd; },
@@ -2718,7 +3053,12 @@ export function createSvGridController(rawProps, domIdBase) {
         get getCellDisplayValue() { return getCellDisplayValue; },
         get getColumnAlign() { return getColumnAlign; },
         get editorOptionsCache() { return editorOptionsCache; },
+        get asyncEditorOptions() { return asyncEditorOptions; },
+        set asyncEditorOptions(v) { asyncEditorOptions = v; },
+        get asyncEditorOptionsPending() { return asyncEditorOptionsPending; },
+        get asyncEditorColumns() { return asyncEditorColumns; },
         get getColumnEditorOptions() { return getColumnEditorOptions; },
+        get areEditorOptionsLoading() { return areEditorOptionsLoading; },
         get formatListCellValue() { return formatListCellValue; },
         get formatCellValue() { return formatCellValue; },
         get getPinnedCellValue() { return getPinnedCellValue; },
@@ -2854,7 +3194,7 @@ export function createSvGridController(rawProps, domIdBase) {
     const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard(ctx);
     const { computeSummaries, hasRenderedColumn } = createSummaries(ctx);
     const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, setFacetSelection, setFilterTokens, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
-    const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
+    const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, areEditorOptionsLoading, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
     const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, commitAndMoveByTab, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
     const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
     const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns(ctx);