@svgrid/grid 3.0.4 → 3.0.6

package/src/svgrid.row-model-seam.svelte.test.ts

@@ -0,0 +1,305 @@
+/**
+ * The four seams a server-backed row model plugs into, all free:
+ *
+ *   - `onVisibleRangeChange` - which rows are on screen, by index
+ *   - `rowPlaceholder` / `onRetryRow` - rows whose data has not arrived
+ *   - `rowSelectionModel` - selection the grid does not own
+ *
+ * They are deliberately generic: none of them mentions groups, blocks or a
+ * datasource, so the free infinite controller and the Enterprise row model
+ * plug into the same four holes, and an app with its own fetching can too.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 160 },
+  { field: 'id', header: 'Id', width: 80 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const rowsOf = (n: number): Row[] =>
+  Array.from({ length: n }, (_, i) => ({ id: i, name: `Row ${i}` }))
+
+function mountGrid(extra: Record<string, unknown>, data: Row[] = rowsOf(5)) {
+  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,
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        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('onVisibleRangeChange', () => {
+  it('reports the whole list when virtualization is off', async () => {
+    const seen: Array<{ startIndex: number; endIndex: number }> = []
+    const { destroy } = await mountGrid({ onVisibleRangeChange: (r: any) => seen.push(r) }, rowsOf(5))
+    await tick()
+
+    expect(seen.at(-1)).toEqual({ startIndex: 0, endIndex: 4 })
+    destroy()
+  })
+
+  it('reports row indices, not pixels, when virtualization is on', async () => {
+    const seen: Array<{ startIndex: number; endIndex: number }> = []
+    const { destroy } = await mountGrid(
+      {
+        onVisibleRangeChange: (r: any) => seen.push(r),
+        virtualization: true,
+        containerHeight: 200,
+      },
+      rowsOf(10_000),
+    )
+    await tick()
+
+    const last = seen.at(-1)!
+    expect(last.startIndex).toBe(0)
+    // A 200px viewport cannot be showing ten thousand rows, and the numbers
+    // are row indices - if these were the pixel offsets the old deriveds
+    // carry, endIndex would be in the hundreds.
+    expect(last.endIndex).toBeGreaterThan(0)
+    expect(last.endIndex).toBeLessThan(200)
+    destroy()
+  })
+
+  it('does not fire again while the range is unchanged', async () => {
+    const seen: Array<unknown> = []
+    const { api, destroy } = await mountGrid({ onVisibleRangeChange: (r: any) => seen.push(r) })
+    await tick()
+    const count = seen.length
+
+    // Something unrelated changes; the visible rows do not.
+    api.selectRows(['1'])
+    await tick()
+    expect(seen).toHaveLength(count)
+    destroy()
+  })
+})
+
+describe('rowPlaceholder', () => {
+  it('draws a skeleton cell per column for a loading row', async () => {
+    const { target, destroy } = await mountGrid({
+      rowPlaceholder: (row: Row) => (row.id === 2 ? 'loading' : null),
+    })
+    await tick()
+
+    const placeholder = target.querySelector('.sv-grid-placeholder-row')!
+    expect(placeholder).not.toBeNull()
+    expect(placeholder.getAttribute('aria-busy')).toBe('true')
+    // One shimmer per real column, so the table keeps its shape.
+    expect(placeholder.querySelectorAll('.sv-grid-placeholder-skeleton')).toHaveLength(cols.length)
+    // And the rows around it are untouched.
+    expect(target.querySelectorAll('.sv-grid-placeholder-row')).toHaveLength(1)
+    destroy()
+  })
+
+  it('draws one full-width message with a Retry button for a failed row', async () => {
+    const retried: Array<{ row: Row; index: number }> = []
+    const { target, destroy } = await mountGrid({
+      rowPlaceholder: (row: Row) => (row.id === 3 ? 'failed' : null),
+      onRetryRow: (row: Row, index: number) => retried.push({ row, index }),
+    })
+    await tick()
+
+    const failed = target.querySelector('.sv-grid-placeholder-failed')!
+    expect(failed).not.toBeNull()
+    expect(failed.textContent).toContain('Could not load')
+    expect(failed.querySelectorAll('.sv-grid-placeholder-skeleton')).toHaveLength(0)
+
+    const retry = failed.querySelector<HTMLButtonElement>('.sv-grid-placeholder-retry')!
+    retry.click()
+    expect(retried).toHaveLength(1)
+    expect(retried[0]!.row.id).toBe(3)
+    expect(retried[0]!.index).toBe(3)
+    destroy()
+  })
+
+  it('gives a run of failed rows one message, and a band under it', async () => {
+    // A failed block is claimed row by row; the message and Retry sit on
+    // the first row of the run, the rest are the same tint with nothing
+    // to read, so a hundred-row block is not a hundred red lines.
+    const { target, destroy } = await mountGrid(
+      {
+        rowPlaceholder: (row: Row) => (row.id >= 2 && row.id <= 4 ? 'failed' : null),
+        onRetryRow: () => {},
+      },
+      rowsOf(7),
+    )
+    await tick()
+    const failed = [...target.querySelectorAll('.sv-grid-placeholder-failed')]
+    expect(failed).toHaveLength(3)
+    expect(failed.map((r) => r.classList.contains('sv-grid-placeholder-failed-cont'))).toEqual([false, true, true])
+    expect(target.querySelectorAll('.sv-grid-placeholder-retry')).toHaveLength(1)
+    expect(failed[0]!.textContent).toContain('Could not load')
+    expect(failed[1]!.textContent!.trim()).toBe('')
+    // Every row of the run keeps its own slot: the scrollbar does not move.
+    expect(target.querySelectorAll('tbody .sv-grid-row').length).toBe(7)
+    destroy()
+  })
+
+  it('omits the Retry button when there is no handler to run', async () => {
+    const { target, destroy } = await mountGrid({
+      rowPlaceholder: (row: Row) => (row.id === 3 ? 'failed' : null),
+    })
+    await tick()
+    expect(target.querySelector('.sv-grid-placeholder-retry')).toBeNull()
+    destroy()
+  })
+
+  it('styles footer and grand-total rows a row model flags on the data', async () => {
+    // A server-side model cannot reach the row objects the grid builds, so
+    // it puts the client model's flags on the data instead; same chrome.
+    const data = [
+      { id: 1, name: 'Row 1' },
+      { id: 2, name: 'Total', __groupFooter: true },
+      { id: 3, name: 'Grand total', __groupFooter: true, __grandTotal: true },
+    ] as Row[]
+    const { target, destroy } = await mountGrid({}, data)
+    await tick()
+    const rows = [...target.querySelectorAll('tbody .sv-grid-row')]
+    expect(rows.map((r) => r.classList.contains('sv-grid-group-footer-row'))).toEqual([false, true, true])
+    expect(rows.map((r) => r.classList.contains('sv-grid-grand-total-row'))).toEqual([false, false, true])
+    destroy()
+  })
+
+  it('keeps placeholder rows out of select-all', async () => {
+    const { api, destroy } = await mountGrid({
+      showRowSelection: true,
+      rowPlaceholder: (row: Row) => (row.id >= 3 ? 'loading' : null),
+    })
+    await tick()
+
+    api.selectAllRows()
+    await tick()
+    // Selecting a row that has not loaded would leave an id that never
+    // resolves to anything.
+    expect(api.getSelectedRowIds().sort()).toEqual(['0', '1', '2'])
+    destroy()
+  })
+
+  it('changes nothing for a grid that does not use it', async () => {
+    const { target, destroy } = await mountGrid({})
+    await tick()
+    expect(target.querySelector('.sv-grid-placeholder-row')).toBeNull()
+    expect(target.querySelectorAll('.sv-grid-row').length).toBeGreaterThan(0)
+    destroy()
+  })
+})
+
+describe('rowSelectionModel', () => {
+  /**
+   * "Everything except these", the shape a server-side selection needs.
+   *
+   * Its state is a rune, so the header checkbox re-derives when the model
+   * changes. That is a requirement of the seam, not an accident of the test:
+   * the grid re-reads `headerState()` only when something reactive that it
+   * touched has changed.
+   */
+  function exceptModel(totalRows: number) {
+    const state = $state({ selectAll: false, toggled: new Set<string>() })
+    return {
+      state,
+      isSelected: (rowId: string) => state.selectAll !== state.toggled.has(rowId),
+      headerState: () => {
+        if (state.selectAll) return state.toggled.size === 0 ? 'all' : 'some'
+        return state.toggled.size === 0 ? 'none' : 'some'
+      },
+      toggle: (rowId: string) => {
+        const next = new Set(state.toggled)
+        if (next.has(rowId)) next.delete(rowId)
+        else next.add(rowId)
+        state.toggled = next
+      },
+      toggleAll: (next: boolean) => {
+        state.selectAll = next
+        state.toggled = new Set()
+      },
+      selectedCount: () => (state.selectAll ? totalRows - state.toggled.size : state.toggled.size),
+    }
+  }
+
+  it('answers the header checkbox instead of counting loaded rows', async () => {
+    const model = exceptModel(1_000_000)
+    const { target, destroy } = await mountGrid({ showRowSelection: true, rowSelectionModel: model })
+    await tick()
+
+    const header = target.querySelector('thead [role="checkbox"], thead input[type="checkbox"]')!
+    expect(header.getAttribute('aria-checked')).toBe('false')
+
+    model.toggleAll(true)
+    await vi.waitFor(() =>
+      expect(
+        target.querySelector('thead [role="checkbox"], thead input[type="checkbox"]')!
+          .getAttribute('aria-checked'),
+      ).toBe('true'),
+    )
+    // Five rows are loaded; a million are selected. The grid says "all"
+    // because the model said so, which is the whole point of the seam.
+    expect(model.selectedCount()).toBe(1_000_000)
+    destroy()
+  })
+
+  it('routes the header checkbox click to toggleAll, not to the loaded rows', async () => {
+    const model = exceptModel(1_000_000)
+    const { target, destroy } = await mountGrid({ showRowSelection: true, rowSelectionModel: model })
+    await tick()
+
+    const header = target.querySelector<HTMLElement>('thead [role="checkbox"], thead input[type="checkbox"]')!
+    header.click()
+    await tick()
+
+    expect(model.state.selectAll).toBe(true)
+    expect(model.selectedCount()).toBe(1_000_000)
+    destroy()
+  })
+
+  it('routes a row checkbox through the model', async () => {
+    const model = exceptModel(1_000_000)
+    const { api, destroy } = await mountGrid({ showRowSelection: true, rowSelectionModel: model })
+    await tick()
+
+    api.toggleRowSelected('2')
+    await tick()
+    expect(model.state.toggled.has('2')).toBe(true)
+    expect(model.isSelected('2')).toBe(true)
+
+    model.toggleAll(true)
+    await tick()
+    api.toggleRowSelected('2')
+    // Under select-all, toggling a row means "except this one".
+    expect(model.isSelected('2')).toBe(false)
+    expect(model.selectedCount()).toBe(999_999)
+    destroy()
+  })
+})

