bo-grid 0.7.0 → 0.21.0

package/dist/grid/Grid.svelte

@@ -7,13 +7,14 @@
   import { untrack } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { ColumnDef, GridRow, SortState, SortDir, CellEditEvent } from './column';
-  import { colStyle, isNumeric, isSortable, isEditable, compareBySorts, formatCell } from './column';
+  import { colStyle, isNumeric, isSortable, isEditable, compareBySorts, formatCell, cellValue } from './column';
   import { arrangePinned } from './pin';
+  import { columnWindow, columnOffsets } from './colvirt';
   import { uniformHeights, variableHeights } from './rowheight';
   import { themeVars, lightTheme, type GridTheme } from './theme';
   import { Selection } from './selection.svelte';
   import { aggregate, type AggKind, type AggResult } from './aggregate';
-  import { buildFlatRows, activeGroupsAt, type VisualRow, type GroupNode } from './grouping';
+  import { buildFlatRows, buildLazyGroupRows, activeGroupsAt, type VisualRow, type GroupNode, type LazyGroup } from './grouping';
   import { buildTreeRows } from './tree';
   import { moveIndex } from './reorder';
   import { parseClipboard, isSingleCell } from './clipboard';
@@ -53,6 +54,7 @@
     onColumnVisibilityChange,
     columnMenu = false,
     columnsPanel = false,
+    virtualizeColumns = false,
     rowClass,
     getRowId = (r: GridRow) => r.id,
     onRowClick,
@@ -73,6 +75,10 @@
     detail,
     detailHeight = 160,
     getChildren,
+    loadChildren,
+    hasChildren,
+    lazyGroups,
+    loadGroup,
     onRowReorder,
     pageSize = 0,
     page,
@@ -112,6 +118,10 @@
         (the place to restore columns hidden via the menu). Lazy-loaded. Default
         false. */
     columnsPanel?: boolean;
+    /** Render only the columns within the horizontal scroll window (+ overscan)
+        for very wide grids (100+ columns). Forces fixed-width horizontal scroll;
+        pinned columns always render. Default false (fit-to-width). */
+    virtualizeColumns?: boolean;
     /** Return extra CSS class(es) for a data row (e.g. to colour by value).
         Style them via `:global(.your-class)` since rows live inside the grid. */
     rowClass?: (row: GridRow) => string | undefined;
@@ -179,6 +189,20 @@
         `rows` are the roots; the grid renders an indented, expandable tree.
         In-memory mode; filter/sort/group/paginate are not applied to the tree. */
     getChildren?: (row: GridRow) => GridRow[] | undefined;
+    /** Async tree data: load a row's children on expand (server-backed trees).
+        Returns a promise; the grid shows a loading row, then caches the result.
+        Pair with `hasChildren` (a cheap predicate) so chevrons show without
+        loading. Use instead of `getChildren`. In-memory roots. */
+    loadChildren?: (row: GridRow) => Promise<GridRow[]>;
+    /** Cheap predicate for whether a row has children (drives the expand chevron
+        without loading). Required with `loadChildren`; optional with `getChildren`. */
+    hasChildren?: (row: GridRow) => boolean;
+    /** Server-side grouping: top-level group summaries (header data, no leaf rows).
+        Each group's rows load on expand via `loadGroup`. In-memory mode. */
+    lazyGroups?: LazyGroup[];
+    /** Load a lazy group's leaf rows on expand (returns a promise; shows a loading
+        row, then caches). Required with `lazyGroups`. */
+    loadGroup?: (key: string) => Promise<GridRow[]>;
     /** Enable drag-to-reorder rows via a handle in the first column. Called with
         the from/to indices (into the visible rows) on drop — reorder your own
         `rows` in here. Flat, unsorted, in-memory lists only. */
@@ -375,6 +399,70 @@
     expVersion++;
   }
 
