@svgrid/grid 2.2.30 → 2.2.32

package/src/SvGrid.css

@@ -902,8 +902,8 @@
    pattern isn't being applied (it matches nothing until it compiles). */
 .sv-grid-filter-value.sv-grid-filter-value-invalid,
 .sv-grid-tp-filter-input.sv-grid-filter-value-invalid {
-  border-color: var(--sg-danger, #e5484d) !important;
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #e5484d) 45%, transparent);
+  border-color: var(--sg-danger, #dc2626) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #dc2626) 45%, transparent);
 }
 
 /* In / Not-in chip (token) input: chips + a flex-growing text box share one
@@ -2130,6 +2130,104 @@ select.sv-grid-fr-editor {
   background: var(--sg-selection-bg, #eaf2ff);
 }
 
+/* Group subtotal row (`groupFooters`). Renders through the normal cell path so
+   its totals sit under their own columns; a top rule + weight is what reads as
+   "this closes the group above". Lighter than the banner on purpose - the
+   banner opens a group, the footer just totals it. */
+.sv-grid-group-footer-row > .sv-grid-cell {
+  background: var(--sg-header-bg, #eef2f8);
+  border-top: 1px solid var(--sg-border, #d7dce5);
+  font-weight: 600;
+}
+
+/* Auto row height (`autoRowHeight`). The default cell truncates to one line
+   (nowrap + ellipsis + overflow hidden), which would make a measured row height
+   pointless - every row would measure the same. Let the text wrap so the row
+   has something to grow to, and pad vertically since there is no fixed height
+   centring the single line any more. */
+.sv-grid-row-auto-height > .sv-grid-cell {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  overflow: visible;
+  text-overflow: clip;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  /* Cells stretch to the row's height rather than centring on one line. */
+  vertical-align: top;
+}
+
+/* Grand total (`grandTotalRow`). One step heavier than a group subtotal: it
+   closes the whole dataset, not one group, so it takes a double top rule. */
+.sv-grid-grand-total-row > .sv-grid-cell {
+  border-top: 3px double var(--sg-border, #d7dce5);
+  font-weight: 700;
+}
+
+/* Client tree data (`treeData`). The indent is a sized spacer rather than
+   padding on the cell so conditional-format backgrounds and data bars still
+   span the full cell width. */
+.sv-grid-tree-indent {
+  display: inline-block;
+  flex: none;
+}
+.sv-grid-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: none;
+  margin-right: 3px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--sg-muted, #64748b);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sv-grid-tree-toggle:hover {
+  background: var(--sg-header-bg, #eef2f8);
+  color: var(--sg-fg, #0f172a);
+}
+/* One chevron for every expander in the library - the grid's tree rows, its
+   group banners and auto-group columns, SvGroupCell and SvTree all draw the
+   same `chevron-right` and rotate it open, rather than swapping between two
+   different glyphs. */
+.sv-grid-tree-toggle .sv-grid-icon,
+.sv-grid-group-toggle .sv-grid-icon {
+  width: 12px;
+  height: 12px;
+  transition: transform 0.15s ease;
+}
+.sv-grid-tree-toggle[aria-expanded="true"] .sv-grid-icon,
+.sv-grid-group-toggle[aria-expanded="true"] .sv-grid-icon {
+  transform: rotate(90deg);
+}
+.sv-grid-tree-toggle:focus-visible {
+  outline: 2px solid var(--sg-accent, #2563eb);
+  outline-offset: 1px;
+}
+/* Auto-group column cell (`groupDisplayMode: singleColumn | multipleColumns`).
+   The group row is an ordinary row here, so only the label needs weight - the
+   full-width banner styling does not apply. */
+.sv-grid-autogroup-label {
+  font-weight: 600;
+  color: var(--sg-fg, #0f172a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Keeps a childless row's value on the same x as its expandable siblings. */
+.sv-grid-tree-spacer {
+  display: inline-block;
+  width: 14px;
+  flex: none;
+  margin-right: 3px;
+}
+
 .sv-grid-group-cell {
   padding: 0 12px;
 }
@@ -2209,7 +2307,9 @@ select.sv-grid-fr-editor {
   line-height: 1.4;
   resize: vertical;
   outline: none;
-  box-shadow: var(--sg-focus-ring, 0 0 0 2px rgba(99, 102, 241, 0.40));
+  /* --sg-focus-ring is a COLOR everywhere else (`outline: 2px solid ...`).
+     Consume it as one here too, rather than as a whole box-shadow value. */
+  box-shadow: 0 0 0 2px var(--sg-focus-ring, rgba(99, 102, 241, 0.40));
 }
 
 .sv-grid-autocomplete {

package/src/SvGrid.svelte

@@ -256,13 +256,32 @@
   // Server-side group / tree a11y: aria-level on every tree row, aria-expanded
   // on the expandable ones. Undefined (attribute omitted) when serverGroup is off.
   const serverGroup = $derived(opt.serverGroup);
+  // Client tree data reuses this same treegrid contract - the row model already
+  // records depth and expandability, so the accessors just read the row instead
+  // of calling back into consumer callbacks.
+  const treeData = $derived(opt.treeData);
   function sgAriaLevel(row: Row<TData>): number | undefined {
+    if (treeData) return (row.depth ?? 0) + 1;
     return serverGroup ? serverGroup.level(row.original as TData) + 1 : undefined;
   }
   function sgAriaExpanded(row: Row<TData>): boolean | undefined {
+    if (treeData) {
+      if (!row.getCanExpand?.()) return undefined;
+      return row.getIsExpanded?.() ?? false;
+    }
     if (!serverGroup || !serverGroup.isGroup(row.original as TData)) return undefined;
     return serverGroup.expanded?.(row.original as TData) ?? false;
   }
+  /** Column that carries the tree expander: explicit, else the first visible one. */
+  const treeColumnId = $derived(
+    treeData ? (treeData.column ?? allColumns[0]?.id ?? "") : "",
+  );
+  // Row-grouping display modes: group state lives in synthetic columns instead
+  // of a full-width banner row.
+  const groupColumnMode = $derived(ctrl.groupColumnMode);
+  const autoGroupCell = $derived(ctrl.autoGroupCell);
+  const isAutoGroupColumn = (id: string): boolean =>
+    id === "__autoGroup" || id.startsWith("__group_");
   const sortDirectionByColumn = $derived(ctrl.sortDirectionByColumn);
   const groupingColumns = $derived(ctrl.groupingColumns);
   const paginationState = $derived(ctrl.paginationState);
@@ -286,10 +305,25 @@
     const rh = opt.rowHeight;
     return typeof rh === "function" ? rh(i) : (rh ?? 30);
   };
+  // Auto height applies to both bodies. The non-virtualized one has no
+  // `rowItem`, so it sizes from `rowSizePx` - but must still emit `min-height`
+  // and the wrap class, or `autoRowHeight` would silently do nothing whenever
+  // `virtualization={false}`.
+  const rowStyleFor = (i: number): string =>
+    autoRowHeightOn
+      ? `min-height: ${measuredRowHeightPx(i) ?? rowSizePx(i)}px;`
+      : `height: ${rowSizePx(i)}px;`;
   const columnVirtualizationEnabled = $derived(
     ctrl.columnVirtualizationEnabled,
   );
   const virtualRows = $derived(ctrl.virtualRows);
+  const autoRowHeightOn = $derived(ctrl.autoRowHeightOn);
+  const measureRowHeight = $derived(ctrl.measureRowHeight);
+  const measuredRowHeightPx = $derived(ctrl.measuredRowHeightPx);
+  // Under auto height the row must be free to grow, so it gets `min-height`
+  // (the pre-measure estimate) instead of a fixed `height` that would clip it.
+  const rowHeightStyle = (size: number): string =>
+    autoRowHeightOn ? `min-height: ${size}px;` : `height: ${size}px;`;
   // DOM-space spacer heights + capped total: identical to the logical
   // virtualizer values for normal grids, scaled down past
   // MAX_DOM_SCROLL_HEIGHT so huge grids stay scrollable to the last row on
@@ -405,6 +439,16 @@
   const hasMeasured = $derived(ctrl.hasMeasured);
   const onBodyScroll = $derived(ctrl.onBodyScroll);
   const computeRowClass = $derived(ctrl.computeRowClass);
+  // Group subtotal rows are clones of their banner, so they render through the
+  // normal cell path and their aggregates land under the right columns; only
+  // the class distinguishes them. Typed here rather than cast inline - an `as`
+  // inside template markup type-checks but breaks the vitest/build parse.
+  const isGroupFooterRow = (row: Row<TData>): boolean =>
+    (row as { __groupFooter?: boolean }).__groupFooter === true;
+  // The grand total is a group footer that closes the whole set rather than one
+  // group, so it carries both classes - shared chrome, heavier top rule.
+  const isGrandTotalRow = (row: Row<TData>): boolean =>
+    (row as { __grandTotal?: boolean }).__grandTotal === true;
   const computeCellClass = $derived(ctrl.computeCellClass);
   const computeCellTooltip = $derived(ctrl.computeCellTooltip);
   const computeCellValidity = $derived(ctrl.computeCellValidity);
@@ -412,6 +456,7 @@
   const getCellDisplayValue = $derived(ctrl.getCellDisplayValue);
   const getColumnAlign = $derived(ctrl.getColumnAlign);
   const getColumnEditorOptions = $derived(ctrl.getColumnEditorOptions);
+  const areEditorOptionsLoading = $derived(ctrl.areEditorOptionsLoading);
   const formatListCellValue = $derived(ctrl.formatListCellValue);
   const formatCellValue = $derived(ctrl.formatCellValue);
   const getPinnedCellValue = $derived(ctrl.getPinnedCellValue);
@@ -460,6 +505,21 @@
         ctrl.editingCell = null;
         ctrl.gridRootEl?.focus({ preventScroll: true });
       },
+      // Tab out of an editor: commit, then step to the adjacent cell. Without
+      // this a registered editor's Tab walks focus out of the grid (#48) - the
+      // built-in editors already route through the same helper.
+      onCommitAndMove: (v: unknown, direction: 1 | -1) => {
+        if (v !== undefined) updateEditingCellValue(v);
+        ctrl.commitAndMoveByTab(direction === -1);
+      },
+      // Close a popover editor without committing. Same effect as cancel today;
+      // named separately so an editor can distinguish "dismiss my panel" from
+      // "abandon the edit" if that ever diverges.
+      onRequestClose: () => {
+        ctrl.editingCell = null;
+        ctrl.gridRootEl?.focus({ preventScroll: true });
+      },
+      inCell: true,
     };
   }
   const onHeaderSortClick = $derived(ctrl.onHeaderSortClick);
@@ -869,6 +929,11 @@
         <path d="M6 6l12 12" />
       {:else if name === "chevron-down"}
         <path d="M6 9l6 6 6-6" />
+      {:else if name === "chevron-right"}
+        <!-- Same path SvTree's twisty uses, so every expander in the library
+             draws the same chevron. Rotated 90deg by CSS when expanded rather
+             than swapped for a second glyph. -->
+        <path d="m9 18 6-6-6-6" />
       {:else if name === "op-contains"}
         <circle cx="11" cy="11" r="6" />
         <path d="M20 20l-4.5-4.5" />
@@ -1027,7 +1092,12 @@
         </svg>
       {/if}
     {:else}
-      {#if row.depth > 0 && column.id === allColumns[0]?.id}
+      <!-- Indent for rows nested under a group BANNER. Tree data and the
+           column display modes draw their own indent next to the expander, so
+           this must not stack on top of theirs - `row.depth` is set in all
+           three cases and this used to fire for every one of them, leaving a
+           20px gap between a tree row's chevron and its text. -->
+      {#if row.depth > 0 && column.id === allColumns[0]?.id && !treeData && !groupColumnMode}
         <span
           class="sv-grid-group-child-indent"
           style={`width: ${row.depth * 20}px;`}
@@ -1073,10 +1143,75 @@
        color / weight and the icon-set glyph ride on the content wrapper.
        Falls straight through to `cellBody` when no format applies, so the
        common (unformatted) path pays nothing. -->
+  <!-- Tree expander + indentation, prefixed to the tree column's cell. Rows
+       without children still get the indent (and a spacer where the chevron
+       would be) so values stay aligned down a level. -->
+  {#snippet treeAffordance(row: Row<TData>)}
+    {@const canExpand = row.getCanExpand?.() ?? false}
+    <span
+      class="sv-grid-tree-indent"
+      style={`width:${(row.depth ?? 0) * (treeData?.indentPx ?? 12)}px;`}
+      aria-hidden="true"
+    ></span>
+    {#if canExpand}
+      <button
+        type="button"
+        class="sv-grid-tree-toggle"
+        aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
+        aria-label={row.getIsExpanded?.() ? "Collapse row" : "Expand row"}
+        onclick={(event) => {
+          event.stopPropagation();
+          row.toggleExpanded?.();
+        }}>{@render icon("chevron-right")}</button
+      >
+    {:else}
+      <span class="sv-grid-tree-spacer" aria-hidden="true"></span>
+    {/if}
+  {/snippet}
+
+  <!-- The group label + expander for a `singleColumn` / `multipleColumns`
+       auto-group cell. Indented by level in single-column mode; in multi-column
+       mode each level already has its own column, so no indent. -->
+  {#snippet autoGroupAffordance(row: Row<TData>, cell: { label: string; count: number; depth: number })}
+    <span
+      class="sv-grid-tree-indent"
+      style={`width:${cell.depth * 16}px;`}
+      aria-hidden="true"
+    ></span>
+    <button
+      type="button"
+      class="sv-grid-tree-toggle"
+      aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
+      aria-label={row.getIsExpanded?.() ? "Collapse group" : "Expand group"}
+      onclick={(event) => {
+        event.stopPropagation();
+        row.toggleExpanded?.();
+      }}>{@render icon("chevron-right")}</button
+    >
+    <span class="sv-grid-autogroup-label">{cell.label}</span>
+    <span class="sv-grid-group-count">({cell.count})</span>
+  {/snippet}
+
   {#snippet cellBodyWithFormat(
     row: Row<TData>,
     column: Column<TData>,
     cellValue: unknown,
+  )}
+    {#if groupColumnMode && isAutoGroupColumn(column.id)}
+      {@const agc = autoGroupCell(row, column.id)}
+      {#if agc}{@render autoGroupAffordance(row, agc)}{/if}
+    {:else}
+      {#if treeData && column.id === treeColumnId}
+        {@render treeAffordance(row)}
+      {/if}
+      {@render cellBodyFormatted(row, column, cellValue)}
+    {/if}
+  {/snippet}
+
+  {#snippet cellBodyFormatted(
+    row: Row<TData>,
+    column: Column<TData>,
+    cellValue: unknown,
   )}
     {@const cf = cellConditionalFormat(row, column, cellValue)}
     {#if cf && (cf.background || cf.dataBar || cf.icon || cf.color || cf.fontWeight != null)}
@@ -1175,10 +1310,12 @@
       ></button>
     {:else if ctrl.editingCell?.editorType === "list"}
       {@const opts = getColumnEditorOptions(column, row)}
+      {@const optsLoading = areEditorOptionsLoading(column, row)}
       {@const multi = column.columnDef.editorMultiple === true}
       {#if DropdownEditor}
         <DropdownEditor
           options={opts}
+          loading={optsLoading}
           value={ctrl.editingCell?.value}
           multiple={multi}
           placeholder="Select…"
@@ -1196,9 +1333,10 @@
       {/if}
     {:else if ctrl.editingCell?.editorType === "chips"}
       {@const opts = getColumnEditorOptions(column, row)}
+      {@const optsLoading = areEditorOptionsLoading(column, row)}
       {@const multi = column.columnDef.editorMultiple === true}
       {@const selectedArr = toValueArray(ctrl.editingCell?.value)}
-      {@render chipsEditor(opts, multi, selectedArr)}
+      {@render chipsEditor(opts, multi, selectedArr, optsLoading)}
     {:else if ctrl.editingCell?.editorType === "rating"}
       {@const ratingVal = Math.max(
         0,
@@ -1241,9 +1379,11 @@
       <!-- Custom dropdown: opens a themed popover identical in feel to
            the existing 'list' editor (single-select, no typeahead). -->
       {@const selectOpts = getColumnEditorOptions(column, row)}
+      {@const optsLoading = areEditorOptionsLoading(column, row)}
       {#if DropdownEditor}
         <DropdownEditor
           options={selectOpts}
+          loading={optsLoading}
           value={ctrl.editingCell?.value}
           multiple={false}
           placeholder="Select…"
@@ -1263,9 +1403,11 @@
       <!-- Searchable combobox: same popover as 'select' with a
            typeahead filter input baked in at the top. -->
       {@const richOpts = getColumnEditorOptions(column, row)}
+      {@const optsLoading = areEditorOptionsLoading(column, row)}
       {#if DropdownEditor}
         <DropdownEditor
           options={richOpts}
+          loading={optsLoading}
           value={ctrl.editingCell?.value}
           multiple={false}
           searchable={true}
@@ -1527,6 +1669,7 @@
     opts: CellEditorOption[],
     multi: boolean,
     selectedArr: Array<string | number>,
+    optsLoading: boolean,
   )}
     {#if opts.length > 0}
       <!-- Options-driven chips editor: defer to the custom dropdown,
@@ -1536,6 +1679,7 @@
       {#if DropdownEditor}
         <DropdownEditor
           options={opts}
+          loading={optsLoading}
           value={ctrl.editingCell?.value}
           multiple={multi}
           placeholder="Pick…"
@@ -1657,7 +1801,7 @@
         onclick={(event) => {
           event.stopPropagation();
           row.toggleExpanded?.();
-        }}>{row.getIsExpanded?.() ? "▾" : "▸"}</button
+        }}>{@render icon("chevron-right")}</button
       >
       <span class="sv-grid-group-label">{headerLabel}: {groupValue}</span>
       <span class="sv-grid-group-count"
@@ -1853,7 +1997,7 @@
             activeDescendantId,
             rowCount: allRows.length,
             colCount: allColumns.length,
-            treegrid: !!opt.serverGroup,
+            treegrid: !!opt.serverGroup || !!opt.treeData,
           })}
           onkeydown={onGridKeyDown}
           onpaste={onGridPaste}
@@ -2438,14 +2582,14 @@
                 {#if row}
                   {#if opt.isDetailRow?.(row.original as TData, rowIndex)}
                     {@render detailRowMarkup(row, rowIndex)}
-                  {:else if isGroupRow(row)}
+                  {:else if isGroupRow(row) && !groupColumnMode}
                     <tr
                       class="sv-grid-row sv-grid-group-row"
                       class:sv-grid-row-selected={isRowSelected(row.id)}
                       aria-level={row.depth + 1}
                       aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
                       {...getGridRowA11yProps(rowIndex + 1)}
-                      style={`height: ${rowItem.size}px;`}
+                      style={rowHeightStyle(rowItem.size)}
                     >
                       <td
                         class="sv-grid-cell sv-grid-group-cell"
@@ -2467,11 +2611,15 @@
                       class:sv-grid-row-alt={opt.zebraRows &&
                         rowIndex % 2 === 1}
                       class:sv-grid-row-draggable={rowDragManagedEffective}
+                      class:sv-grid-group-footer-row={isGroupFooterRow(row)}
+                      class:sv-grid-grand-total-row={isGrandTotalRow(row)}
+                      class:sv-grid-row-auto-height={autoRowHeightOn}
                       {...getGridRowA11yProps(rowIndex + 1)}
                       aria-level={sgAriaLevel(row)}
                       aria-expanded={sgAriaExpanded(row)}
                       {...rowDragAttrs(rowIndex)}
-                      style={`height: ${rowItem.size}px;`}
+                      style={rowHeightStyle(rowItem.size)}
+                      use:measureRowHeight={rowIndex}
                     >
                       {#if showRowNumbersEffective}
                         <td
@@ -2690,14 +2838,14 @@
               {#each allRows as row, rowIndex (row.id)}
                 {#if opt.isDetailRow?.(row.original as TData, rowIndex)}
                   {@render detailRowMarkup(row, rowIndex)}
-                {:else if isGroupRow(row)}
+                {:else if isGroupRow(row) && !groupColumnMode}
                   <tr
                     class="sv-grid-row sv-grid-group-row"
                     class:sv-grid-row-selected={isRowSelected(row.id)}
                     aria-level={row.depth + 1}
                     aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
                     {...getGridRowA11yProps(rowIndex + 1)}
-                    style={`height: ${rowSizePx(rowIndex)}px;`}
+                    style={rowStyleFor(rowIndex)}
                   >
                     <td
                       class="sv-grid-cell sv-grid-group-cell"
@@ -2719,11 +2867,15 @@
                     class:sv-grid-row-alt={opt.zebraRows &&
                       rowIndex % 2 === 1}
                     class:sv-grid-row-draggable={rowDragManagedEffective}
+                    class:sv-grid-group-footer-row={isGroupFooterRow(row)}
+                    class:sv-grid-grand-total-row={isGrandTotalRow(row)}
+                    class:sv-grid-row-auto-height={autoRowHeightOn}
                     {...getGridRowA11yProps(rowIndex + 1)}
                     aria-level={sgAriaLevel(row)}
                     aria-expanded={sgAriaExpanded(row)}
                     {...rowDragAttrs(rowIndex)}
-                    style={`height: ${rowSizePx(rowIndex)}px;`}
+                    style={rowStyleFor(rowIndex)}
+                    use:measureRowHeight={rowIndex}
                   >
                     {#if showRowNumbersEffective}
                       <td

package/src/SvGrid.types.ts

@@ -9,6 +9,7 @@ import type {
   TableFeatures,
 } from "./index";
 import type { ConditionalFormat } from "./conditional-formatting";
+import type { GroupDisplayType } from "./group-display";
 import type { GridMessages } from "./grid-messages";
 import type { GridPivotConfig } from "./pivot-view.svelte";
 import type { MenuItem } from "./SvMenuList.svelte";
@@ -1029,7 +1030,75 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   sortable?: boolean;
   filterable?: boolean;
   editable?: boolean;
+  /**
+   * Client-side tree data: nest rows into a hierarchy by parent id.
+   *
+   * ```svelte
+   * <SvGrid {data} {columns} treeData={{ parentField: 'managerId', column: 'name' }} />
+   * ```
+   *
+   * Unlike grouping, tree rows are real data rows - they keep their cells,
+   * editing and selection, and only gain an expander plus indentation in
+   * `column`. Rows whose parent is missing become roots rather than vanishing.
+   *
+   * For NESTED source data (`children: [...]`), flatten it first with
+   * `flattenTreeData(data, { childrenField: 'children' })` and point
+   * `parentField` at the `__parentId` it stamps on.
+   *
+   * Setting this replaces row grouping - a row cannot be both.
+   */
+  treeData?: {
+    /** Field holding each row's parent id. */
+    parentField: string;
+    /** Field holding the row's own id. Defaults to `'id'`. */
+    idField?: string;
+    /**
+     * Column id that carries the expander + indentation. Defaults to the first
+     * visible column.
+     */
+    column?: string;
+    /** Indent per depth level, in px. Default `12`. */
+    indentPx?: number;
+  };
   groupable?: boolean;
+  /**
+   * Render a subtotal row after each group's children, carrying that group's
+   * aggregate values under the columns they belong to (the columns with an
+   * `aggregate` set). Off by default.
+   *
+   * Footers are inserted after paging, so they never count against `pageSize` -
+   * a page shows its `pageSize` data rows plus whatever footers close on it.
+   */
+  groupFooters?: boolean;
+  /**
+   * Append a grand-total row at the very end, aggregating the whole filtered
+   * set (not just the current page) with each column's `aggregate` function.
+   *
+   * Independent of `groupFooters`: use it on a flat grid for a bottom totals
+   * line, or alongside group subtotals for both. Like group footers it is
+   * appended after paging, so it never counts against `pageSize` - but it is
+   * only appended on the LAST page, so a total never appears mid-dataset.
+   * Columns without an `aggregate` are left blank.
+   */
+  grandTotalRow?: boolean;
+  /**
+   * How grouped rows are displayed.
+   *
+   * - `groupRows` (default): a full-width banner row per group. Unchanged
+   *   behaviour - existing grids are untouched.
+   * - `singleColumn`: one synthetic "Group" column holding every level,
+   *   indented by depth.
+   * - `multipleColumns`: one synthetic column per grouped field.
+   *
+   * Both column modes hide the grouped source columns, since their values move
+   * into the auto column(s), and render group rows as ordinary rows so their
+   * aggregate cells line up under the real columns.
+   */
+  groupDisplayMode?: GroupDisplayType;
+  /** Header for the combined `singleColumn` auto-group column. Default `"Group"`. */
+  autoGroupColumnHeader?: string;
+  /** Width (px) of each auto-group column. Default `220`. */
+  autoGroupColumnWidth?: number;
   pageable?: boolean;
   loading?: boolean;
   /**
@@ -1107,6 +1176,18 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    *  per-row variable heights (e.g. an interactive row-resize feature).
    *  Defaults to 30. */
   rowHeight?: number | ((rowIndex: number) => number);
+  /**
+   * Size each row to its own content instead of a fixed height: cell text wraps
+   * and the row grows to fit the tallest cell. Rows are measured after they
+   * render, so this works with virtualization - `rowHeight` (or 30) is the
+   * estimate used before a row has been measured, which keeps the scrollbar
+   * stable while you scroll into new rows.
+   *
+   * Costs a measurement pass per row, so prefer a fixed `rowHeight` when your
+   * content is uniform. Ignored when `rowHeight` is a function (you are already
+   * supplying per-row heights).
+   */
+  autoRowHeight?: boolean;
   /**
    * Height (px) of a single column-header level row. With multi-level
    * (grouped) headers the total header height is `levels * headerHeight`,

package/src/SvGridDropdown.svelte

@@ -41,6 +41,10 @@
     onCommit?: () => void
     /** Called when the user dismisses (Escape, blur with no change). */
     onCancel?: () => void
+    /** The option list is still being fetched (async `editorOptions`). Shows a
+     *  loading line instead of "No options", which would read as "nothing to
+     *  pick" when the truth is "not here yet". */
+    loading?: boolean
   }
 
   let {
@@ -54,6 +58,7 @@
     onChange,
     onCommit,
     onCancel,
+    loading = false,
   }: Props = $props()
 
   /** Stable per-instance id used to build option ids for
@@ -158,9 +163,13 @@
   function updatePanelPosition() {
     if (!triggerEl) return
     // Use the smaller of (option count, 10) for the upward-flip math so
-    // a 3-option list doesn't think it needs 320px of headroom.
-    const visibleCount = Math.min(options.length, 10)
-    const estimatedHeight = visibleCount * optionRowHeight + (multiple ? 40 : 0) + 8
+    // a 3-option list doesn't think it needs 320px of headroom. Measured off
+    // the VISIBLE options - the search-filtered list is what actually renders,
+    // and an async list is empty at open time.
+    const visibleCount = Math.min(visibleOptions.length, 10)
+    const searchHeight = searchable ? 38 : 0
+    const estimatedHeight =
+      visibleCount * optionRowHeight + (multiple ? 40 : 0) + searchHeight + 8
     panelRect = anchoredRect(triggerEl.getBoundingClientRect(), {
       estimatedHeight,
       // Preserve the original behavior: anchor to the trigger, no clamping.
@@ -181,6 +190,20 @@
     }
   })
 
+  // Re-anchor when the option list itself changes while the panel is open.
+  // The geometry is derived from the option COUNT, so an async list - which
+  // lands after the panel opened, and a search filter, which shrinks it - would
+  // otherwise leave the panel sized for the list it had a moment ago. With an
+  // async source that means a panel sized for ZERO options: 8px tall, with the
+  // arriving options spilling outside its background and the grid showing
+  // through behind them.
+  $effect(() => {
+    if (!open) return
+    void visibleOptions.length
+    void optionRowHeight
+    updatePanelPosition()
+  })
+
   function closePanel() {
     open = false
     highlighted = -1
@@ -387,9 +410,15 @@
     {@const needsScroll = options.length > 10}
     <!-- Cap to the comfortable 10-row height AND the room the viewport allows,
          so a panel near the bottom edge scrolls instead of overflowing. -->
+    <!-- Capped by the REAL room the viewport allows (`availHeight`), never by
+         `maxHeight` - that one is clamped to our estimated height, and the
+         estimate assumes a 32px row. Themes with a larger font render taller
+         rows, so the estimate came up a few px short and the last option was
+         cut off by the panel edge. The estimate still decides which way to
+         flip; it must not decide how tall the panel is allowed to be. -->
     {@const panelMax = Math.min(
       needsScroll ? 10 * optionRowHeight + (multiple ? 40 : 0) + 8 : Number.POSITIVE_INFINITY,
-      panelRect.maxHeight,
+      panelRect.availHeight,
     )}
     <div
       class="sv-grid-dropdown-panel"
@@ -400,7 +429,8 @@
       use:portalToBody
       use:popIn={{ up: panelRect.openUpward }}
       style:position="fixed"
-      style:top={`${panelRect.top}px`}
+      style:top={panelRect.openUpward ? null : `${panelRect.top}px`}
+      style:bottom={panelRect.openUpward ? `${panelRect.bottom}px` : null}
       style:left={`${panelRect.left}px`}
       style:width={`${panelRect.width}px`}
       style:max-height={panelMax !== null ? `${panelMax}px` : null}
@@ -422,7 +452,9 @@
           }}
         />
       {/if}
-      {#if visibleOptions.length === 0}
+      {#if loading && visibleOptions.length === 0}
+        <div class="sv-grid-dropdown-empty" role="status" aria-live="polite">Loading…</div>
+      {:else if visibleOptions.length === 0}
         <div class="sv-grid-dropdown-empty">{searchable && searchQuery ? `No matches for "${searchQuery}"` : 'No options'}</div>
       {:else}
         {#each visibleOptions as opt, i (String(opt.value))}