bo-grid 0.1.0 → 0.2.0

package/dist/grid/Grid.svelte

@@ -14,6 +14,7 @@
   import { Selection } from './selection.svelte';
   import { aggregate, type AggKind, type AggResult } from './aggregate';
   import { buildFlatRows, activeGroupsAt, type VisualRow, type GroupNode } from './grouping';
+  import { buildTreeRows } from './tree';
   import { moveIndex } from './reorder';
   import { parseClipboard, isSingleCell } from './clipboard';
   import { applyWidths, clampWidth, isResizable, type WidthMap } from './sizing';
@@ -22,6 +23,8 @@
   import Cell from './Cell.svelte';
   import GroupRow from './GroupRow.svelte';
   import AggregationBar from './AggregationBar.svelte';
+  import Pager from './Pager.svelte';
+  import RowMenu from './RowMenu.svelte';
 
   let {
     rows,
@@ -48,6 +51,19 @@
     onCellClick,
     pinnedRows = [],
     filterRow = false,
+    emptyMessage = 'No matching rows',
+    loading = false,
+    rowMenu,
+    detail,
+    detailHeight = 160,
+    getChildren,
+    onRowReorder,
+    pageSize = 0,
+    page,
+    onPageChange,
+    onColumnReorder,
+    onColumnResize,
+    ariaLabel,
     cell,
   }: {
     rows: GridRow[];
@@ -99,6 +115,40 @@
     /** Show a per-column filter input row under the header. Rows must match every
         non-empty column filter (AND). In-memory mode only. Default false. */
     filterRow?: boolean;
+    /** Message shown when there are no rows. Default 'No matching rows'. */
+    emptyMessage?: string;
+    /** Show a loading overlay over the grid (for consumer-driven async work in
+        in-memory mode; source mode shows skeleton rows automatically). */
+    loading?: boolean;
+    /** Right-click row menu. Return the items for a row; an empty array shows no
+        menu. Each item runs `onSelect` and closes the menu. */
+    rowMenu?: (row: GridRow) => Array<{ label: string; onSelect: () => void }>;
+    /** Master-detail: render an expandable detail panel under a row. Adds a
+        leading expand-toggle column. In-memory mode only (overrides rowHeight). */
+    detail?: Snippet<[{ row: GridRow }]>;
+    /** Height (px) of the expanded detail panel. Default 160. */
+    detailHeight?: number;
+    /** Tree data: return a row's children (undefined/empty = leaf). When set,
+        `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;
+    /** 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. */
+    onRowReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Rows per page. When > 0 (in-memory mode), shows a pager instead of one
+        long scroll; rows still virtualize within a page. Default 0 (off). */
+    pageSize?: number;
+    /** Controlled current page (0-based). Omit for uncontrolled paging. */
+    page?: number;
+    /** Called with the new page index when the pager is used. */
+    onPageChange?: (page: number) => void;
+    /** Called with the new column-key order after a header drag-reorder. */
+    onColumnReorder?: (keys: string[]) => void;
+    /** Called with a column key + new width after a drag-resize. */
+    onColumnResize?: (key: string, width: number) => void;
+    /** Accessible name for the grid (`aria-label` on the `role="grid"` root). */
+    ariaLabel?: string;
     filter?: string;
     groupBy?: string[];
     aggregations?: AggKind[];
@@ -135,9 +185,13 @@
   const sel = new Selection();
   let dragging = $state(false);
   let editing = $state<{ r: number; c: number } | null>(null);
+  // When editing was opened by typing a character (type-to-edit), the editor
+  // seeds its input with it; null means edit the existing value (dblclick/Enter).
+  let editSeed = $state<string | null>(null);
 
-  function startEdit(r: number, c: number) {
+  function startEdit(r: number, c: number, seed: string | null = null) {
     if (!isEditable(cols[c]) || !dataAt(r)) return;
+    editSeed = seed;
     editing = { r, c };
   }
   // Coerce + validate a raw string for cell (r,c) and emit onCellEdit.
@@ -161,6 +215,7 @@
 
   function commitEdit(r: number, c: number, raw: string) {
     editing = null;
+    editSeed = null;
     writeCell(r, c, raw);
   }
 
@@ -181,9 +236,30 @@
   // Whole-row selection (opt-in), keyed by row id so it survives sort/filter.
   // Plain Set + a version counter for reactivity (same pattern as `collapsed`).
   const SEL_W = 40; // checkbox column width (px)
+  const EXP_W = 30; // master-detail expand column width (px)
   const selectedRows = new Set<string | number>();
   let selRowsVersion = $state(0);
+
+  // Master-detail expansion (opt-in via `detail`), keyed by row id.
+  const expandedRows = new Set<string | number>();
+  let expVersion = $state(0);
+  const expandable = $derived(!!detail && !source);
+
+  // Leading fixed columns: expand toggle (if any) then checkbox (if any).
   const selOffset = $derived(rowSelection ? 1 : 0);
+  const expOffset = $derived(expandable ? 1 : 0);
+  const leadCols = $derived(selOffset + expOffset); // count, for aria indices
+  const leadPx = $derived(selOffset * SEL_W + expOffset * EXP_W); // px, for sticky offsets
+
+  function isExpanded(id: string | number): boolean {
+    expVersion; // track
+    return expandedRows.has(id);
+  }
+  function toggleExpand(id: string | number): void {
+    if (expandedRows.has(id)) expandedRows.delete(id);
+    else expandedRows.add(id);
+    expVersion++;
+  }
 
   function isRowSelected(id: string | number): boolean {
     selRowsVersion; // track
@@ -237,24 +313,38 @@
 
   // Pinned columns sit to the right of the (also-sticky) checkbox column, so
   // their sticky-left offsets shift by SEL_W when row selection is on.
+  // Sticky position for a pinned column: left columns offset past the (also
+  // sticky) checkbox column; right columns offset from the right edge.
+  function pinStick(ci: number): string {
+    const inf = layout.info[ci];
+    if (inf.side === 'right') return `position:sticky;right:${inf.right}px;`;
+    return `position:sticky;left:${inf.left + leadPx}px;`;
+  }
   function headStyle(ci: number): string {
     if (!pinned) 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 += `position:sticky;left:${inf.left + selOffset * SEL_W}px;z-index:5;background:var(--bo-header-bg);`;
+    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]);
     const inf = layout.info[ci];
     let s = `flex:0 0 ${inf.width}px;width:${inf.width}px;`;
-    if (inf.pinned) s += `position:sticky;left:${inf.left + selOffset * SEL_W}px;z-index:1;background:var(--bo-bg);`;
+    if (inf.pinned) s += `${pinStick(ci)}z-index:1;background:var(--bo-bg);`;
     return s;
   }
-  // The leading checkbox column: a fixed-width flex item, sticky-left when the
-  // grid scrolls horizontally (pinned mode).
+  // The leading checkbox column: a fixed-width flex item, sticky-left (past the
+  // 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)
+      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)
       s += `position:sticky;left:0;z-index:${header ? 6 : 2};background:var(--bo-${header ? 'header-bg' : 'bg'});`;
     return s;