+  // Async tree children: cache loaded children by row id; track in-flight loads.
+  const childrenCache = new Map<string | number, GridRow[]>();
+  const loadingIds = new Set<string | number>();
+  let treeVersion = $state(0);
+
+  // Expand/collapse a tree node, lazy-loading children on first expand (async).
+  function toggleTreeNode(row: GridRow): void {
+    const id = getRowId(row);
+    if (expandedRows.has(id)) {
+      expandedRows.delete(id);
+      expVersion++;
+      return;
+    }
+    expandedRows.add(id);
+    expVersion++;
+    if (loadChildren && !childrenCache.has(id) && !loadingIds.has(id)) {
+      loadingIds.add(id);
+      treeVersion++;
+      Promise.resolve(loadChildren(row)).then(
+        (kids) => {
+          childrenCache.set(id, kids);
+          loadingIds.delete(id);
+          treeVersion++;
+        },
+        () => {
+          // On failure, collapse so the user can retry by expanding again.
+          loadingIds.delete(id);
+          expandedRows.delete(id);
+          expVersion++;
+          treeVersion++;
+        },
+      );
+    }
+  }
+
+  // Expand/collapse a server-side group, lazy-loading its rows on first expand.
+  // Reuses the tree's children cache + loading machinery, keyed by group key.
+  function toggleLazyGroup(key: string): void {
+    if (expandedRows.has(key)) {
+      expandedRows.delete(key);
+      expVersion++;
+      return;
+    }
+    expandedRows.add(key);
+    expVersion++;
+    if (loadGroup && !childrenCache.has(key) && !loadingIds.has(key)) {
+      loadingIds.add(key);
+      treeVersion++;
+      Promise.resolve(loadGroup(key)).then(
+        (rows) => {
+          childrenCache.set(key, rows);
+          loadingIds.delete(key);
+          treeVersion++;
+        },
+        () => {
+          loadingIds.delete(key);
+          expandedRows.delete(key);
+          expVersion++;
+          treeVersion++;
+        },
+      );
+    }
+  }
+
   function isRowSelected(id: string | number): boolean {
     selRowsVersion; // track
     return selectedRows.has(id);
@@ -413,6 +501,33 @@
   const layout = $derived(arrangePinned(pinnedSized));
   const cols = $derived(layout.columns);
   const pinned = $derived(layout.anyPinned);
+  // Fixed-width horizontal-scroll mode: when columns are pinned OR column
+  // virtualization is on. Drives the same layout (explicit widths, overflow-x,
+  // scroll-synced header) that pinning already uses.
+  const hScroll = $derived(pinned || virtualizeColumns);
+
+  // Column virtualization: render only the columns whose x-range intersects the
+  // horizontal viewport (+ overscan); pinned columns always render. Off-window
+  // runs of columns collapse into a single spacer so widths/positions are exact.
+  const COL_OVERSCAN = 320; // px
+  let scrollLeft = $state(0);
+  let viewW = $state(0);
+  type ColItem = { kind: 'cell'; ci: number; key: string } | { kind: 'spacer'; w: number; key: string };
+  const colItems = $derived.by<ColItem[]>(() => {
+    const n = cols.length;
+    // Off, or before the viewport width is measured: render every column.
+    if (!virtualizeColumns || !viewW) {
+      return Array.from({ length: n }, (_, ci) => ({ kind: 'cell', ci, key: 'c' + ci }) as ColItem);
+    }
+    const widths = layout.info.map((inf) => inf.width);
+    const pins = layout.info.map((inf) => inf.pinned);
+    let sp = 0;
+    return columnWindow(columnOffsets(widths), widths, pins, scrollLeft, viewW, COL_OVERSCAN).map((it) =>
+      it.kind === 'cell'
+        ? ({ kind: 'cell', ci: it.ci, key: 'c' + it.ci } as ColItem)
+        : ({ kind: 'spacer', w: it.w, key: 's' + sp++ } as ColItem),
+    );
+  });
 
   // Spanning header groups: consecutive columns sharing a `group` label merge
   // into one parent header cell (width = sum of child widths). null when unused.
@@ -448,14 +563,14 @@
     return `position:sticky;left:${inf.left + leadPx}px;`;
   }
   function headStyle(ci: number): string {
-    if (!pinned) return colStyle(cols[ci]);
+    if (!hScroll) return colStyle(cols[ci]);
     const inf = layout.info[ci];
     let s = `flex:0 0 ${inf.width}px;width:${inf.width}px;`;
     if (inf.pinned) s += `${pinStick(ci)}z-index:5;background:var(--bo-header-bg);`;
     return s;
   }
   function cellWidthStyle(ci: number): string {
-    if (!pinned) return colStyle(cols[ci]);
+    if (!hScroll) return colStyle(cols[ci]);
     const inf = layout.info[ci];
     let s = `flex:0 0 ${inf.width}px;width:${inf.width}px;`;
     if (inf.pinned) s += `${pinStick(ci)}z-index:1;background:var(--bo-bg);`;
@@ -465,14 +580,14 @@
   // expand column, if any) when the grid scrolls horizontally (pinned mode).
   function selCellStyle(header: boolean): string {
     let s = `flex:0 0 ${SEL_W}px;width:${SEL_W}px;`;
-    if (pinned)
+    if (hScroll)
       s += `position:sticky;left:${expOffset * EXP_W}px;z-index:${header ? 6 : 2};background:var(--bo-${header ? 'header-bg' : 'bg'});`;
     return s;
   }
   // The leading expand-toggle column (master-detail), sticky at the far left.
   function expandCellStyle(header: boolean): string {
     let s = `flex:0 0 ${EXP_W}px;width:${EXP_W}px;`;
-    if (pinned)
+    if (hScroll)
       s += `position:sticky;left:0;z-index:${header ? 6 : 2};background:var(--bo-${header ? 'header-bg' : 'bg'});`;
     return s;
   }
@@ -724,6 +839,14 @@
   }
 
   // In-memory pipeline (skipped entirely in source mode).
