@svgrid/grid 3.0.5 → 3.0.6

package/src/server-block-cache.test.ts

@@ -294,6 +294,33 @@ describe('createBlockCache', () => {
     cache.dispose()
   })
 
+  it('retries one failed block by a row index, leaving the other failed blocks alone', async () => {
+    const server = scriptedFetch({ failBlocks: new Set([1, 3]) })
+    const cache = createBlockCache<Row>({
+      blockSize: 100,
+      fetch: server.fetch,
+      onChange: () => {},
+      schedule: sync,
+    })
+    cache.setViewport(100, 399)
+    await server.flush()
+    expect(cache.getCacheState().filter((b) => b.status === 'failed').map((b) => b.blockIndex)).toEqual([1, 3])
+
+    server.failBlocks.clear()
+    // The Retry on a row in block 3: block 1 stays failed, one request goes out.
+    const before = server.startsRequested().length
+    cache.retryFailedAt(350)
+    await server.flush()
+    expect(server.startsRequested().length).toBe(before + 1)
+    expect(cache.getCacheState().find((b) => b.blockIndex === 3)!.status).toBe('loaded')
+    expect(cache.getCacheState().find((b) => b.blockIndex === 1)!.status).toBe('failed')
+    // A row whose block is fine is a no-op.
+    cache.retryFailedAt(250)
+    await server.flush()
+    expect(server.startsRequested().length).toBe(before + 1)
+    cache.dispose()
+  })
+
   it('keeps the first block at its skeleton length when it fails with no count', async () => {
     // Nothing is known about the list yet, so the failed rows are the few
     // the level showed while loading, not a hundred and one of them.

package/src/server-block-cache.ts

@@ -177,6 +177,11 @@ export type BlockCache<TData> = {
   lastRowKnown(): boolean
   /** Re-fetch the blocks that failed. */
   retryFailed(): void
+  /**
+   * Re-fetch the failed block holding `rowIndex`, and only that one; the
+   * Retry on a failed row. A row whose block has not failed is a no-op.
+   */
+  retryFailedAt(rowIndex: number): void
   /**
    * Re-fetch the loaded blocks in place, keeping the row count and scroll
    * position. What you want after a mutation lands on the server.
@@ -502,6 +507,14 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
       if (any) emit()
     },
 
+    retryFailedAt(rowIndex) {
+      const index = blockOf(Math.max(0, rowIndex))
+      if (blocks.get(index)?.status !== 'failed') return
+      blocks.delete(index)
+      ensureBlock(index)
+      emit()
+    },
+
     refresh() {
       // Keep the count and the scroll position: drop the DATA, re-request the
       // same blocks. The user sees skeletons where they were, not a jump home.

package/src/server-data-source.infinite.test.ts

@@ -167,6 +167,68 @@ describe('createServerDataSource in infinite mode', () => {
     ctl.dispose()
   })
 
+  it('retries only the block under the row the grid asks about', async () => {
+    let failing = true
+    const starts: number[] = []
+    const source: ServerDataSource<Row> = {
+      async getRows(req) {
+        starts.push(req.startRow)
+        if (failing && req.startRow >= 100) throw new Error('backend down')
+        const rows: Row[] = []
+        for (let i = req.startRow; i < Math.min(req.endRow, 1000); i += 1) {
+          rows.push({ id: i, name: `Row ${i}` })
+        }
+        return { rows, rowCount: 1000 }
+      },
+    }
+    let view!: ServerState<Row>
+    const ctl = createServerDataSource<Row>(source, {
+      mode: 'infinite',
+      blockSize: 100,
+      onChange: (s) => (view = s),
+    })
+    ctl.setViewport(100, 299)
+    await settle()
+    expect(view.failedBlocks).toEqual([1, 2])
+
+    failing = false
+    const before = starts.length
+    // The GridRowModel seam the failed row's Retry button goes through.
+    ctl.retryRow!(view.rows[250]!, 250)
+    await settle()
+    expect(starts.slice(before)).toEqual([200])
+    expect(view.failedBlocks).toEqual([1])
+    ctl.dispose()
+  })
+
+  it('hands each block a signal that purge, a sort change and dispose abort', async () => {
+    const signals: AbortSignal[] = []
+    const source: ServerDataSource<Row> = {
+      async getRows(req) {
+        signals.push(req.signal!)
+        // A server that never answers: only the abort can end these.
+        return new Promise(() => {})
+      },
+    }
+    const ctl = createServerDataSource<Row>(source, { mode: 'infinite', blockSize: 100, onChange: () => {} })
+    ctl.setViewport(0, 20)
+    await settle()
+    expect(signals).toHaveLength(1)
+    expect(signals[0]!.aborted).toBe(false)
+
+    ctl.purge()
+    await settle()
+    expect(signals[0]!.aborted).toBe(true)
+    expect(signals).toHaveLength(2)
+
+    ctl.setSort([{ id: 'id', desc: true }])
+    await settle()
+    expect(signals[1]!.aborted).toBe(true)
+
+    ctl.dispose()
+    expect(signals.at(-1)!.aborted).toBe(true)
+  })
+
   it('refresh keeps the count and the scroll position, purge does not', async () => {
     const { source, starts } = tableOf(1000)
     let view!: ServerState<Row>

package/src/server-data-source.test.ts

@@ -86,6 +86,25 @@ describe('createServerDataSource', () => {
     expect(ctl.getState().rows[0]).toEqual({ id: 30 })
   })
 
+  it('aborts the page fetch a newer one supersedes, and the last one on dispose', async () => {
+    const signals: AbortSignal[] = []
+    const src: ServerDataSource<Row> = {
+      getRows: async (req) => {
+        signals.push(req.signal!)
+        return new Promise(() => {})
+      },
+    }
+    const ctl = createServerDataSource(src, { pageSize: 10, onChange: () => {} })
+    ctl.refresh()
+    ctl.setPage(3)
+    await new Promise((r) => setTimeout(r, 5))
+    expect(signals).toHaveLength(2)
+    expect(signals[0]!.aborted).toBe(true)
+    expect(signals[1]!.aborted).toBe(false)
+    ctl.dispose()
+    expect(signals[1]!.aborted).toBe(true)
+  })
+
   it('dispose stops further updates', async () => {
     const src = makeSource(50, 20)
     const onChange = vi.fn()

package/src/server-data-source.ts

@@ -63,8 +63,17 @@ export type ServerFilterModel = {
   expression?: GridPredicateExpr
 }
 
-/** A value column to roll up per group. */
-export type ServerAggregation = { col: string; fn: 'sum' | 'avg' | 'min' | 'max' | 'count' }
+/** The aggregate functions every backend helper understands. */
+export type ServerAggFn = 'sum' | 'avg' | 'min' | 'max' | 'count'
+
+/**
+ * One value column to roll up per group. `fn` is one of the five built-ins
+ * or any name your backend knows (`median`, `countDistinct`, a domain
+ * aggregate): the request carries it untouched. The SvelteKit planner emits
+ * only the built-ins plus the names it was told to allow, since `fn` ends
+ * up in SQL.
+ */
+export type ServerAggregation = { col: string; fn: ServerAggFn | (string & {}) }
 
 /**
  * One range of rows as the grid asks for it. A flat request carries the
@@ -122,6 +131,16 @@ export type ServerRequest = {
    * transport posts the whole request to your endpoint.
    */
   context?: unknown
+  /**
+   * Aborted when the grid no longer wants the answer: the block was purged
+   * or evicted, the sort or filter changed, a group was collapsed, the
+   * controller was disposed. Hand it to `fetch` and a query the user has
+   * scrolled past is cancelled at the server instead of completing for
+   * nothing; a rejection carrying the abort is ignored by the grid. Not
+   * serialisable - the SvelteKit transport reads it and leaves it out of
+   * the body.
+   */
+  signal?: AbortSignal
 }
 
 /**
@@ -236,6 +255,21 @@ export type ServerPlaceholderRow = {
   readonly state: 'loading' | 'failed'
 }
 
+/**
+ * The detail panel under a leaf whose detail is open: master-detail on a
+ * server-side row model. The grid draws it through `renderDetailRow`
+ * (mark it with `isDetailRow`); `master` is the leaf it belongs to.
+ */
+export type ServerDetailRow<TData> = {
+  kind: 'detail'
+  id: string
+  level: number
+  route?: string[]
+  /** The leaf's id, as `getRowId` names it. */
+  masterId: string
+  master: TData
+}
+
 /**
  * Every row a server row model can put on screen. Each carries an `id` and
  * a `level`. The block-cached model adds {@link ServerPlaceholderRow} for
@@ -244,6 +278,7 @@ export type ServerPlaceholderRow = {
 export type ServerDisplayRow<TData> =
   | ServerGroupRow<TData>
   | ServerLeafRow<TData>
+  | ServerDetailRow<TData>
   | ServerMoreRow
   | ServerFooterRow<TData>
   | ServerSkeletonRow
@@ -523,6 +558,8 @@ export function createServerDataSource<TData>(
   // Monotonic request id: only the latest fetch is allowed to land, so a slow
   // response for an old sort/filter can't clobber a newer one.
   let requestSeq = 0
+  /** The page fetch in flight; a newer one, or dispose, aborts it. */
+  let pageAbort: AbortController | null = null
   let disposed = false
   // Once per controller: a misconfigured backend would otherwise log on every
   // page, scroll and filter change.
@@ -559,7 +596,7 @@ export function createServerDataSource<TData>(
       maxConcurrentRequests: options.maxConcurrentRequests,
       blockLoadDebounceMs: options.blockLoadDebounceMs,
       initialRowCount: options.initialRowCount,
-      fetch: async (startRow, endRow) => {
+      fetch: async (startRow, endRow, signal) => {
         const result = await source.getRows({
           startRow,
           endRow,
@@ -572,6 +609,7 @@ export function createServerDataSource<TData>(
           groupBy: [],
           groupKeys: [],
           aggregations: [],
+          signal,
         })
         noteExpressionApplied(result)
         return { rows: result.rows, rowCount: result.rowCount }
@@ -617,6 +655,9 @@ export function createServerDataSource<TData>(
   async function fetchPage() {
     if (disposed) return
     const id = ++requestSeq
+    pageAbort?.abort()
+    const controller = new AbortController()
+    pageAbort = controller
     state.loading = true
     state.error = null
     emit()
@@ -634,6 +675,7 @@ export function createServerDataSource<TData>(
         groupBy: [],
         groupKeys: [],
         aggregations: [],
+        signal: controller.signal,
       })
       if (disposed || id !== requestSeq) return // stale
       state.rows = result.rows
@@ -815,7 +857,7 @@ export function createServerDataSource<TData>(
     getRowId: options.getRowId ? (row: TData) => options.getRowId!(row) : undefined,
     // Only infinite mode has unloaded rows to stand in for.
     rowPlaceholder: infinite ? (row: TData) => rowPlaceholderState(row) : undefined,
-    retryRow: infinite ? () => cache?.retryFailed() : undefined,
+    retryRow: infinite ? (_row: TData, rowIndex: number) => cache?.retryFailedAt(rowIndex) : undefined,
     /**
      * A getter, not a snapshot: the grid re-reads this after every change
      * notification, and a frozen object would leave the pager on page 1
@@ -878,6 +920,8 @@ export function createServerDataSource<TData>(
     getState: () => ({ ...state }),
     dispose() {
       disposed = true
+      pageAbort?.abort()
+      pageAbort = null
       cache?.dispose()
       cache = null
       // An in-flight fetch's resolution short-circuits on `disposed`, so it

package/src/server.ts

@@ -19,6 +19,7 @@ export {
   type ServerState,
   type ServerSortModel,
   type ServerFilterModel,
+  type ServerAggFn,
   type ServerAggregation,
   type ServerGroupRow,
   type ServerLeafRow,
@@ -28,6 +29,7 @@ export {
   type ServerGrandTotalRow,
   type ServerPlaceholderRow,
   type ServerDisplayRow,
+  type ServerDetailRow,
 } from './server-data-source'
 export {
   createBlockCache,

package/src/sparkline.test.ts

@@ -59,6 +59,13 @@ describe('buildSparkline', () => {
     expect(g.bars[0]!.h).toBeCloseTo(g.bars[1]!.h)
   })
 
+  it('leaves a blank gap for a zero, marking only wins and losses', () => {
+    const g = buildSparkline([1, 0, -1, 0, 1], { type: 'winloss', height: 20 })!
+    // Two wins and a loss draw; the two zeros are gaps, as Excel draws them.
+    expect(g.bars).toHaveLength(3)
+    expect(g.bars.map((b) => b.negative)).toEqual([false, true, false])
+  })
+
   it('honors a fixed min/max scale', () => {
     const a = buildSparkline([5, 5, 5], { type: 'line', min: 0, max: 10 })!
     // flat series on a 0..10 scale sits at the vertical middle, not the top

package/src/sparkline.ts

@@ -102,11 +102,13 @@ export function buildSparkline(
     const barW = Math.max(1, slot - gap)
     const mid = height / 2
     const h = innerH / 2
-    const bars: SparklineBar[] = values.map((v, i) => {
+    const bars: SparklineBar[] = []
+    values.forEach((v, i) => {
       const x = pad + i * slot + (slot - barW) / 2
-      if (v > 0) return { x, y: mid - h, w: barW, h, negative: false }
-      if (v < 0) return { x, y: mid, w: barW, h, negative: true }
-      return { x, y: mid - 1, w: barW, h: 2, negative: false }
+      // A win/loss sparkline marks a win up and a loss down; a zero is a
+      // blank gap, no mark at all, the way Excel draws one.
+      if (v > 0) bars.push({ x, y: mid - h, w: barW, h, negative: false })
+      else if (v < 0) bars.push({ x, y: mid, w: barW, h, negative: true })
     })
     return { ...base, linePath: '', areaPath: '', bars, lastPoint: null }
   }

package/src/svgrid-wrapper.types.ts

@@ -146,6 +146,14 @@ export type SvGridApi<
   TFeatures extends TableFeatures,
   TData extends RowData,
 > = {
+  // ----- DOM -----
+  /**
+   * The grid's root element (`.sv-grid-root`), or null before mount and
+   * after unmount. For measuring, focusing, or reading the theme the grid
+   * is drawn with - the PDF export takes its colours from here.
+   */
+  getElement(): HTMLElement | null
+
   // ----- Cells -----
   /** Read a cell value from the underlying data at `rowIndex`. */
   getCellValue(rowIndex: number, columnId: string): unknown
@@ -430,6 +438,16 @@ export type SvGridApi<
   /** Snapshot of the current data array (pre-pipeline). */
   getData(): ReadonlyArray<TData>
 
+  /**
+   * The stable id the grid keys a row by: what the `getRowId` prop
+   * computed, or the row's position when no `getRowId` is set. Pass a
+   * display index (the space `getActiveCell`, `scrollToRow` and the cell
+   * methods use) or a row object; returns null for an unknown index or a
+   * row that is not in the data. Pair with `selectRows`, `toggleRowSelected`
+   * or an `applyTransaction` remove, all of which take these ids.
+   */
+  getRowId(row: number | TData): string | null
+
   /**
    * Snapshot of every column the grid currently knows about, in visual
    * order, with the human-readable header label. Use this when exporting
@@ -580,6 +598,20 @@ export type SvGridApi<
   canRedo(): boolean
   /** Wipe both stacks (e.g. after a server save commits the buffer). */
   clearHistory(): void
+  /**
+   * Mark every step recorded from now on with `tag`, until the next call;
+   * `undefined` stops the marking. The grid never reads the tag. It is for a
+   * consumer that shows one of several data sets through the grid (a
+   * workbook's sheets, say) and has to know which one the next Ctrl+Z would
+   * change before it lets the grid apply it: it tags the steps with the data
+   * set they were made on and asks `peekUndo` first.
+   */
+  setHistoryTag(tag: unknown): void
+  /** The step the next `undo()` would apply, or null when there is none. A
+   *  multi-cell action carries one tag, so it reports as one. */
+  peekUndo(): { tag: unknown } | null
+  /** The step the next `redo()` would apply, or null when there is none. */
+  peekRedo(): { tag: unknown } | null
 
   // ----- Keyboard commands -----
   /**

package/src/svgrid.api.test.ts

@@ -104,6 +104,27 @@ describe('SvGridApi - getData / getDisplayedRows', () => {
     }
   })
 
+  it('getRowId resolves a display index and a row object, and returns null for the unknown', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      // No getRowId prop: the id is the row's index as a string.
+      expect(api.getRowId(0)).toBe('0')
+      expect(api.getRowId(4)).toBe('4')
+      expect(api.getRowId(99)).toBeNull()
+      const third = api.getData()[2]!
+      expect(api.getRowId(third)).toBe('2')
+      expect(api.getRowId({ id: 999, name: 'x', team: 'x', salary: 0 })).toBeNull()
+      // After a sort the display index follows the new order.
+      api.setSort('salary', 'desc')
+      await Promise.resolve()
+      const topId = api.getRowId(0)
+      expect(topId).not.toBeNull()
+      expect(api.getData()[Number(topId)]!.salary).toBe(Math.max(...sampleRows.map((r) => r.salary)))
+    } finally {
+      destroy()
+    }
+  })
+
   it('getDisplayedRows returns the post-pipeline visible rows', async () => {
     const { api, destroy } = await mountGrid()
     try {

package/src/svgrid.charting.test.ts

@@ -754,7 +754,15 @@ describe('SvGrid built-in charting', () => {
   })
 
 
-  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: 20_000 }, async () => {
+  // The builder mounts a live SvGridChart per type, thirty of them, in one
+  // synchronous flush. Alone that is well under a second; under `--coverage`
+  // (instrumented chart code, every file of the suite in parallel workers)
+  // it took 22 s on a loaded machine and the four tests that open the
+  // builder timed out at 20 s, the last of them then reading a builder a
+  // timed-out neighbour left behind. The budget is for instrumentation,
+  // not for the product: `pnpm test` runs with coverage and is the gate.
+  const BUILDER_TIMEOUT = 90_000
+  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -805,7 +813,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: 20_000 }, async () => {
+  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -848,7 +856,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: 20_000 }, async () => {
+  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -883,7 +891,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: 20_000 }, async () => {
+  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: BUILDER_TIMEOUT }, async () => {
     const { target, destroy } = await mountGrid({
       charting: { defaultOpen: true },
       localization: { text: { chartPanelTitle: 'Diagramm', chartGroupBy: 'Gruppieren nach', chartTypeBar: 'Balken', chartAdd: 'Diagramm hinzufügen', chartBuilderTitle: 'Diagramm-Editor', chartBuilderTabData: 'Daten', noRows: 'Keine Zeilen' } },

package/src/svgrid.context-menu.test.ts

@@ -137,6 +137,18 @@ describe('SvGrid context menu', () => {
     destroy()
   })
 
+  it('closes on Escape, so a keyboard user is not trapped under it', async () => {
+    const { target, destroy } = await mountGrid(true)
+    await tick()
+    await openContextMenu(target)
+    expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await vi.waitFor(() => {
+      expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
+    })
+    destroy()
+  })
+
   it('does not open when contextMenu is omitted (native menu shows)', async () => {
     const { target, destroy } = await mountGrid(undefined)
     await tick()

package/src/svgrid.detail-rows.svelte.test.ts

@@ -0,0 +1,187 @@
+/**
+ * Detail rows under virtualization: `detailRowHeight` sizes a detail row for
+ * the virtualizer, so a master-detail grid no longer needs
+ * `virtualization={false}`.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: string; name: string; kind: 'data' | 'detail' }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 200 }]
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function rows(): Row[] {
+  const out: Row[] = []
+  for (let i = 0; i < 12; i += 1) {
+    out.push({ id: `r${i}`, name: `row ${i}`, kind: 'data' })
+    if (i === 1 || i === 4) out.push({ id: `d${i}`, name: `detail of ${i}`, kind: 'detail' })
+  }
+  return out
+}
+
+function mountGrid(extra: Record<string, unknown>) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 300,
+        virtualization: true,
+        isDetailRow: (r: Row) => r.kind === 'detail',
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, destroy: () => { unmount(app); target.remove() } })
+        },
+        ...extra,
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+describe('detailRowHeight', () => {
+  it('sizes detail rows for the virtualizer and leaves the others at rowHeight', async () => {
+    const { api, target, destroy } = await mountGrid({ detailRowHeight: 120 })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(true)
+      expect(detail.style.height).toBe('120px')
+      // Index 2 is the detail under row 1; 3 is a plain row.
+      expect(api.getRowHeight(2)).toBe(120)
+      expect(api.getRowHeight(3)).toBe(30)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('takes a function of the row', async () => {
+    const { api, destroy } = await mountGrid({ detailRowHeight: (r: Row) => (r.id === 'd1' ? 80 : 200) })
+    try {
+      await tick()
+      expect(api.getRowHeight(2)).toBe(80)
+      expect(api.getRowHeight(6)).toBe(200)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('without one a detail row is auto height, as before', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(false)
+      expect(detail.style.height).toBe('')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('showDetailToggle', () => {
+  it('is a row-header column: sticky, no menu, no resize handle, a chevron per data row and none on a detail row', async () => {
+    const open = new Set<string>(['r1', 'r4'])
+    const toggled: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      columnResize: true,
+      columnMenu: true,
+      onDetailToggle: (r: Row) => toggled.push(r.id),
+      isDetailOpen: (r: Row) => open.has(r.id),
+      detailRowHeight: 60,
+    })
+    try {
+      await tick()
+      const head = target.querySelector<HTMLElement>('thead th.sv-grid-detail-toggle-column')!
+      expect(head).not.toBeNull()
+      expect(head.getAttribute('aria-hidden')).toBe('true')
+      expect(head.querySelector('.sv-grid-col-menu-btn, .sv-grid-column-resizer, [data-resize-handle]')).toBeNull()
+      expect(head.style.position || getComputedStyle(head).position).not.toBe('')
+      const first = target.querySelector<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')!
+      const cell = first.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell).not.toBeNull()
+      // The gutter is not a data cell: nothing the keyboard or the selection can land on.
+      expect(cell.hasAttribute('data-svgrid-col')).toBe(false)
+      const chev = cell.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('false')
+      expect(chev.getAttribute('aria-label')).toBe('Open details')
+      chev.click()
+      expect(toggled).toEqual(['r0'])
+      // Row 1 is open: its chevron says so; the detail row under it has a blank gutter cell.
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-expanded')).toBe('true')
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-label')).toBe('Close details')
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      // The full-width cell spans the gutter too.
+      expect(detail.querySelector<HTMLTableCellElement>('td.sv-grid-detail-cell')!.colSpan).toBe(first.children.length)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves the chevron out where hasDetail says no, and sticks after the row numbers and the checkbox', async () => {
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      showRowNumbers: true,
+      showRowSelection: true,
+      onDetailToggle: () => {},
+      hasDetail: (r: Row) => r.id !== 'r0',
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')]
+      expect(rowsAll[0]!.querySelector('td.sv-grid-detail-toggle-cell button')).toBeNull()
+      expect(rowsAll[1]!.querySelector('td.sv-grid-detail-toggle-cell button')).not.toBeNull()
+      // Row number (56) + selection (44) sit before it.
+      const cell = rowsAll[1]!.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell.style.left).toBe('100px')
+      expect(cell.style.width).toBe('36px')
+      // The system cells come in that order, then the data.
+      const classes = [...rowsAll[1]!.children].map((td) => td.className.split(' ')[1])
+      expect(classes.slice(0, 3)).toEqual(['sv-grid-row-number-cell', 'sv-grid-selection-cell', 'sv-grid-detail-toggle-cell'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('on a server row model the seam decides: groups get no chevron, a leaf reads detailOpen and calls toggleDetail', async () => {
+    const calls: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      serverGroup: {
+        isGroup: (r: Row) => r.id === 'r0',
+        level: () => 0,
+        onToggle: () => {},
+        toggleDetail: (r: Row) => calls.push(r.id),
+        detailOpen: (r: Row) => r.id === 'r1',
+        hasDetail: (r: Row) => r.kind === 'data',
+      },
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r0 = rowsAll.find((tr) => tr.textContent?.includes('row 0'))!
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r0.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      const chev = r1.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('true')
+      chev.click()
+      expect(calls).toEqual(['r1'])
+    } finally {
+      destroy()
+    }
+  })
+})