@@ -301,6 +391,7 @@
         /* storage unavailable — order still applies this session */
       }
     }
+    onColumnReorder?.(next.map((i) => columns[i].key));
   }
 
   // ---- Column resizing -------------------------------------------------------
@@ -331,7 +422,7 @@
     });
   });
 
-  let resize: { key: string; startX: number; startW: number } | null = null;
+  let resize: { key: string; startX: number; startW: number; min?: number; max?: number } | null = null;
   let justResized = false;
 
   function startResize(ci: number, e: PointerEvent) {
@@ -340,22 +431,24 @@
     e.stopPropagation();
     const headCell = (e.currentTarget as HTMLElement).closest('.h') as HTMLElement | null;
     const startW = headCell ? headCell.getBoundingClientRect().width : layout.info[ci].width;
-    resize = { key: cols[ci].key, startX: e.clientX, startW };
+    resize = { key: cols[ci].key, startX: e.clientX, startW, min: cols[ci].minWidth, max: cols[ci].maxWidth };
     window.addEventListener('pointermove', onResizeMove);
     window.addEventListener('pointerup', onResizeUp);
   }
   function onResizeMove(e: PointerEvent) {
     if (!resize) return;
-    const w = clampWidth(resize.startW + (e.clientX - resize.startX));
+    const w = clampWidth(resize.startW + (e.clientX - resize.startX), resize.min, resize.max);
     widths = { ...widths, [resize.key]: w };
   }
   function onResizeUp() {
     if (!resize) return;
+    const { key } = resize;
     resize = null;
     justResized = true; // swallow the click that ends this drag (no sort toggle)
     window.removeEventListener('pointermove', onResizeMove);
     window.removeEventListener('pointerup', onResizeUp);
     persistWidths();
+    onColumnResize?.(key, widths[key]);
   }
   /** Double-click a resize grip to clear the override and restore the default. */
   function resetWidth(ci: number, e: MouseEvent) {
@@ -421,18 +514,75 @@
       if (colF.length > 0) {
         r = r.filter((row) => colF.every(([k, v]) => String(row[k] ?? '').toLowerCase().includes(v)));
       }
-      if (s.length > 0) r = [...r].sort((a, b) => compareBySorts(a, b, s));
+      if (s.length > 0) {
+        const colOf = (k: string) => allCols.find((c) => c.key === k);
+        r = [...r].sort((a, b) => compareBySorts(a, b, s, colOf));
+      }
       return r;
     });
   });
 