+  // Resolve a column's value by key (computed-aware) — for filtering and the
+  // set-filter distinct list. Falls back to the raw row field for plain columns.
+  const colByKey = $derived(new Map(columns.map((c) => [c.key, c] as const)));
+  const valueOf = (row: GridRow, key: string): unknown => {
+    const c = colByKey.get(key);
+    return c ? cellValue(c, row) : row[key];
+  };
+
   const view = $derived.by(() => {
     if (source) return [] as GridRow[];
     const base = rows;
@@ -741,10 +864,10 @@
     const hasColFilters = Object.keys(active).length > 0;
     return untrack(() => {
       let r = base;
-      if (f) r = r.filter((row) => allCols.some((c) => String(row[c.key] ?? '').toLowerCase().includes(f)));
-      if (q) r = r.filter((row) => allCols.some((c) => String(row[c.key] ?? '').toLowerCase().includes(q)));
+      if (f) r = r.filter((row) => allCols.some((c) => String(cellValue(c, row) ?? '').toLowerCase().includes(f)));
+      if (q) r = r.filter((row) => allCols.some((c) => String(cellValue(c, row) ?? '').toLowerCase().includes(q)));
       if (hasColFilters) {
-        r = r.filter((row) => passesFilters(row, active));
+        r = r.filter((row) => passesFilters(row, active, valueOf));
       }
       if (s.length > 0) {
         const colOf = (k: string) => allCols.find((c) => c.key === k);
@@ -754,6 +877,30 @@
     });
   });
 
+  // Conditional-formatting ranges: the data extent (min/max over the current
+  // view) for each column with a data bar or colour scale. Per-column `min`/`max`
+  // config overrides are applied later, in the cell. Keyed by column key.
+  const cfRanges = $derived.by<Record<string, { min: number; max: number }>>(() => {
+    const out: Record<string, { min: number; max: number }> = {};
+    for (const col of columns) {
+      if (!col.dataBar && !col.colorScale) continue;
+      let lo = Infinity;
+      let hi = -Infinity;
+      for (const row of view) {
+        const raw = cellValue(col, row);
+        if (raw === null || raw === undefined || raw === '') continue; // blanks aren't 0
+        const n = Number(raw);
+        if (!Number.isFinite(n)) continue;
+        if (n < lo) lo = n;
+        if (n > hi) hi = n;
+      }
+      if (!Number.isFinite(lo)) lo = 0;
+      if (!Number.isFinite(hi)) hi = lo + 1;
+      out[col.key] = { min: lo, max: hi };
+    }
+    return out;
+  });
+
   // Pagination (in-memory only): slice the view into pages; rows still
   // virtualize within a page. Off when pageSize <= 0.
   const paged = $derived(pageSize > 0 && !source);
@@ -775,7 +922,9 @@
     paged ? view.slice(currentPage * pageSize, currentPage * pageSize + pageSize) : view,
   );
 
-  const treeData = $derived(!!getChildren && !source);
+  const treeData = $derived(!!(getChildren || loadChildren) && !source);
+  // Server-side (lazy) grouping: group summaries up front, rows on expand.
+  const lazyGrouped = $derived(!!lazyGroups && !source && !treeData);
 
   // Drag-to-reorder rows (flat, unsorted, in-memory only). The handle lives in
   // the first cell; the dragged/drop indices are tracked in component state.