package/src/svgrid.row-pinning.test.ts

@@ -40,7 +40,7 @@ const rows: Row[] = [
 const cols: ColumnDef<typeof features, Row>[] = [
   { field: 'id',      header: 'ID',      width: 100, editable: false },
   { field: 'account', header: 'Account', width: 200, editable: false },
-  { field: 'arr',     header: 'ARR',     width: 130, editable: false, align: 'right',
+  { field: 'arr',     header: 'ARR',     width: 130, editable: false, align: 'right', cellClass: 'money',
     format: { type: 'number', options: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } } },
   { field: 'seats',   header: 'Seats',   width:  90, editable: false, align: 'right' },
 ]
@@ -167,6 +167,20 @@ describe('SvGrid - pinnedTopRows render', () => {
     } finally { destroy() }
   })
 
+  it('aligns and classes the cells the way the column says (a total sat left under a right-aligned column)', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const tds = target.querySelectorAll('tr.sv-grid-pinned-row-top td')
+      expect(tds[0]!.getAttribute('data-align')).toBe('left')
+      expect(tds[2]!.getAttribute('data-align')).toBe('right')
+      expect(tds[3]!.getAttribute('data-align')).toBe('right')
+      // A static cellClass reaches the pinned cell; only a function did before.
+      expect(tds[2]!.classList.contains('money')).toBe(true)
+      expect(tds[0]!.classList.contains('money')).toBe(false)
+    } finally { destroy() }
+  })
+
   it('stacks multiple pinned-top rows with data-pinned-index', async () => {
     const { target, destroy } = await mountGrid({
       pinnedTopRows: [TOTALS, BENCHMARK],

package/src/svgrid.selection-bar-seam.test.ts

@@ -87,7 +87,7 @@ describe('selectionBar - without the Enterprise renderer', () => {
   it('says a license is needed, and links to it', async () => {
     // Naming the package is what unblocks a developer trying it; saying a key
     // is needed is what they have to know before shipping. Enterprise is
-    // SOFT-gated, so the wording must not imply the feature is inert without
+    // runs without a key, so the wording must not imply the feature is inert without
     // one - it says "watermark", which is what actually happens.
     const { api, target, destroy } = await mountGrid(true)
     await tick()

package/src/svgrid.sticky-groups.svelte.test.ts

@@ -0,0 +1,145 @@
+/**
+ * Sticky group rows: the group a row belongs to stays under the header
+ * while its rows scroll past. Under virtualization the band renders a copy
+ * of each ancestor; without it the real rows stick. Driven through the
+ * `serverGroup` seam with plain data, so no row model is needed to say
+ * which rows are groups and how deep they sit.
+ */
+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: 'group' | 'leaf'; level: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'id', header: 'Id', width: 80 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+/** A(0) > A1(1) > 20 leaves, A2(1) > 20 leaves, B(0) > B1(1) > 20 leaves: 65 rows. */
+function tree(): Row[] {
+  const out: Row[] = []
+  let n = 0
+  const leaves = (under: string) => {
+    for (let i = 0; i < 20; i += 1) out.push({ id: `${under}-${i}`, name: `leaf ${n++}`, kind: 'leaf', level: 2 })
+  }
+  out.push({ id: 'A', name: 'A', kind: 'group', level: 0 })
+  out.push({ id: 'A1', name: 'A1', kind: 'group', level: 1 })
+  leaves('A1')
+  out.push({ id: 'A2', name: 'A2', kind: 'group', level: 1 })
+  leaves('A2')
+  out.push({ id: 'B', name: 'B', kind: 'group', level: 0 })
+  out.push({ id: 'B1', name: 'B1', kind: 'group', level: 1 })
+  leaves('B1')
+  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: tree(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 200,
+        stickyGroupRows: true,
+        serverGroup: {
+          isGroup: (r: Row) => r.kind === 'group',
+          level: (r: Row) => r.level,
+          expanded: () => true,
+          onToggle: () => {},
+        },
+        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')) })
+  })
+}
+
+async function scrollTo(target: HTMLElement, top: number) {
+  const container = target.querySelector('.sv-grid-container') as HTMLElement
+  container.scrollTop = top
+  container.dispatchEvent(new Event('scroll'))
+  // The virtualizer syncs to the scroll position on the next animation frame.
+  await new Promise<void>((r) => requestAnimationFrame(() => r()))
+  await tick()
+  await tick()
+}
+
+const stickyNames = (target: HTMLElement) =>
+  [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')].map((tr) => tr.textContent!.replace(/\s+/g, ' ').trim().split(' ')[0])
+
+describe('stickyGroupRows under virtualization', () => {
+  it('renders copies of the ancestors of the first row under the header, deepest last', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true })
+    try {
+      await tick()
+      // Row 0 is A itself: nothing to hold.
+      expect(stickyNames(target)).toEqual([])
+      // Row 10 is a leaf under A1: A, then A1.
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual(['A', 'A1'])
+      const band = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(band[0]!.getAttribute('aria-hidden')).toBe('true')
+      expect(band[1]!.classList.contains('sv-grid-row-sticky-group-last')).toBe(true)
+      // The second sits a row under the first.
+      expect(parseInt(band[1]!.style.top, 10) - parseInt(band[0]!.style.top, 10)).toBe(30)
+      // A copy carries no cell ids, so the real row's id stays unique.
+      expect(band[0]!.querySelector('[id]')).toBeNull()
+      // Row 30 is a leaf under A2.
+      await scrollTo(target, 900)
+      expect(stickyNames(target)).toEqual(['A', 'A2'])
+      // Row 50 is a leaf under B1.
+      await scrollTo(target, 1500)
+      expect(stickyNames(target)).toEqual(['B', 'B1'])
+      // Back to the top: the band is gone.
+      await scrollTo(target, 0)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('is off unless asked for', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true, stickyGroupRows: false })
+    try {
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('stickyGroupRows without virtualization', () => {
+  it('makes the real ancestor rows sticky instead of copying them', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await scrollTo(target, 300)
+      const sticky = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(sticky.map((tr) => tr.textContent!.trim().split(/\s+/)[0])).toEqual(['A', 'A1'])
+      // They are the rows themselves: cells keep their row index.
+      expect(sticky[0]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('0')
+      expect(sticky[1]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('1')
+      expect(sticky[0]!.getAttribute('aria-hidden')).toBeNull()
+      // Every row renders exactly once.
+      const rows = [...target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row')]
+      expect(rows).toHaveLength(65)
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.upsell-license.test.ts

@@ -1,11 +1,11 @@
 /**
  * Every Enterprise gate carries the same licensing line.
  *
- * There are four of them - Kanban board, scheduler, pivot mode and the
- * selection bar - and they used to be four hand-written paragraphs. Four gates
- * worded four ways is how a product ends up explaining its own licensing
+ * There are five of them - Kanban board, scheduler, Gantt, pivot mode and the
+ * selection bar - and they used to be four hand-written paragraphs. Gates
+ * worded one way each is how a product ends up explaining its own licensing
  * inconsistently, so they now share one snippet. This is the test that keeps
- * them sharing it: a fifth Enterprise feature that hand-rolls its own note
+ * them sharing it: a sixth Enterprise feature that hand-rolls its own note
  * will show up here as a missing licensing line.
  *
  * None of the renderers are registered in this file, which is the point - it
@@ -17,6 +17,7 @@ import SvGrid from './SvGrid.svelte'
 import {
   createCoreRowModel,
   hasBoardView,
+  hasGanttView,
   hasSchedulerView,
   hasSelectionBarView,
   tableFeatures,
@@ -69,12 +70,14 @@ describe('Enterprise upsell notes', () => {
     // Otherwise every assertion below is checking the wrong branch.
     expect(hasBoardView()).toBe(false)
     expect(hasSchedulerView()).toBe(false)
+    expect(hasGanttView()).toBe(false)
     expect(hasSelectionBarView()).toBe(false)
   })
 
   const gates: Array<[string, Record<string, unknown>, ((api: SvGridApi<typeof features, Row>) => void)?]> = [
     ['Kanban board', { board: { groupBy: 'team' } }],
     ['scheduler', { scheduler: { startField: 'name' } }],
+    ['Gantt', { gantt: { startField: 'name' } }],
     ['selection bar', { showRowSelection: true, selectionBar: true }, (api) => api.selectRows(['1'])],
     // pivotViewOn = a pivot config AND pivot mode on; without the Pro engine
     // `pivotResult` stays null and the upsell renders in its place.
@@ -92,7 +95,7 @@ describe('Enterprise upsell notes', () => {
         })
 
         const note = target.querySelector(LICENSE)!
-        // Soft-gated: the feature runs without a key and the grid watermarks.
+        // The feature runs without a key and the grid watermarks.
         // The wording must not imply it is inert, because it is not.
         expect(note.textContent, name).toContain('license key')
         expect(note.textContent, name).toContain('watermark')

package/src/test-setup.ts

@@ -59,4 +59,16 @@ if (typeof Element !== 'undefined' && !Element.prototype.animate) {
   }
 }
 
+// jsdom has no canvas: getContext() returns null and prints "Not implemented:
+// HTMLCanvasElement's getContext() method" through its virtual console on
+// every call, hundreds of lines per run that bury the real warnings. The
+// callers (the sheet's text measuring, the picture rasteriser) already treat a
+// null context as "no canvas", so answering null quietly changes nothing a
+// test can see; a test that needs a context still spies on the prototype.
+if (typeof HTMLCanvasElement !== 'undefined') {
+  ;(HTMLCanvasElement.prototype as any).getContext = function () {
+    return null
+  }
+}
+
 export {}

package/src/transaction.test.ts

@@ -97,4 +97,62 @@ describe('api.applyTransaction', () => {
       destroy()
     }
   })
+  it('removes a row that the same transaction also updates, by id or by reference', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const byId = api.applyTransaction({ update: [{ id: 'a', symbol: 'AAPL', price: 1 }], remove: ['a'] })
+      await tick()
+      expect(byId).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['b', 'c'])
+      const ref = api.getData()[0]! // 'b'
+      const byRef = api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 2 }], remove: [ref] })
+      await tick()
+      expect(byRef).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['c'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('an update batch looks its rows up by id instead of walking the array', async () => {
+    // The id -> index map is built once per data array and carried across
+    // update-only transactions, so the second tick calls getRowId only for
+    // the rows in the batch. Before, every transaction called it for every
+    // row - 100k calls per tick on a 100k-row feed.
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let calls = 0
+    let captured: SvGridApi<typeof features, Order> | null = null
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: seed,
+        columns,
+        features,
+        getRowId: (o: Order) => { calls++; return o.id },
+        _rowModels: { coreRowModel: createCoreRowModel(), filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(sortFns) },
+        containerHeight: 400,
+        virtualization: false,
+        onApiReady(api: SvGridApi<typeof features, Order>) { captured = api },
+      } as any,
+    })
+    try {
+      await tick()
+      const api = captured!
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 201 }] })
+      await tick()
+      const afterFirst = calls
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 202 }] })
+      await tick()
+      // One call: the id of the update itself. The row model's own getRowId
+      // calls for the replaced row are not part of this count because the
+      // map answered the lookup.
+      expect(calls - afterFirst).toBeLessThanOrEqual(2)
+      expect(api.getData()[1]!.price).toBe(202)
+    } finally {
+      unmount(app)
+      target.remove()
+    }
+  })
 })
+

package/src/validate.test.ts

@@ -5,6 +5,7 @@
  */
 import { describe, expect, it } from 'vitest'
 import { validateGridConfig } from './validate'
+import { createRowPlaceholder } from './server-block-cache'
 
 type Row = { name: string; amount: number }
 const data: Row[] = [
@@ -48,6 +49,15 @@ describe('unknown field', () => {
     expect(run({ columns: [{ id: 'actions', header: '' }] })).toEqual([])
   })
 
+  it('looks past placeholder rows, which a row model shows before its data lands', () => {
+    const loading = [createRowPlaceholder('loading', { index: 0 }), createRowPlaceholder('loading', { index: 1 })]
+    // Only placeholders: nothing to judge the columns by, so no warning.
+    expect(run({ data: loading })).toEqual([])
+    // Placeholders ahead of real rows: the real rows are the sample.
+    expect(run({ data: [...loading, ...data] })).toEqual([])
+    expect(run({ data: [...loading, ...data], columns: [{ field: 'naem' }] })).toHaveLength(1)
+  })
+
   it('looks through group columns', () => {
     const msgs = run({ columns: [{ header: 'Group', columns: [{ field: 'nope' }] }] })
     expect(msgs[0]).toContain('"nope" does not exist')
@@ -151,6 +161,25 @@ describe('treeData fields', () => {
   })
 })
 
+describe('gantt versus treeData', () => {
+  it('flags both trees being configured at once', () => {
+    const msg = run({ gantt: { startField: 'name' }, treeData: { parentField: 'name' } }).find(
+      (m) => m.includes('`gantt` and `treeData`'),
+    )!
+    expect(msg).toBeDefined()
+    expect(msg).toContain('gantt.parentField')
+    expect(msg).toContain('summary bars will under-report')
+  })
+
+  it('is silent for a Gantt on its own', () => {
+    expect(run({ gantt: { startField: 'name' } })).toEqual([])
+  })
+
+  it('is silent for treeData on its own', () => {
+    expect(run({ treeData: { parentField: 'name' } })).toEqual([])
+  })
+})
+
 describe('pinning versus column virtualization', () => {
   it('flags pinning while column virtualization is on by default', () => {
     const msg = run({ initialColumnPinning: { left: ['name'] } })[0]!