+  // 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);
+  let internalPage = $state(0);
+  const currentPage = $derived(page ?? internalPage); // controlled by `page` prop, else internal
+  function setPage(p: number): void {
+    if (page === undefined) internalPage = p; // uncontrolled: own the state
+    onPageChange?.(p); // always notify
+  }
+  const pageCount = $derived(paged ? Math.max(1, Math.ceil(view.length / pageSize)) : 1);
+  // Keep the page in range when the view shrinks (filter/sort changes).
+  $effect(() => {
+    const max = pageCount - 1;
+    untrack(() => {
+      if (currentPage > max) setPage(max);
+    });
+  });
+  const pageRows = $derived(
+    paged ? view.slice(currentPage * pageSize, currentPage * pageSize + pageSize) : view,
+  );
+
+  const treeData = $derived(!!getChildren && !source);
+
+  // 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.
+  const reorderable = $derived(
+    !!onRowReorder && !source && !treeData && groupBy.length === 0 && pageSize <= 0,
+  );
+  let dragRowVr = $state(-1);
+  let dropRowVr = $state(-1);
+  function onRowDrop() {
+    if (dragRowVr >= 0 && dropRowVr >= 0 && dragRowVr !== dropRowVr) {
+      onRowReorder?.(dragRowVr, dropRowVr);
+    }
+    dragRowVr = -1;
+    dropRowVr = -1;
+  }
+
   const flat = $derived.by<VisualRow[]>(() => {
-    const v = view;
+    if (treeData && getChildren) {
+      const roots = rows;
+      expVersion; // track expand/collapse
+      return untrack(() =>
+        buildTreeRows(roots, getChildren, (r) => expandedRows.has(getRowId(r))),
+      );
+    }
+    const v = pageRows;
     const gb = groupBy;
     collapsedVersion;
     return untrack(() => buildFlatRows(v, gb, collapsed));
   });
 