@@ -793,11 +942,29 @@
   }
 
   const flat = $derived.by<VisualRow[]>(() => {
-    if (treeData && getChildren) {
+    if (treeData) {
       const roots = rows;
       expVersion; // track expand/collapse
+      treeVersion; // track async child loads
       return untrack(() =>
-        buildTreeRows(roots, getChildren, (r) => expandedRows.has(getRowId(r))),
+        buildTreeRows(roots, {
+          childrenOf: (r) => (loadChildren ? childrenCache.get(getRowId(r)) : getChildren?.(r)),
+          hasChildren: hasChildren ?? ((r) => !!getChildren?.(r)?.length),
+          isExpanded: (r) => expandedRows.has(getRowId(r)),
+          isLoading: (r) => loadingIds.has(getRowId(r)),
+        }),
+      );
+    }
+    if (lazyGrouped && lazyGroups) {
+      const groups = lazyGroups;
+      expVersion; // track expand/collapse
+      treeVersion; // track async row loads
+      return untrack(() =>
+        buildLazyGroupRows(groups, {
+          isExpanded: (key) => expandedRows.has(key),
+          rowsOf: (key) => childrenCache.get(key),
+          isLoading: (key) => loadingIds.has(key),
+        }),
       );
     }
     const v = pageRows;
@@ -846,7 +1013,7 @@
       if (col.type === 'sparkline' || col.type === 'text' || col.type === 'custom' || !col.groupAgg) return '';
       const vals: number[] = [];
       for (const row of v) {
-        const n = Number(row[col.key]);
+        const n = Number(cellValue(col, row));
         if (Number.isFinite(n)) vals.push(n);
       }
       const a = aggregate(vals);
@@ -890,7 +1057,7 @@
 
   const total = $derived(hm.total);
   const rowWidthStyle = $derived(
-    pinned ? `width:${layout.totalWidth + leadPx}px;right:auto;` : '',
+    hScroll ? `width:${layout.totalWidth + leadPx}px;right:auto;` : '',
   );
   const visibleCount = $derived(Math.ceil(height / baseH) + OVERSCAN * 2);
   const start = $derived(Math.max(0, hm.indexAt(scrollTop) - OVERSCAN));
@@ -903,6 +1070,7 @@
   type RenderItem =
     | { vr: number; kind: 'group'; group: GroupNode }
     | { vr: number; kind: 'data'; row: GridRow; depth?: number; hasChildren?: boolean }
+    | { vr: number; kind: 'treeloading'; depth: number }
     | { vr: number; kind: 'skeleton' };
 
   const renderItems = $derived.by<RenderItem[]>(() => {
@@ -918,6 +1086,7 @@
         const item = flat[vr];
         if (!item) continue;
         if (item.kind === 'group') out.push({ vr, kind: 'group', group: item.group });
+        else if (item.kind === 'treeloading') out.push({ vr, kind: 'treeloading', depth: item.depth });
         else out.push({ vr, kind: 'data', row: item.row, depth: item.depth, hasChildren: item.hasChildren });
       }
     }
@@ -956,7 +1125,7 @@
       if (!row) continue;
       for (let c = b.c0; c <= cEnd; c++) {
         if (!isNumeric(cols[c])) continue;
-        const v = Number(row[cols[c].key]);
+        const v = Number(cellValue(cols[c], row));
         if (Number.isFinite(v)) vals.push(v);
       }
     }
@@ -966,9 +1135,10 @@
   function onScroll(e: Event) {
     const el = e.currentTarget as HTMLElement;
     scrollTop = el.scrollTop;
-    if (pinned && headEl) headEl.scrollLeft = el.scrollLeft; // keep header in sync
-    if (pinned && filterRowEl) filterRowEl.scrollLeft = el.scrollLeft; // and the filter row
-    if (pinned && groupHeadEl) groupHeadEl.scrollLeft = el.scrollLeft; // and group headers
+    if (hScroll) scrollLeft = el.scrollLeft; // drives column virtualization
+    if (hScroll && headEl) headEl.scrollLeft = el.scrollLeft; // keep header in sync
+    if (hScroll && filterRowEl) filterRowEl.scrollLeft = el.scrollLeft; // and the filter row
+    if (hScroll && groupHeadEl) groupHeadEl.scrollLeft = el.scrollLeft; // and group headers
   }
 
   function toggleGroup(path: string) {
@@ -1078,17 +1248,14 @@
   function filterKindFor(col: ColumnDef): FilterKind {
     return typeof col.filter === 'string' ? col.filter : defaultFilterKind(col);
   }
-  async function openFilterMenu(col: ColumnDef, e: Event) {
-    e.stopPropagation();
-    // Read the anchor rect now — after the await, the event's currentTarget is null.
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  async function openFilterMenu(col: ColumnDef, anchor: { left: number; bottom: number }) {
     let kind = filterKindFor(col);
     // A set filter needs distinct values; in source mode they can't be
     // enumerated, so fall back to the column's typed filter.
     if (source && kind === 'set') kind = defaultFilterKind(col);
-    const values = !source && kind === 'set' ? distinctValues(rows, col.key) : [];
+    const values = !source && kind === 'set' ? distinctValues(rows, col.key, valueOf) : [];
     if (!FilterMenuComp) FilterMenuComp = (await import('./FilterMenu.svelte')).default;
-    filterUi = { key: col.key, kind, header: col.header, values, x: rect.left, y: rect.bottom + 2 };
+    filterUi = { key: col.key, kind, header: col.header, values, x: anchor.left, y: anchor.bottom + 2 };
   }
   function applyColumnFilter(key: string, f: ColumnFilter | null): void {
     const next = { ...activeColumnFilters };
@@ -1120,7 +1287,7 @@
     let maxLen = col.header.length;
     if (!source) {
       for (const row of view.slice(0, 500)) {
-        const s = formatCell(col, row[col.key], row);
+        const s = formatCell(col, cellValue(col, row), row);
         if (s.length > maxLen) maxLen = s.length;
       }
     }
@@ -1132,7 +1299,11 @@
 
   // Column header menu (⋮): sort / pin / autosize / hide. Reuses the floating
   // RowMenu (a light action list — no lazy chunk, unlike the filter menu).
-  function columnMenuItems(col: ColumnDef): Array<{ label: string; onSelect: () => void }> {
+  // `anchor` positions the (keyboard-reachable) Filter submenu at the column.
+  function columnMenuItems(
+    col: ColumnDef,
+    anchor: { left: number; bottom: number },
+  ): Array<{ label: string; onSelect: () => void }> {
     const items: Array<{ label: string; onSelect: () => void }> = [];
     if (isSortable(col)) {
       items.push({ label: 'Sort ascending', onSelect: () => setSorts([{ key: col.key, dir: 'asc' }]) });
@@ -1141,6 +1312,10 @@
         items.push({ label: 'Clear sort', onSelect: () => setSorts(sorts.filter((s) => s.key !== col.key)) });
       }
     }
+    // Keyboard path to filtering (the header funnel is pointer-only by design).
+    if (filterMenu && col.type !== 'sparkline' && col.filter !== false) {
+      items.push({ label: 'Filter…', onSelect: () => void openFilterMenu(col, anchor) });
+    }
     const side = pinSideOf(col);
     if (side !== 'left') items.push({ label: 'Pin left', onSelect: () => setPinOverride(col.key, 'left') });
     if (side !== 'right') items.push({ label: 'Pin right', onSelect: () => setPinOverride(col.key, 'right') });
@@ -1152,7 +1327,8 @@
   function openColumnMenu(col: ColumnDef, e: Event) {
     e.stopPropagation();
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    menu = { x: rect.left, y: rect.bottom + 2, items: columnMenuItems(col) };
+    const anchor = { left: rect.left, bottom: rect.bottom };
+    menu = { x: rect.left, y: rect.bottom + 2, items: columnMenuItems(col, anchor) };
   }
 
   function onCellClicked(r: number, c: number, e: MouseEvent) {
@@ -1160,7 +1336,7 @@
     const row = dataAt(r);
     if (!row) return;
     const column = cols[c];
-    onCellClick({ row, column, value: row[column.key] }, e);
+    onCellClick({ row, column, value: cellValue(column, row) }, e);
   }
 
   // Move the focus to an absolute (r, c), clamped; extend the selection if asked.
@@ -1193,7 +1369,7 @@
       const cells: string[] = [];
       for (let c = b.c0; c <= cEnd; c++) {
         const col = cols[c];
-        cells.push(col.type === 'sparkline' || col.type === 'custom' ? '' : formatCell(col, row[col.key], row));
+        cells.push(col.type === 'sparkline' || col.type === 'custom' ? '' : formatCell(col, cellValue(col, row), row));
       }
       lines.push(cells.join('\t'));
     }
@@ -1337,7 +1513,8 @@
     if (columnMenu && sel.focus && e.altKey && e.key === 'ArrowDown') {
       e.preventDefault();
       const rect = document.getElementById(activeId ?? '')?.getBoundingClientRect();
-      menu = { x: rect?.left ?? 0, y: rect?.bottom ?? 0, items: columnMenuItems(cols[sel.focus.c]) };
+      const anchor = { left: rect?.left ?? 0, bottom: rect?.bottom ?? 0 };
+      menu = { x: anchor.left, y: anchor.bottom, items: columnMenuItems(cols[sel.focus.c], anchor) };
       return;
     }
     // Tree nav: ArrowRight expands a collapsed node, ArrowLeft collapses an
@@ -1349,12 +1526,12 @@
         const open = expandedRows.has(id);
         if (e.key === 'ArrowRight' && !open) {
           e.preventDefault();
-          toggleExpand(id);
+          toggleTreeNode(item.row);
           return;
         }
         if (e.key === 'ArrowLeft' && open) {
           e.preventDefault();
-          toggleExpand(id);
+          toggleTreeNode(item.row);
           return;
         }
       }
@@ -1438,7 +1615,7 @@
     </div>
   {/if}
   {#if headerGroups}
-    <div class="head-groups" aria-hidden="true" bind:this={groupHeadEl} style={pinned ? 'overflow:hidden;' : ''}>
+    <div class="head-groups" aria-hidden="true" bind:this={groupHeadEl} style={hScroll ? 'overflow:hidden;' : ''}>
       {#if expandable}<span class="expandcell" style={expandCellStyle(true)}></span>{/if}
       {#if rowSelection}<span class="selcell" style={selCellStyle(true)}></span>{/if}
       {#each headerGroups as g, gi (gi)}
@@ -1446,7 +1623,7 @@
       {/each}
     </div>
   {/if}
-  <div class="head" role="row" aria-rowindex={1} bind:this={headEl} style={pinned ? 'overflow:hidden;' : ''}>
+  <div class="head" role="row" aria-rowindex={1} bind:this={headEl} style={hScroll ? 'overflow:hidden;' : ''}>
     {#if expandable}
       <span class="expandcell selhead" role="columnheader" aria-colindex={1} style={expandCellStyle(true)}></span>
     {/if}
@@ -1512,6 +1689,9 @@
           </span>
         {/if}
         {#if filterMenu && col.type !== 'sparkline' && col.filter !== false}
+          <!-- Pointer affordance only (tabindex=-1, APG grid pattern): keyboard
+               users reach filtering via the column menu's "Filter…" item. -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <span
             class="funnel"
             class:on={isFilterActive(activeColumnFilters[col.key])}
@@ -1519,9 +1699,9 @@
             tabindex="-1"
             aria-label="Filter {col.header}"
             title="Filter {col.header}"
-            onclick={(e) => openFilterMenu(col, e)}
-            onkeydown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') openFilterMenu(col, e);
+            onclick={(e) => {
+              e.stopPropagation();
+              openFilterMenu(col, (e.currentTarget as HTMLElement).getBoundingClientRect());
             }}
             ondragstart={(e) => e.preventDefault()}
             draggable="false"
@@ -1562,7 +1742,7 @@
   </div>
 
   {#if filterRow && !source}
-    <div class="filter-row" role="row" bind:this={filterRowEl} style={pinned ? 'overflow:hidden;' : ''}>
+    <div class="filter-row" role="row" bind:this={filterRowEl} style={hScroll ? 'overflow:hidden;' : ''}>
       {#if expandable}<span class="expandcell" style={expandCellStyle(false)}></span>{/if}
       {#if rowSelection}<span class="selcell" style={selCellStyle(false)}></span>{/if}
       {#each cols as col, ci (ci)}
@@ -1584,8 +1764,9 @@
 
   <div
     class="viewport"
-    style="height:{height}px;{pinned ? 'overflow-x:auto;' : ''}"
+    style="height:{height}px;{hScroll ? 'overflow-x:auto;' : ''}"
     bind:this={viewportEl}
+    bind:clientWidth={viewW}
     onscroll={onScroll}
   >
     {#if pinnedRows.length > 0}
@@ -1606,7 +1787,7 @@
                 pinned={pinned && layout.info[ci].pinned}
                 pinSide={layout.info[ci].side ?? 'left'}
                 pinOffset={layout.info[ci].side === 'right' ? layout.info[ci].right : layout.info[ci].left + leadPx}
-                width={pinned ? layout.info[ci].width : undefined}
+                width={hScroll ? layout.info[ci].width : undefined}
               />
             {/each}
           </div>
@@ -1631,13 +1812,13 @@
         {/each}
       </div>
     {/if}
-    <div class="spacer" style="height:{total}px;{pinned ? `width:${layout.totalWidth + leadPx}px;` : ''}">
+    <div class="spacer" style="height:{total}px;{hScroll ? `width:${layout.totalWidth + leadPx}px;` : ''}">
       {#each renderItems as item (item.vr)}
         {#if item.kind === 'group'}
           <div class="grouprow" style="top:{hm.offsetOf(item.vr)}px;height:{hm.heightOf(item.vr)}px;{rowWidthStyle}">
             {#if expandable}<span class="expandcell" aria-hidden="true" style={expandCellStyle(false)}></span>{/if}
             {#if rowSelection}<span class="selcell" aria-hidden="true" style={selCellStyle(false)}></span>{/if}
-            <GroupRow group={item.group} columns={cols} onToggle={toggleGroup} rowIndex={item.vr + 2} />
+            <GroupRow group={item.group} columns={cols} onToggle={lazyGrouped ? toggleLazyGroup : toggleGroup} rowIndex={item.vr + 2} />
           </div>
         {:else if item.kind === 'skeleton'}
           <div class="row skeleton" role="row" aria-rowindex={item.vr + 2} aria-hidden="true" style="top:{hm.offsetOf(item.vr)}px;height:{hm.heightOf(item.vr)}px;{rowWidthStyle}">
@@ -1647,6 +1828,14 @@
               <span class="c" style={cellWidthStyle(ci)}><span class="skelbar"></span></span>
             {/each}
           </div>
+        {:else if item.kind === 'treeloading'}
+          <div class="row treeloading" role="row" aria-rowindex={item.vr + 2} aria-live="polite" style="top:{hm.offsetOf(item.vr)}px;height:{hm.heightOf(item.vr)}px;{rowWidthStyle}">
+            {#if expandable}<span class="expandcell" aria-hidden="true" style={expandCellStyle(false)}></span>{/if}
+            {#if rowSelection}<span class="selcell" aria-hidden="true" style={selCellStyle(false)}></span>{/if}
+            <span class="tree-loading-cell" style="padding-left:{(item.depth ?? 0) * 16 + 24}px">
+              <span class="spinner sm" aria-hidden="true"></span>Loading…
+            </span>
+          </div>
         {:else}
           <!-- Row activation is keyboard-accessible at the grid level: Enter on the focused cell fires onRowClick (focus is via aria-activedescendant). -->
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
@@ -1681,48 +1870,55 @@
                 />
               </span>
             {/if}
-            {#each cols as col, ci (ci)}
-              <Cell
-                {col}
-                row={item.row}
-                r={item.vr}
-                c={ci}
-                colIndex={ci + 1 + leadCols}
-                cellId={`${gid}-r${item.vr}-c${ci}`}
-                cellSnippet={cell}
-                selected={sel.contains(item.vr, ci)}
-                focused={sel.isFocus(item.vr, ci)}
-                pinned={pinned && layout.info[ci].pinned}
-                pinSide={layout.info[ci].side ?? 'left'}
-                pinOffset={layout.info[ci].side === 'right' ? layout.info[ci].right : layout.info[ci].left + leadPx}
-                width={pinned ? layout.info[ci].width : undefined}
-                alt={item.vr % 2 === 1}
-                editing={editing?.r === item.vr && editing?.c === ci}
-                seed={editing?.r === item.vr && editing?.c === ci ? editSeed : null}
-                fillCorner={fillHandle && !!sel.bounds && item.vr === sel.bounds.r1 && ci === sel.bounds.c1}
-                fillpreview={inFillPreview(item.vr, ci)}
-                {onFillStart}
-                tree={treeData && ci === 0
-                  ? {
-                      depth: item.depth ?? 0,
-                      hasChildren: item.hasChildren ?? false,
-                      expanded: isExpanded(getRowId(item.row)),
-                      onToggle: () => toggleExpand(getRowId(item.row)),
-                    }
-                  : undefined}
-                dragHandle={reorderable && ci === 0
-                  ? { onStart: () => (dragRowVr = item.vr), onEnd: () => (dragRowVr = -1) }
-                  : undefined}
-                {onCellDown}
-                {onCellEnter}
-                onCellClick={onCellClick ? onCellClicked : undefined}
-                onCellDblClick={startEdit}
-                onEditCommit={(raw) => commitEdit(item.vr, ci, raw)}
-                onEditCancel={() => {
-                  editing = null;
-                  editSeed = null;
-                }}
-              />
+            {#each colItems as it (it.key)}
+              {#if it.kind === 'cell'}
+                {@const ci = it.ci}
+                {@const col = cols[ci]}
+                <Cell
+                  {col}
+                  row={item.row}
+                  r={item.vr}
+                  c={ci}
+                  colIndex={ci + 1 + leadCols}
+                  cellId={`${gid}-r${item.vr}-c${ci}`}
+                  cellSnippet={cell}
+                  selected={sel.contains(item.vr, ci)}
+                  focused={sel.isFocus(item.vr, ci)}
+                  pinned={pinned && layout.info[ci].pinned}
+                  pinSide={layout.info[ci].side ?? 'left'}
+                  pinOffset={layout.info[ci].side === 'right' ? layout.info[ci].right : layout.info[ci].left + leadPx}
+                  width={hScroll ? layout.info[ci].width : undefined}
+                  alt={item.vr % 2 === 1}
+                  editing={editing?.r === item.vr && editing?.c === ci}
+                  seed={editing?.r === item.vr && editing?.c === ci ? editSeed : null}
+                  fillCorner={fillHandle && !!sel.bounds && item.vr === sel.bounds.r1 && ci === sel.bounds.c1}
+                  fillpreview={inFillPreview(item.vr, ci)}
+                  cfRange={col.dataBar || col.colorScale ? cfRanges[col.key] : null}
+                  {onFillStart}
+                  tree={treeData && ci === 0
+                    ? {
+                        depth: item.depth ?? 0,
+                        hasChildren: item.hasChildren ?? false,
+                        expanded: isExpanded(getRowId(item.row)),
+                        onToggle: () => toggleTreeNode(item.row),
+                      }
+                    : undefined}
+                  dragHandle={reorderable && ci === 0
+                    ? { onStart: () => (dragRowVr = item.vr), onEnd: () => (dragRowVr = -1) }
+                    : undefined}
+                  {onCellDown}
+                  {onCellEnter}
+                  onCellClick={onCellClick ? onCellClicked : undefined}
+                  onCellDblClick={startEdit}
+                  onEditCommit={(raw) => commitEdit(item.vr, ci, raw)}
+                  onEditCancel={() => {
+                    editing = null;
+                    editSeed = null;
+                  }}
+                />
+              {:else}
+                <span class="colspacer" aria-hidden="true" style="flex:0 0 {it.w}px;width:{it.w}px;"></span>
+              {/if}
             {/each}
           </div>
           {#if expandable && detail && isExpanded(getRowId(item.row))}
@@ -1734,7 +1930,7 @@
       {/each}
     </div>
     {#if footerCells}
-      <div class="footer" role="row" style={pinned ? `width:${layout.totalWidth + leadPx}px;` : ''}>
+      <div class="footer" role="row" style={hScroll ? `width:${layout.totalWidth + leadPx}px;` : ''}>
         {#if expandable}<span class="expandcell" aria-hidden="true" style={expandCellStyle(false)}></span>{/if}
         {#if rowSelection}<span class="selcell" aria-hidden="true" style={selCellStyle(false)}></span>{/if}
         {#each cols as col, ci (ci)}
@@ -1803,6 +1999,15 @@
     --bo-header-h: var(--bo-grid-header-h, 28px);
     --bo-mono: var(--bo-grid-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
     --bo-sans: var(--bo-grid-sans, Inter, "Segoe UI", system-ui, sans-serif);
+    /* Layout/density tokens (override via --bo-grid-* for a custom look). */
+    --bo-radius: var(--bo-grid-radius, 8px);
+    --bo-font-size: var(--bo-grid-font-size, 13px);
+    --bo-cell-pad: var(--bo-grid-cell-pad, 8px);
+
+    /* Theme native controls (checkboxes, date pickers, number spinners, search
+       clear buttons, scrollbars) and accent fills to match the grid theme. */
+    color-scheme: var(--bo-grid-scheme, dark);
+    accent-color: var(--bo-up);
 
     display: flex;
     flex-direction: column;
@@ -1810,7 +2015,7 @@
     font-family: var(--bo-sans);
     background: var(--bo-bg);
     border: 0.5px solid var(--bo-border);
-    border-radius: 8px;
+    border-radius: var(--bo-radius);
     overflow: hidden;
     outline: none;
   }
@@ -1893,7 +2098,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 0 8px;
+    padding: 0 var(--bo-cell-pad, 8px);
     min-width: 0;
     font: inherit;
     font-size: 11px;
@@ -1904,6 +2109,15 @@
     border: 0;
     cursor: grab;
   }
+  /* Visible keyboard focus (WCAG 2.4.7) for the grid's tabbable controls. */
+  .h:focus-visible,
+  .bo-cols-toggle:focus-visible,
+  .expand-toggle:focus-visible,
+  .bo-quickfilter:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: -2px;
+    color: var(--bo-text);
+  }
   /* Drag-to-resize grip: a thin hit-target straddling the column's right edge. */
   .h .grip {
     position: absolute;
@@ -2037,6 +2251,26 @@
     overflow-y: auto;
     overflow-x: hidden;
     user-select: none;
+    /* Thin, themed scrollbars (Firefox) — Chromium/Safari below. */
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--bo-text-dim) 55%, transparent) transparent;
+  }
+  .viewport::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .viewport::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--bo-text-dim) 45%, transparent);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    border-radius: 6px;
+  }
+  .viewport::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--bo-text-dim) 70%, transparent);
+    background-clip: padding-box;
+  }
+  .viewport::-webkit-scrollbar-corner {
+    background: transparent;
   }
   .empty {
     position: absolute;
@@ -2081,6 +2315,23 @@
       animation: none;
     }
   }
+  .spinner.sm {
+    width: 12px;
+    height: 12px;
+    border-width: 1.5px;
+  }
+  /* Async tree: placeholder row shown while a node's children load. */
+  .row.treeloading {
+    align-items: center;
+  }
+  .tree-loading-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--bo-font-size, 13px);
+    color: var(--bo-text-dim);
+    font-style: italic;
+  }
   .spacer {
     position: relative;
     width: 100%;