@svgrid/grid 3.0.8 → 3.0.9

package/src/selection.test.ts

@@ -100,6 +100,20 @@ describe('createSelection - row selection', () => {
     expect(sel.isRowSelected('missing')).toBe(false)
   })
 
+  it('with a selection model, a drawn row is answered from its own data, not a scan of every row', () => {
+    const find = vi.fn(() => makeDataRow('r1', { id: 'r1' }))
+    const model = { isSelected: vi.fn((id: string, data: any) => data?.id === id), toggle: vi.fn() }
+    const ctx = makeCtx({ allRows: { find }, props: { rowSelectionModel: model } })
+    const sel = createSelection(ctx)
+    expect(sel.isRowSelected('r1', { id: 'r1' })).toBe(true)
+    sel.toggleRowSelectionById('r1', { id: 'r1' })
+    expect(model.toggle).toHaveBeenCalledWith('r1', { id: 'r1' }, false)
+    expect(find).not.toHaveBeenCalled()
+    // Without the data (an API caller) it still finds the row by id.
+    expect(sel.isRowSelected('r1')).toBe(true)
+    expect(find).toHaveBeenCalledTimes(1)
+  })
+
   it('toggleRowSelectionById flips the single row', () => {
     const ctx = makeCtx({ rowSelectionState: { r1: false } })
     const sel = createSelection(ctx)

package/src/selection.ts

@@ -20,21 +20,33 @@ export function createSelection<
   TFeatures extends TableFeatures = TableFeatures,
   TData extends RowData = RowData,
 >(ctx: any) {
-  function isRowSelected(rowId: string) {
+  /**
+   * A selection model needs the row's data. The body passes the row it is
+   * drawing as `original`; without it the row is looked up by id, a scan of
+   * every row - on a server model's windowed million rows, once per drawn
+   * row, that scan held the page for seconds after a sort.
+   */
+  function rowOriginal(rowId: string): { found: boolean; original?: unknown } {
+    const row = ctx.allRows.find((r: any) => r.id === rowId);
+    return row ? { found: true, original: row.original } : { found: false };
+  }
+
+  function isRowSelected(rowId: string, original?: unknown) {
     const model = ctx.props.rowSelectionModel;
     if (model) {
-      const row = ctx.allRows.find((r: any) => r.id === rowId);
-      return row ? model.isSelected(rowId, row.original) : false;
+      if (original !== undefined) return model.isSelected(rowId, original);
+      const hit = rowOriginal(rowId);
+      return hit.found ? model.isSelected(rowId, hit.original) : false;
     }
     return Boolean(ctx.rowSelectionState[rowId]);
   }
 
-  function toggleRowSelectionById(rowId: string) {
+  function toggleRowSelectionById(rowId: string, original?: unknown) {
     const model = ctx.props.rowSelectionModel;
     if (model) {
-      const row = ctx.allRows.find((r: any) => r.id === rowId);
-      if (!row) return;
-      model.toggle(rowId, row.original, !model.isSelected(rowId, row.original));
+      const hit = original !== undefined ? { found: true, original } : rowOriginal(rowId);
+      if (!hit.found) return;
+      model.toggle(rowId, hit.original, !model.isSelected(rowId, hit.original));
       return;
     }
     ctx.grid.setRowSelection((prev: any) => ({ ...prev, [rowId]: !prev[rowId] }));
@@ -472,8 +484,19 @@ export function createSelection<
 
   /** Look up a column by id without depending on `buildApi`'s private
    *  closure (those helpers don't exist at this scope). */
+  // id -> column, rebuilt when the column list changes. Called per header
+  // cell as columns scroll into view, so a linear `find` made every scroll
+  // frame cost more the more columns the grid has.
+  let columnsById: Map<string, any> = new Map();
+  let columnsByIdFor: unknown = null;
   function findColumnById(columnId: string) {
-    return ctx.allColumns.find((c: any) => c.id === columnId);
+    const all = ctx.allColumns;
+    if (all !== columnsByIdFor) {
+      columnsById = new Map();
+      for (const c of all as any[]) columnsById.set(c.id, c);
+      columnsByIdFor = all;
+    }
+    return columnsById.get(columnId);
   }
 
   function onCellPointerDown(

package/src/server-block-cache.ts

@@ -30,6 +30,7 @@
  * Enterprise's server row model runs one of these per group level; the free
  * flat controller runs exactly one.
  */
+import { createWindowedData } from './windowed-data'
 
 /**
  * The mark that says "this row is not data yet".
@@ -171,6 +172,13 @@ export type BlockCache<TData> = {
   setViewport(startIndex: number, endIndex: number): void
   /** The dense row array to hand the grid. Placeholders fill unloaded slots. */
   rows(): ReadonlyArray<TData>
+  /**
+   * The same rows as windowed data (see windowed-data.ts): `length` is the
+   * row count and each entry is read through `getRow` when the grid asks for
+   * it, so handing it over costs O(1) whatever the count. A new array per
+   * change, like `rows()`.
+   */
+  windowedRows(): ReadonlyArray<TData>
   /** One row, without building the array. Returns a placeholder when unloaded. */
   getRow(index: number): TData | typeof LOADING_ROW | typeof FAILED_ROW
   rowCount(): number | null
@@ -267,6 +275,7 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
 
   let emitScheduled = false
   let rowsCache: TData[] | null = null
+  let windowedCache: TData[] | null = null
 
   const blockOf = (rowIndex: number): number => Math.floor(rowIndex / blockSize)
   const startOf = (blockIndex: number): number => blockIndex * blockSize
@@ -321,7 +330,7 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
    * mutations notifies once. Every mutating path ends here.
    */
   function emit(): void {
-    rowsCache = null // rebuilt lazily, on the next read
+    rowsCache = windowedCache = null // rebuilt lazily, on the next read
     if (disposed || emitScheduled) return
     emitScheduled = true
     schedule(() => {
@@ -439,6 +448,14 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
     }
   }
 
+  function rowAt(index: number): TData | typeof LOADING_ROW | typeof FAILED_ROW {
+    const block = blocks.get(blockOf(index))
+    if (!block) return LOADING_ROW
+    if (block.status === 'failed') return FAILED_ROW
+    const row = block.rows[index - startOf(blockOf(index))]
+    return row ?? LOADING_ROW
+  }
+
   function abortAll(): void {
     for (const block of blocks.values()) block.controller?.abort()
     inFlight = 0
@@ -485,14 +502,14 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
       return out
     },
 
-    getRow(index) {
-      const block = blocks.get(blockOf(index))
-      if (!block) return LOADING_ROW
-      if (block.status === 'failed') return FAILED_ROW
-      const row = block.rows[index - startOf(blockOf(index))]
-      return row ?? LOADING_ROW
+    windowedRows() {
+      if (windowedCache) return windowedCache
+      windowedCache = createWindowedData<TData>(currentLength(), (i) => rowAt(i) as TData)
+      return windowedCache
     },
 
+    getRow: rowAt,
+
     rowCount: () => (countKnown ? count : null),
     lastRowKnown: () => countKnown,
 
@@ -531,7 +548,7 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
       blocks.clear()
       count = null
       countKnown = false
-      rowsCache = null
+      rowsCache = windowedCache = null
       fetchViewport()
       emit()
     },
@@ -675,7 +692,7 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
         controller: null,
       })
     }
-    rowsCache = null
+    rowsCache = windowedCache = null
   }
 
   /** Forget every block from `fromBlock` on, aborting any in flight. */
@@ -685,6 +702,6 @@ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): Bloc
       block.controller?.abort()
       blocks.delete(index)
     }
-    rowsCache = null
+    rowsCache = windowedCache = null
   }
 }