+  function goToPage(p: number): void {
+    const next = Math.max(0, Math.min(p, pageCount - 1));
+    if (next === currentPage) return;
+    setPage(next);
+    sel.clear();
+    editing = null;
+    if (viewportEl) viewportEl.scrollTop = 0;
+  }
+
   // Header select-all state over the in-memory rows (source mode can't enumerate
   // unloaded ids, so the header checkbox is disabled there).
   const selectAll = $derived.by(() => {
@@ -483,22 +633,32 @@
   // a prefix-sum model (in-memory only — source mode can't know unloaded heights).
   const baseH = $derived(typeof rowHeight === 'number' && rowHeight > 0 ? rowHeight : ROW_H);
   const variable = $derived(typeof rowHeight === 'function' && !source);
+  // Use a prefix-sum height model when row heights vary: a `rowHeight` function,
+  // or master-detail expansion (expanded rows are taller by `detailHeight`).
+  const useHeights = $derived(variable || expandable);
   const heights = $derived.by<number[] | null>(() => {
-    if (!variable) return null;
-    const fn = rowHeight as (row: GridRow, index: number) => number;
+    if (!useHeights) return null;
+    const fn = variable ? (rowHeight as (row: GridRow, index: number) => number) : null;
+    expVersion; // track expansion changes
     const arr = new Array<number>(flat.length);
     let di = 0;
     for (let i = 0; i < flat.length; i++) {
       const it = flat[i];
-      arr[i] = it.kind === 'data' ? Math.max(1, fn(it.row, di++)) : baseH;
+      if (it.kind !== 'data') {
+        arr[i] = baseH;
+        continue;
+      }
+      let h = fn ? Math.max(1, fn(it.row, di++)) : baseH;
+      if (expandable && expandedRows.has(getRowId(it.row))) h += detailHeight;
+      arr[i] = h;
     }
     return arr;
   });
-  const hm = $derived(variable && heights ? variableHeights(heights) : uniformHeights(rowCount, baseH));
+  const hm = $derived(useHeights && heights ? variableHeights(heights) : uniformHeights(rowCount, baseH));
 
   const total = $derived(hm.total);
   const rowWidthStyle = $derived(
-    pinned ? `width:${layout.totalWidth + selOffset * SEL_W}px;right:auto;` : '',
+    pinned ? `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));
@@ -510,7 +670,7 @@
 
   type RenderItem =
     | { vr: number; kind: 'group'; group: GroupNode }
-    | { vr: number; kind: 'data'; row: GridRow }
+    | { vr: number; kind: 'data'; row: GridRow; depth?: number; hasChildren?: boolean }
     | { vr: number; kind: 'skeleton' };
 
   const renderItems = $derived.by<RenderItem[]>(() => {
@@ -526,7 +686,7 @@
         const item = flat[vr];
         if (!item) continue;
         if (item.kind === 'group') out.push({ vr, kind: 'group', group: item.group });
-        else out.push({ vr, kind: 'data', row: item.row });
+        else out.push({ vr, kind: 'data', row: item.row, depth: item.depth, hasChildren: item.hasChildren });
       }
     }
     return out;
@@ -598,6 +758,29 @@
     if (dragging) sel.extendTo(r, c);
   }
 
+  // Right-click row menu (floating).
+  let menu = $state<{ x: number; y: number; items: Array<{ label: string; onSelect: () => void }> } | null>(null);
+  function openRowMenu(row: GridRow, e: MouseEvent) {
+    if (!rowMenu) return;
+    const items = rowMenu(row);
+    if (items.length === 0) return;
+    e.preventDefault();
+    menu = { x: e.clientX, y: e.clientY, items };
+  }
+  $effect(() => {
+    if (!menu) return;
+    const close = () => (menu = null);
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && (menu = null);
+    window.addEventListener('pointerdown', close);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('blur', close);
+    return () => {
+      window.removeEventListener('pointerdown', close);
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('blur', close);
+    };
+  });
+
   function onCellClicked(r: number, c: number, e: MouseEvent) {
     if (!onCellClick) return;
     const row = dataAt(r);
@@ -636,7 +819,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]));
+        cells.push(col.type === 'sparkline' || col.type === 'custom' ? '' : formatCell(col, row[col.key], row));
       }
       lines.push(cells.join('\t'));
     }
@@ -708,6 +891,28 @@
         }
       }
     }
+    // Space toggles selection of the focused row (when the checkbox column is on),
+    // so keyboard users can tick rows without reaching for the mouse.
+    if (e.key === ' ' && rowSelection && sel.focus && !editing) {
+      const row = dataAt(sel.focus.r);
+      if (row) {
+        e.preventDefault();
+        toggleRow(getRowId(row));
+        return;
+      }
+    }
+    // Type-to-edit (Excel-style): a printable key on a focused editable text/number
+    // cell opens the editor seeded with that character. Select-column editors keep
+    // their Enter-to-open behavior.
+    if (!mod && !e.altKey && e.key.length === 1 && e.key !== ' ' && sel.focus && !editing) {
+      const f = sel.focus;
+      const col = cols[f.c];
+      if (isEditable(col) && !(col.options && col.options.length) && dataAt(f.r)) {
+        e.preventDefault();
+        startEdit(f.r, f.c, e.key);
+        return;
+      }
+    }
     if (mod && e.key.toLowerCase() === 'a') {
       e.preventDefault();
       sel.selectAll(rowCount, cols.length);
@@ -727,6 +932,36 @@
       sel.clear();
       return;
     }
+    // Open the row menu from the keyboard (ContextMenu key / Shift+F10).
+    if (rowMenu && sel.focus && (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10'))) {
+      const row = dataAt(sel.focus.r);
+      const items = row ? rowMenu(row) : [];
+      if (items.length > 0) {
+        e.preventDefault();
+        const rect = document.getElementById(activeId ?? '')?.getBoundingClientRect();
+        menu = { x: rect?.left ?? 0, y: rect?.bottom ?? 0, items };
+        return;
+      }
+    }
+    // Tree nav: ArrowRight expands a collapsed node, ArrowLeft collapses an
+    // expanded one (treegrid pattern); otherwise arrows move normally.
+    if (treeData && sel.focus && (e.key === 'ArrowRight' || e.key === 'ArrowLeft')) {
+      const item = flat[sel.focus.r];
+      if (item?.kind === 'data' && item.hasChildren) {
+        const id = getRowId(item.row);
+        const open = expandedRows.has(id);
+        if (e.key === 'ArrowRight' && !open) {
+          e.preventDefault();
+          toggleExpand(id);
+          return;
+        }
+        if (e.key === 'ArrowLeft' && open) {
+          e.preventDefault();
+          toggleExpand(id);
+          return;
+        }
+      }
+    }
     // Home/End (row, or whole grid with Ctrl/⌘); PageUp/PageDown by a viewport page.
     const f = sel.focus;
     if (f && (e.key === 'Home' || e.key === 'End' || e.key === 'PageUp' || e.key === 'PageDown')) {
@@ -777,8 +1012,9 @@
   role="grid"
   tabindex="0"
   id={gid}
+  aria-label={ariaLabel}
   aria-rowcount={rowCount + 1}
-  aria-colcount={cols.length + selOffset}
+  aria-colcount={cols.length + leadCols}
   aria-multiselectable="true"
   aria-activedescendant={activeId}
   style={themeStyle}
@@ -787,6 +1023,7 @@
 >
   {#if headerGroups}
     <div class="head-groups" aria-hidden="true" bind:this={groupHeadEl} style={pinned ? '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)}
         <span class="hg" class:empty={!g.label} style="flex:0 0 {g.width}px;width:{g.width}px;">{g.label}</span>
@@ -794,8 +1031,11 @@
     </div>
   {/if}
   <div class="head" role="row" aria-rowindex={1} bind:this={headEl} style={pinned ? 'overflow:hidden;' : ''}>
+    {#if expandable}
+      <span class="expandcell selhead" role="columnheader" aria-colindex={1} style={expandCellStyle(true)}></span>
+    {/if}
     {#if rowSelection}
-      <span class="selcell selhead" role="columnheader" aria-colindex={1} style={selCellStyle(true)}>
+      <span class="selcell selhead" role="columnheader" aria-colindex={1 + expOffset} style={selCellStyle(true)}>
         <input
           type="checkbox"
           class="rowcheck"
@@ -810,7 +1050,7 @@
     {/if}
     {#each cols as col, ci (ci)}
       <button
-        class="h"
+        class="h {col.headerClass ?? ''}"
         class:right={isNumeric(col) || col.align === 'right'}
         class:sortable={isSortable(col)}
         class:dragging={ci === dragSrc}
@@ -818,7 +1058,7 @@
         style={headStyle(ci)}
         type="button"
         role="columnheader"
-        aria-colindex={ci + 1 + selOffset}
+        aria-colindex={ci + 1 + leadCols}
         draggable="true"
         aria-sort={isSortable(col) && sortInfo(col.key)
           ? sortInfo(col.key)?.dir === 'asc'
@@ -873,6 +1113,7 @@
 
   {#if filterRow && !source}
     <div class="filter-row" role="row" bind:this={filterRowEl} style={pinned ? '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)}
         <span class="fr-cell" style={cellWidthStyle(ci)}>
@@ -901,6 +1142,7 @@
       <div class="pinned-top">
         {#each pinnedRows as prow, pi (getRowId(prow))}
           <div class="row pinrow {rowClass?.(prow) ?? ''}" role="row" aria-hidden="true" style="height:{baseH}px;{rowWidthStyle}">
+            {#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)}
               <Cell
@@ -908,11 +1150,12 @@
                 row={prow}
                 r={-1 - pi}
                 c={ci}
-                colIndex={ci + 1 + selOffset}
+                colIndex={ci + 1 + leadCols}
                 cellId={`${gid}-pin${pi}-c${ci}`}
                 cellSnippet={cell}
                 pinned={pinned && layout.info[ci].pinned}
-                pinLeft={layout.info[ci].left + selOffset * SEL_W}
+                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}
               />
             {/each}
@@ -921,7 +1164,13 @@
       </div>
     {/if}
     {#if rowCount === 0 && !controller?.loading}
-      <div class="empty">No matching rows</div>
+      <div class="empty">{emptyMessage}</div>
+    {/if}
+    {#if loading}
+      <div class="loading-overlay" aria-busy="true" aria-live="polite">
+        <span class="spinner" aria-hidden="true"></span>
+        <span class="loading-label">Loading…</span>
+      </div>
     {/if}
     {#if stickyGroups.length > 0}
       <div class="sticky">
@@ -932,15 +1181,17 @@
         {/each}
       </div>
     {/if}
-    <div class="spacer" style="height:{total}px;{pinned ? `width:${layout.totalWidth + selOffset * SEL_W}px;` : ''}">
+    <div class="spacer" style="height:{total}px;{pinned ? `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} />
           </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}">
+            {#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)}
               <span class="c" style={cellWidthStyle(ci)}><span class="skelbar"></span></span>
@@ -949,7 +1200,24 @@
         {: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 -->
-          <div class="row {rowClass?.(item.row) ?? ''}" class:alt={item.vr % 2 === 1} class:rowsel={rowSelection && isRowSelected(getRowId(item.row))} class:clickable={!!onRowClick} role="row" tabindex="-1" aria-rowindex={item.vr + 2} aria-selected={rowSelection ? isRowSelected(getRowId(item.row)) : undefined} style="top:{hm.offsetOf(item.vr)}px;height:{hm.heightOf(item.vr)}px;{rowWidthStyle}" onclick={(e) => onRowClick?.(item.row, e)}>
+          <div class="row {rowClass?.(item.row) ?? ''}" class:alt={item.vr % 2 === 1} class:rowsel={rowSelection && isRowSelected(getRowId(item.row))} class:clickable={!!onRowClick} class:droptarget={reorderable && dropRowVr === item.vr && dragRowVr !== item.vr} role="row" tabindex="-1" aria-rowindex={item.vr + 2} aria-selected={rowSelection ? isRowSelected(getRowId(item.row)) : undefined} aria-level={treeData ? (item.depth ?? 0) + 1 : undefined} aria-expanded={treeData && item.hasChildren ? isExpanded(getRowId(item.row)) : undefined} style="top:{hm.offsetOf(item.vr)}px;height:{expandable ? baseH : hm.heightOf(item.vr)}px;{rowWidthStyle}" onclick={(e) => onRowClick?.(item.row, e)} oncontextmenu={(e) => openRowMenu(item.row, e)} ondragover={reorderable ? (e) => { if (dragRowVr < 0) return; e.preventDefault(); dropRowVr = item.vr; } : undefined} ondrop={reorderable ? (e) => { e.preventDefault(); onRowDrop(); } : undefined}>
+            {#if expandable}
+              <span class="expandcell" style={expandCellStyle(false)}>
+                <button
+                  class="expand-toggle"
+                  type="button"
+                  aria-expanded={isExpanded(getRowId(item.row))}
+                  aria-label="Toggle detail"
+                  onpointerdown={(e) => e.stopPropagation()}
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    toggleExpand(getRowId(item.row));
+                  }}
+                >
+                  {isExpanded(getRowId(item.row)) ? '▾' : '▸'}
+                </button>
+              </span>
+            {/if}
             {#if rowSelection}
               <span class="selcell" style={selCellStyle(false)}>
                 <input
@@ -969,30 +1237,52 @@
                 row={item.row}
                 r={item.vr}
                 c={ci}
-                colIndex={ci + 1 + selOffset}
+                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}
-                pinLeft={layout.info[ci].left + selOffset * SEL_W}
+                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}
+                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)}
+                onEditCancel={() => {
+                  editing = null;
+                  editSeed = null;
+                }}
               />
             {/each}
           </div>
