@svgrid/grid 2.2.31 → 2.2.33

package/dist/SvGrid.svelte

@@ -17,7 +17,6 @@
   } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
-  import type { Snippet } from "svelte";
   import {
     RenderSnippetConfig,
     RenderComponentConfig,
@@ -36,16 +35,10 @@
   import { timeStringToDate, dateToTimeString } from "./SvGrid.helpers";
   import type {
     Props,
-    SelectionPoint,
-    SelectionRange,
-    CellEditState,
     FilterOperator,
-    FilterOption,
-    MenuPosition,
   } from "./SvGrid.types";
   import {
     cfTextStyle,
-    fmtStat,
     getEditableInputValue,
     getEditorInputType,
     toValueArray,
@@ -57,7 +50,6 @@
   import {
     splitInTokens,
     trailingInToken,
-    joinInTokens,
   } from "./filtering/excel-filters";
   import { createSvGridController } from "./SvGrid.controller.svelte";
   // GridMenus hosts tooltips + all column/filter/context menu overlays - none of
@@ -180,10 +172,8 @@
 
   // ---- View facade: re-bind the controller's reactive members as locals so the
   //      markup stays identical. Assignable state + bindings + DOM refs use c.* directly.
-  const paginationEnabled = $derived(ctrl.paginationEnabled);
   const filterRowValues = $derived(ctrl.filterRowValues);
   const filterMenuValues = $derived(ctrl.filterMenuValues);
-  const tooltip = $derived(ctrl.tooltip);
   const showTooltipFor = $derived(ctrl.showTooltipFor);
   const hideTooltip = $derived(ctrl.hideTooltip);
   const findHits = $derived(ctrl.findHits);
@@ -256,28 +246,41 @@
   // 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);
-  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
   const allRows = $derived(ctrl.allRows);
-  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
-  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
-  const statusBarStats = $derived(ctrl.statusBarStats);
   const toolPanelEnabled = $derived(ctrl.toolPanelEnabled);
   const toolPanelColumns = $derived(ctrl.toolPanelColumns);
   const toolPanelHeaderLabel = $derived(ctrl.toolPanelHeaderLabel);
   const toggleColumnVisibleInPanel = $derived(ctrl.toggleColumnVisibleInPanel);
   const moveColumnInPanel = $derived(ctrl.moveColumnInPanel);
   const toggleGroupInPanel = $derived(ctrl.toggleGroupInPanel);
-  const virtualizer = $derived(ctrl.virtualizer);
   const rowVirtualizationEnabled = $derived(ctrl.rowVirtualizationEnabled);
   // The fixed row height, matching what the virtualized path takes from the virtualizer.
   // The non-virtualized (`virtualization={false}`) body must apply this too, else its rows
@@ -286,10 +289,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 +423,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 +440,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,14 +489,26 @@
         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);
   const onGridKeyDown = $derived(ctrl.onGridKeyDown);
   const onGridPaste = $derived(ctrl.onGridPaste);
-  const changePage = $derived(ctrl.changePage);
-  const goToPage = $derived(ctrl.goToPage);
-  const setPageSize = $derived(ctrl.setPageSize);
   const updateFilterRow = $derived(ctrl.updateFilterRow);
   const updateFilterMenuValue = $derived(ctrl.updateFilterMenuValue);
   const updateFilterMenuValueTo = $derived(ctrl.updateFilterMenuValueTo);
@@ -869,6 +910,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 +1073,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 +1124,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)}
@@ -1156,7 +1272,7 @@
         aria-label="Edit checkbox value"
         onclick={(event) => {
           event.stopPropagation();
-          const nextValue = !Boolean(ctrl.editingCell?.value);
+          const nextValue = !ctrl.editingCell?.value;
           ctrl.editingCell = ctrl.editingCell
             ? { ...ctrl.editingCell, value: nextValue }
             : ctrl.editingCell;
@@ -1165,7 +1281,7 @@
         onkeydown={(event) =>
           toggleCheckboxWithKeyboard(event, () => {
             event.stopPropagation();
-            const nextValue = !Boolean(ctrl.editingCell?.value);
+            const nextValue = !ctrl.editingCell?.value;
             ctrl.editingCell = ctrl.editingCell
               ? { ...ctrl.editingCell, value: nextValue }
               : ctrl.editingCell;
@@ -1175,10 +1291,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 +1314,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 +1360,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 +1384,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 +1650,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 +1660,7 @@
       {#if DropdownEditor}
         <DropdownEditor
           options={opts}
+          loading={optsLoading}
           value={ctrl.editingCell?.value}
           multiple={multi}
           placeholder="Pick…"
@@ -1657,7 +1782,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 +1978,7 @@
             activeDescendantId,
             rowCount: allRows.length,
             colCount: allColumns.length,
-            treegrid: !!opt.serverGroup,
+            treegrid: !!opt.serverGroup || !!opt.treeData,
           })}
           onkeydown={onGridKeyDown}
           onpaste={onGridPaste}
@@ -2438,14 +2563,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 +2592,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
@@ -2542,10 +2671,6 @@
                           row,
                           rendered.column,
                         )}
-                        {@const cellTooltip = computeCellTooltip(
-                          row,
-                          rendered.column,
-                        )}
                         {@const cellValidity = computeCellValidity(
                           row,
                           rendered.column,
@@ -2690,14 +2815,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 +2844,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/dist/SvGrid.types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { CellEditorType, ColumnDef, RowData, SvGridApi, 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";
@@ -992,7 +993,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;
     /**
@@ -1073,6 +1142,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/dist/SvGridChart.svelte

@@ -213,15 +213,7 @@
     return { t0: zoom.i0 / n, t1: (zoom.i1 + 1) / n }
   })
 
-  /** Map a brush-svg-local x to a category index in the FULL data range. */
-  function brushXToIndex(localX: number): number {
-    if (!brushGeo) return 0
-    const w = brushGeo.plot.w
-    const x = Math.max(0, Math.min(w, localX - brushGeo.plot.x))
-    const n = spec.categories.length
-    return Math.max(0, Math.min(n - 1, Math.floor((x / w) * n)))
-  }
-  type BrushDrag = { mode: 'move' | 'left' | 'right'; startX: number; startT0: number; startT1: number }
+  type BrushDrag ={ mode: 'move' | 'left' | 'right'; startX: number; startT0: number; startT1: number }
   let brushDrag = $state<BrushDrag | null>(null)
   function brushSvgX(e: PointerEvent, svg: SVGSVGElement): number {
     const r = svg.getBoundingClientRect()
@@ -919,7 +911,7 @@
     {#if isRadar && geo.radarCenter}
       {@const c = geo.radarCenter}
       <!-- Concentric grid rings -->
-      {#each geo.radarRings as v, ri (ri)}
+      {#each geo.radarRings as _v, ri (ri)}
         {@const ringR = c.r * ((ri + 1) / geo.radarRings.length)}
         <circle class="sv-grid-chart-radar-ring" cx={c.cx} cy={c.cy} r={ringR} />
       {/each}

package/dist/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))}