package/src/server-data-source.ts

@@ -581,7 +581,9 @@ export function createServerDataSource<TData>(
    */
   function emitFromCache(): void {
     if (!cache || disposed) return
-    const rows = cache.rows()
+    // Windowed: the grid reads only the rows it shows, so a block landing
+    // costs the same at 100M rows as at 10K.
+    const rows = cache.windowedRows()
     state.rows = rows
     state.rowCount = cache.rowCount()
     state.lastRowKnown = cache.lastRowKnown()

package/src/server.ts

@@ -41,6 +41,12 @@ export {
   type BlockFetchResult,
   type BlockState,
 } from './server-block-cache'
+export {
+  createWindowedData,
+  windowedSourceOf,
+  isWindowedData,
+  type WindowedSource,
+} from './windowed-data'
 export {
   toServerFilterColumns,
   type GridRowModel,

package/src/spreadsheet.ts

@@ -156,6 +156,12 @@ const OVERLAY_CLASS = 'sv-cell-border-overlay'
  *  every relevant DOM mutation inside the grid, and whenever the action
  *  options update. */
 function apply(root: HTMLElement, opts: SpreadsheetActionOptions): void {
+  // Merges here are colspan / rowspan on the rendered cells, which only the
+  // table algorithm honours: keep this grid's rows in table layout (the
+  // flex-row rules in SvGrid.css skip a table marked this way).
+  for (const table of root.querySelectorAll<HTMLTableElement>('table.sv-grid-table')) {
+    if (table.getAttribute('data-row-layout') !== 'table') table.setAttribute('data-row-layout', 'table')
+  }
   // ---- 1. Clean up anything the LAST run added -----------------------
   for (const td of root.querySelectorAll<HTMLTableCellElement>(`td[${MARK}]`)) {
     td.removeAttribute('colspan')

package/src/svgrid.behavior.test.ts

@@ -580,6 +580,35 @@ describe('SvGrid - external sort / filter', () => {
     }
   })
 
+  it('mounting is not a change: no sort, filter or selection callback fires on mount', async () => {
+    // These used to fire once on mount with the starting state. A consumer
+    // that keeps the sort in the URL and resets the page on a new sort then
+    // navigated from ?page=2 back to page 1 on every load.
+    const calls: string[] = []
+    const { api, destroy } = await mountGrid({
+      externalSort: true,
+      externalFilter: true,
+      initialSorting: [{ id: 'age', desc: true }],
+      onSortingChange: () => calls.push('sort'),
+      onFiltersChange: () => calls.push('filters'),
+      onRowSelectionChange: () => calls.push('rows'),
+      onCellSelectionChange: () => calls.push('cells'),
+    })
+    try {
+      await tick()
+      await tick()
+      expect(calls).toEqual([])
+      // ...and a real change still reports, once each.
+      api.setSort('age', 'asc')
+      api.setFilter('team', { operator: 'contains', value: 'Research' })
+      await tick()
+      expect(calls.filter((c) => c === 'sort')).toHaveLength(1)
+      expect(calls.filter((c) => c === 'filters')).toHaveLength(1)
+    } finally {
+      destroy()
+    }
+  })
+
   it('externalFilter + onFiltersChange fires when a filter is set', async () => {
     let calls = 0
     const { api, destroy } = await mountGrid({

package/src/svgrid.column-cell-recycling.test.ts

@@ -0,0 +1,120 @@
+/**
+ * DOM: body cells are recycled across the column window.
+ *
+ * With column virtualization on, the body cells' {#each} is keyed by a slot,
+ * not by the column id. A column keeps its <td> while it stays in the window;
+ * a column entering the window takes the <td> of one that left. A thumb drag
+ * that jumps far along a wide grid therefore updates the cells in place
+ * instead of destroying the window's cells and creating new ones.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushSync, mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { renderComponent } from './render-component'
+import CountingCell from './counting-cell.test.svelte'
+
+const COLS = 400
+const ROWS = 10
+
+type Row = Record<string, number>
+
+function makeData(): Row[] {
+  return Array.from({ length: ROWS }, (_, r) => {
+    const row: Row = { id: r }
+    for (let c = 0; c < COLS; c += 1) row[`c${c}`] = r * 1000 + c
+    return row
+  })
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => {
+  cleanup?.()
+  cleanup = null
+})
+
+async function mountGrid(columns: unknown[]) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: makeData(),
+      columns,
+      getRowId: (r: Row) => String(r.id),
+      containerHeight: 400,
+      containerWidth: 1000,
+    } as never,
+  })
+  flushSync()
+  await new Promise((r) => setTimeout(r, 30))
+  flushSync()
+  cleanup = () => {
+    unmount(app)
+    target.remove()
+  }
+  return target
+}
+
+async function scrollTo(root: HTMLElement, left: number) {
+  const container = root.querySelector<HTMLElement>('.sv-grid-container')!
+  container.scrollLeft = left
+  container.dispatchEvent(new Event('scroll'))
+  await new Promise((r) => setTimeout(r, 40))
+  flushSync()
+}
+
+const firstRowCells = (root: HTMLElement) =>
+  [...root.querySelector('tbody tr')!.querySelectorAll<HTMLElement>(':scope > td[data-col-id]')]
+
+const plainColumns = () => Array.from({ length: COLS }, (_, c) => ({ field: `c${c}`, header: `C${c}`, width: 100 }))
+
+describe('body cells recycled across the column window', { timeout: 30_000 }, () => {
+  it('reuses the <td>s on a far jump and every cell shows its own column', async () => {
+    const root = await mountGrid(plainColumns())
+    const before = firstRowCells(root)
+    expect(before[0]!.dataset.colId).toBe('c0')
+
+    await scrollTo(root, 200 * 100)
+    const after = firstRowCells(root)
+    const ids = after.map((td) => td.dataset.colId!)
+    // The window moved: none of the first columns are rendered any more.
+    expect(ids).not.toContain('c0')
+    expect(ids.some((id) => Number(id.slice(1)) >= 195)).toBe(true)
+    // ...and the cells are the same elements, now showing other columns.
+    const reused = after.filter((td) => before.includes(td)).length
+    expect(reused).toBeGreaterThanOrEqual(Math.min(before.length, after.length) - 2)
+    // Every cell's text is its own column's value (row 0: value = column index).
+    for (const td of after) expect(td.textContent!.trim()).toBe(td.dataset.colId!.slice(1))
+    // Ids stay unique.
+    expect(new Set(after.map((td) => td.id)).size).toBe(after.length)
+  })
+
+  it('keeps a column on the same <td> while it stays in the window', async () => {
+    const root = await mountGrid(plainColumns())
+    const byColumn = () => new Map(firstRowCells(root).map((td) => [td.dataset.colId!, td]))
+    const before = byColumn()
+    await scrollTo(root, 200)
+    const after = byColumn()
+    const kept = [...before.keys()].filter((id) => after.has(id))
+    expect(kept.length).toBeGreaterThan(0)
+    for (const id of kept) expect(after.get(id)).toBe(before.get(id))
+  })
+
+  it('re-creates an app cell component per column instead of re-propping it', async () => {
+    const columns = Array.from({ length: COLS }, (_, c) => ({
+      field: `c${c}`,
+      header: `C${c}`,
+      width: 100,
+      cell: (ctx: { getValue: () => unknown; column: { id: string } }) =>
+        renderComponent(CountingCell, { columnId: ctx.column.id, value: ctx.getValue() }),
+    }))
+    const root = await mountGrid(columns)
+    await scrollTo(root, 200 * 100)
+    // Each mounted instance records the column it was created for; a cell
+    // showing a column must be an instance created for that column.
+    for (const td of firstRowCells(root)) {
+      const el = td.querySelector<HTMLElement>('[data-counting-cell]')!
+      expect(el.dataset.createdFor).toBe(td.dataset.colId)
+    }
+  })
+})

package/src/svgrid.interaction.test.ts

@@ -320,7 +320,10 @@ describe('SvGrid interactions - cell pointer events', () => {
       if (!a || !c) return -1 // jsdom didn't lay the cells out; caller skips
       a.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1, button: 0, pointerType }))
       await tick()
-      c.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true, pointerId: 1, pointerType }))
+      // What a browser fires as the pointer moves into the cell: `pointerover`
+      // (bubbles, from the cell the pointer left), then `pointerenter`.
+      c.dispatchEvent(new PointerEvent('pointerover', { bubbles: true, pointerId: 1, pointerType, relatedTarget: a }))
+      c.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false, pointerId: 1, pointerType, relatedTarget: a }))
       await tick()
       return target.querySelectorAll('[data-selected-range="true"]').length
     } finally {

package/src/svgrid.new-features.wrapper.test.ts

@@ -77,8 +77,9 @@ describe('SvGrid wrapper - cellClass + rowClass', () => {
     expect(source).toMatch(/function computeCellClass/)
     // The td that draws a merge shows the origin cell, so the class comes
     // from the cell that draws (cellRow / cellColumn): the row's own outside a merge.
-    expect(source).toMatch(/userCellClass = computeCellClass\(\s*cellRow,\s*cellColumn,?\s*\)/)
-    expect(source).toMatch(/class=\{`sv-grid-cell \$\{userCellClass\}`\}/)
+    // Computed once per cell in `bodyCellInfo`, which the td reads as `c`.
+    expect(source).toMatch(/userCellClass: computeCellClass\(\s*cellRow,\s*cellColumn,?\s*\)/)
+    expect(source).toMatch(/class=\{`sv-grid-cell \$\{c\.userCellClass\}`\}/)
   })
 })
 
@@ -99,12 +100,12 @@ describe('SvGrid wrapper - declarative cell validation (validate hook)', () => {
     // The virtualized window, the plain body and the frozen rows all render
     // `bodyRow`, so the class appears exactly once: the two copies the
     // render paths used to carry had drifted apart.
-    const hits = source.match(/class:sv-grid-cell-invalid=\{cellValidity\.invalid\}/g) ?? []
+    const hits = source.match(/class:sv-grid-cell-invalid=\{c\.cellValidity\.invalid\}/g) ?? []
     expect(hits.length).toBe(1)
     expect(source).toMatch(/\{#snippet bodyRow\(/)
     expect((source.match(/\{@render bodyRow\(/g) ?? []).length).toBe(3)
     // Message wins over the plain column tooltip when the cell is invalid.
-    expect(source).toMatch(/cellValidity\.invalid && cellValidity\.message/)
+    expect(source).toMatch(/c\.cellValidity\.invalid && c\.cellValidity\.message/)
   })
 
   it('forwards computeCellValidity through the controller so the wrapper can read it', () => {

package/src/svgrid.pinned-column-virtualization.test.ts

@@ -0,0 +1,162 @@
+/**
+ * DOM: pinned columns with column virtualization on (the default).
+ *
+ * Pinned cells are position: sticky, so they must stay in the DOM. The grid
+ * used to keep them there by rendering one contiguous run from column 0 (a
+ * left pin) to the last column (a right pin), so pinning either edge of a
+ * 1,000-column grid rendered every column. It now renders three runs - the
+ * pinned-left columns, the virtual window, the pinned-right columns - with a
+ * spacer cell for the columns between two runs.
+ *
+ * The table uses `table-layout: fixed`, so every row must give each column the
+ * same slot. The checks compare each row's total declared width (cells plus
+ * spacers) against the leaf header row.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushSync, mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+
+const COLS = 120
+const ROWS = 20
+
+type Row = Record<string, number>
+
+function leafColumns() {
+  return Array.from({ length: COLS }, (_, c) => ({ field: `c${c}`, header: `C${c}`, width: 100 }))
+}
+
+function makeData(): Row[] {
+  return Array.from({ length: ROWS }, (_, r) => {
+    const row: Row = { id: r }
+    for (let c = 0; c < COLS; c += 1) row[`c${c}`] = r * COLS + c
+    return row
+  })
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => {
+  cleanup?.()
+  cleanup = null
+})
+
+async function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: makeData(),
+      columns: leafColumns(),
+      getRowId: (r: Row) => String(r.id),
+      containerHeight: 400,
+      containerWidth: 1000,
+      ...props,
+    } as never,
+  })
+  flushSync()
+  // The column virtualizer learns its count and viewport in effects.
+  await new Promise((r) => setTimeout(r, 30))
+  flushSync()
+  cleanup = () => {
+    unmount(app)
+    target.remove()
+  }
+  return target
+}
+
+const px = (el: Element) => Number.parseFloat((el as HTMLElement).style.width) || 0
+const rowWidth = (tr: Element) => [...tr.children].reduce((sum, cell) => sum + px(cell), 0)
+const dataCells = (tr: Element) => [...tr.querySelectorAll<HTMLElement>('td[data-col-id]')]
+const firstBodyRow = (root: HTMLElement) => root.querySelector('tbody tr')!
+const leafHeaderRow = (root: HTMLElement) => [...root.querySelectorAll('thead tr')].pop()!
+
+describe('pinned columns with column virtualization', { timeout: 30_000 }, () => {
+  it('renders only the window when nothing is pinned (baseline)', async () => {
+    const root = await mountGrid({})
+    const ids = dataCells(firstBodyRow(root)).map((td) => td.dataset.colId)
+    expect(ids.length).toBeLessThan(40)
+    expect(ids).not.toContain(`c${COLS - 1}`)
+  })
+
+  it('renders the window plus the pinned columns, not every column', async () => {
+    const root = await mountGrid({ initialColumnPinning: { left: ['c0'], right: [`c${COLS - 1}`] } })
+    const ids = dataCells(firstBodyRow(root)).map((td) => td.dataset.colId)
+    // Before: pinning both ends rendered all 120 columns in every row.
+    expect(ids.length).toBeLessThan(40)
+    expect(ids[0]).toBe('c0')
+    expect(ids[ids.length - 1]).toBe(`c${COLS - 1}`)
+    // The columns between the window and the right pin are a spacer, not cells.
+    const spacers = firstBodyRow(root).querySelectorAll('td.sv-grid-cell-spacer')
+    expect(spacers.length).toBeGreaterThan(0)
+  })
+
+  it('gives every row the same slots as the leaf header row', async () => {
+    const root = await mountGrid({ initialColumnPinning: { left: ['c0'], right: [`c${COLS - 1}`] } })
+    const header = leafHeaderRow(root)
+    const body = firstBodyRow(root)
+    expect(slots(body)).toBe(slots(header))
+    // Fixed layout: cells plus spacers cover every column (plus the system
+    // columns, such as the row checkbox, that sit before them).
+    expect(rowWidth(header)).toBeGreaterThanOrEqual(COLS * 100)
+    expect(rowWidth(body)).toBeCloseTo(rowWidth(header), 0)
+  })
+
+  it('splits a column group that crosses a seam into one cell per run', async () => {
+    const columns = [
+      { id: 'all', header: 'Everything', columns: leafColumns() },
+    ]
+    const root = await mountGrid({ columns, initialColumnPinning: { left: ['c0'], right: [`c${COLS - 1}`] } })
+    const groupCells = [...root.querySelectorAll<HTMLElement>('th.sv-grid-group-header-cell')]
+    // One piece over the left pin + window, one over the right pin; distinct
+    // keys, or Svelte would have thrown on a duplicate key in the each block.
+    expect(groupCells.length).toBe(2)
+    expect(groupCells.every((th) => th.textContent?.includes('Everything'))).toBe(true)
+    const groupRow = groupCells[0]!.closest('tr')!
+    const header = leafHeaderRow(root)
+    expect(slots(groupRow)).toBe(slots(header))
+    expect(rowWidth(groupRow)).toBeCloseTo(rowWidth(header), 0)
+  })
+
+  it('clamps a merged cell to the run it starts in', async () => {
+    const root = await mountGrid({
+      initialColumnPinning: { left: ['c0'], right: [`c${COLS - 1}`] },
+      mergedCells: [{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: COLS }],
+    })
+    const header = leafHeaderRow(root)
+    const body = firstBodyRow(root)
+    // The merge covers every column, but no td may span across a spacer: the
+    // row keeps the header's slots, so each piece stays inside its run.
+    expect(slots(body)).toBe(slots(header))
+    expect(rowWidth(body)).toBeCloseTo(rowWidth(header), 0)
+  })
+})
+
+describe('the first render of a wide grid', { timeout: 30_000 }, () => {
+  it('draws a window of columns, not every column, before anything is measured', async () => {
+    const wide = 2000
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const columns = Array.from({ length: wide }, (_, c) => ({ field: `c${c}`, header: `C${c}`, width: 100 }))
+    const data = [Object.fromEntries([['id', 0], ...columns.map((c, i) => [c.field, i])])]
+    const app = mount(SvGrid, {
+      target,
+      props: { data, columns, getRowId: (r: Row) => String(r.id), containerHeight: 300 } as never,
+    })
+    flushSync()
+    cleanup = () => {
+      unmount(app)
+      target.remove()
+    }
+    // jsdom never lays out, so this is the pre-measure window: the columns
+    // that fit an estimated viewport, plus the overscan.
+    const cells = dataCells(firstBodyRow(target))
+    expect(cells.length).toBeGreaterThan(0)
+    expect(cells.length).toBeLessThan(40)
+    expect(target.querySelectorAll('td').length).toBeLessThan(200)
+  })
+})
+
+/** Table slots a row occupies: each cell counts its colspan. */
+function slots(tr: Element): number {
+  return [...tr.children].reduce((n, cell) => n + ((cell as HTMLTableCellElement).colSpan || 1), 0)
+}

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

@@ -138,14 +138,26 @@ describe('the rowModel prop', () => {
     await tick()
 
     // The model was told; the grid did NOT reorder locally, because a model
-    // with `setSort` implies `externalSort`. (The grid also reports the
-    // empty initial sort on mount, as it does for any onSortingChange.)
-    expect(source.sorts.at(-1)).toEqual([{ id: 'name', desc: false }])
+    // with `setSort` implies `externalSort`. Mounting with no sort tells the
+    // model nothing - it used to get an empty sort, which made a server
+    // source refetch page 0 for no reason.
+    expect(source.sorts).toEqual([[{ id: 'name', desc: false }]])
     const firstRow = target.querySelector('tbody .sv-grid-row')!
     expect(firstRow.textContent).toContain('Zoe')
     destroy()
   })
 
+  it('hands initialSorting to the model once, since the model has no initial sort of its own', async () => {
+    const source = handWritten([
+      { id: 1, name: 'Zoe' },
+      { id: 2, name: 'Ada' },
+    ])
+    const { destroy } = await mountGrid({ rowModel: source.model, sortable: true, initialSorting: [{ id: 'name', desc: true }] })
+    await tick()
+    expect(source.sorts).toEqual([[{ id: 'name', desc: true }]])
+    destroy()
+  })
+
   it('lets an explicit prop win over the model', async () => {
     const source = handWritten([{ id: 1, name: 'Ada' }])
     const { target, destroy } = await mountGrid({

package/src/validate.test.ts

@@ -197,10 +197,10 @@ describe('gantt versus treeData', () => {
 })
 
 describe('pinning versus column virtualization', () => {
-  it('flags pinning while column virtualization is on by default', () => {
-    const msg = run({ initialColumnPinning: { left: ['name'] } })[0]!
-    expect(msg).toContain('will not stick')
-    expect(msg).toContain('columnVirtualization={false}')
+  // Pinned columns render as their own runs beside the virtual window, so
+  // pinning with column virtualization on (the default) is supported.
+  it('is silent for pinning with column virtualization on by default', () => {
+    expect(run({ initialColumnPinning: { left: ['name'], right: ['name'] } })).toEqual([])
   })
 
   it('is silent once column virtualization is off', () => {

package/src/validate.ts

@@ -228,20 +228,9 @@ export function validateGridConfig<
     )
   }
 
-  // ---- 7. Pinning that column virtualization will hide ----------------------
-  // Documented incompatibility: the virtualizer recycles column DOM nodes, so
-  // sticky pinning cannot survive it. `columnVirtualization` defaults to ON,
-  // which means the natural way to write this silently does nothing.
-  const pinned =
-    (input.initialColumnPinning?.left?.length ?? 0) +
-    (input.initialColumnPinning?.right?.length ?? 0)
-  if (pinned > 0 && input.columnVirtualization !== false) {
-    messages.push(
-      '[svgrid] `initialColumnPinning` is set while column virtualization is on ' +
-        '(its default), so the pinned columns will not stick - the virtualizer ' +
-        'recycles column nodes. Add `columnVirtualization={false}`.',
-    )
-  }
+  // (7. was "pinning versus column virtualization". Pinned columns now render
+  // as their own runs beside the virtual window, so the pair is supported and
+  // there is nothing to warn about.)
 
   // ---- 8. Server-mode contracts left half-wired -----------------------------
   // Each of these makes the grid hand control to the consumer. Miss the other