+          {#if expandable && detail && isExpanded(getRowId(item.row))}
+            <div class="row-detail" style="top:{hm.offsetOf(item.vr) + baseH}px;height:{detailHeight}px;{rowWidthStyle}">
+              {@render detail({ row: item.row })}
+            </div>
+          {/if}
         {/if}
       {/each}
     </div>
     {#if footerCells}
-      <div class="footer" role="row" style={pinned ? `width:${layout.totalWidth + selOffset * SEL_W}px;` : ''}>
+      <div class="footer" role="row" style={pinned ? `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)}
           <span class="fcell" class:right={isNumeric(col)} style={cellWidthStyle(ci)}>
@@ -1004,6 +1294,14 @@
   </div>
 
   <AggregationBar result={agg} kinds={aggregations} />
+
+  {#if paged}
+    <Pager page={currentPage} {pageCount} total={view.length} onGoto={goToPage} />
+  {/if}
+
+  {#if menu}
+    <RowMenu x={menu.x} y={menu.y} items={menu.items} onClose={() => (menu = null)} />
+  {/if}
 </div>
 
 <style>
@@ -1199,6 +1497,40 @@
     color: var(--bo-text-dim);
     font-size: 13px;
   }
+  .loading-overlay {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    height: 100%;
+    margin-bottom: -100%; /* overlay without consuming scroll height */
+    color: var(--bo-text-dim);
+    font-size: 13px;
+    background: color-mix(in srgb, var(--bo-bg) 70%, transparent);
+    backdrop-filter: blur(1px);
+  }
+  .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--bo-border);
+    border-top-color: var(--bo-sel-border);
+    border-radius: 50%;
+    animation: bo-spin 0.7s linear infinite;
+  }
+  @keyframes bo-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
   .spacer {
     position: relative;
     width: 100%;
@@ -1244,6 +1576,9 @@
   .row.clickable {
     cursor: pointer;
   }
+  .row.droptarget {
+    box-shadow: inset 0 2px 0 var(--bo-sel-border);
+  }
 
   /* Pinned top rows: stick to the top of the viewport above the scroll. */
   .pinned-top {
@@ -1289,6 +1624,38 @@
     justify-content: flex-end;
   }
 
+  /* Master-detail: leading expand-toggle column + detail panel. */
+  .expandcell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+  }
+  .expand-toggle {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--bo-text-dim);
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .expand-toggle:hover {
+    color: var(--bo-text);
+    background: var(--bo-row-hover);
+  }
+  .row-detail {
+    position: absolute;
+    left: 0;
+    overflow: auto;
+    background: var(--bo-row-a);
+    border-bottom: 0.5px solid var(--bo-border);
+    box-shadow: inset 0 1px 0 var(--bo-border);
+  }
+
   /* Leading checkbox column (row selection). */
   .selcell {
     display: flex;