@svgrid/grid 3.0.0 → 3.0.1

package/src/svgrid.behavior.test.ts

@@ -1,913 +1,913 @@
-/**
- * Broad behavioral test suite for the <SvGrid /> render component.
- *
- * The intent is wide coverage on a single file - SvGrid.svelte is ~3000
- * lines and most of its branches are reachable only when the component is
- * mounted with a particular prop combination. Each test below exercises a
- * different feature set so the whole file's effect graph is traversed.
- *
- * Pattern (re-used across files):
- *   1. mount SvGrid in jsdom with the props that trigger the feature
- *   2. wait one microtask for $effects to flush
- *   3. assert on the api object delivered via onApiReady, or on visible DOM
- *   4. unmount
- */
-
-import { describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  columnFilteringFeature,
-  columnGroupingFeature,
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  rowExpandingFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-
-type Person = {
-  id: number
-  name: string
-  team: string
-  age: number
-  active: boolean
-  joined: string
-  salary: number
-}
-
-const fullFeatures = tableFeatures({
-  columnFilteringFeature,
-  columnGroupingFeature,
-  rowExpandingFeature,
-  rowPaginationFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-})
-
-const people: Person[] = [
-  { id: 1, name: 'Ada Lovelace', team: 'Research', age: 38, active: true, joined: '2020-01-10', salary: 142_000 },
-  { id: 2, name: 'Grace Hopper', team: 'Compilers', age: 42, active: true, joined: '2018-05-22', salary: 158_000 },
-  { id: 3, name: 'Alan Turing', team: 'Research', age: 41, active: false, joined: '2021-09-01', salary: 138_000 },
-  { id: 4, name: 'Margaret Hamilton', team: 'Apollo', age: 35, active: true, joined: '2019-03-15', salary: 165_000 },
-  { id: 5, name: 'Linus Torvalds', team: 'Kernel', age: 54, active: true, joined: '2017-11-30', salary: 175_000 },
-  { id: 6, name: 'Donald Knuth', team: 'Research', age: 86, active: false, joined: '2010-06-06', salary: 120_000 },
-  { id: 7, name: 'Brian Kernighan', team: 'Compilers', age: 80, active: true, joined: '2012-02-02', salary: 160_000 },
-  { id: 8, name: 'Dennis Ritchie', team: 'Kernel', age: 70, active: false, joined: '2009-07-14', salary: 110_000 },
-]
-
-const personColumns: ColumnDef<typeof fullFeatures, Person>[] = [
-  { field: 'name', header: 'Name', width: 200 },
-  { field: 'team', header: 'Team', width: 160 },
-  {
-    field: 'age',
-    header: 'Age',
-    width: 100,
-    editorType: 'number',
-    format: { type: 'number' },
-  },
-  {
-    field: 'active',
-    header: 'Active',
-    width: 100,
-    editorType: 'checkbox',
-  },
-  {
-    field: 'joined',
-    header: 'Joined',
-    width: 140,
-    editorType: 'date',
-    format: { type: 'number' },
-  },
-  {
-    field: 'salary',
-    header: 'Salary',
-    width: 140,
-    editorType: 'number',
-    format: { type: 'currency', currency: 'USD' },
-  },
-]
-
-type MountResult = {
-  api: SvGridApi<typeof fullFeatures, Person>
-  target: HTMLElement
-  destroy: () => void
-}
-
-function mountGrid(overrides: Record<string, unknown> = {}): Promise<MountResult> {
-  return new Promise((resolveApi, rejectApi) => {
-    const target = document.createElement('div')
-    target.style.width = '1200px'
-    target.style.height = '600px'
-    document.body.appendChild(target)
-
-    let capturedApi: SvGridApi<typeof fullFeatures, Person> | null = null
-
-    const app = mount(SvGrid, {
-      target,
-      props: {
-        data: people,
-        columns: personColumns,
-        features: fullFeatures,
-        _rowModels: {
-          coreRowModel: createCoreRowModel(),
-          filteredRowModel: createFilteredRowModel(),
-          sortedRowModel: createSortedRowModel(sortFns),
-          groupedRowModel: createGroupedRowModel(),
-          expandedRowModel: createExpandedRowModel(),
-          paginatedRowModel: createPaginatedRowModel(),
-        },
-        rowHeight: 36,
-        containerHeight: 480,
-        virtualization: false,
-        onApiReady(api: SvGridApi<typeof fullFeatures, Person>) {
-          capturedApi = api
-          resolveApi({
-            api,
-            target,
-            destroy: () => {
-              unmount(app)
-              target.remove()
-            },
-          })
-        },
-        ...overrides,
-      } as any,
-    })
-
-    queueMicrotask(() => {
-      if (!capturedApi) rejectApi(new Error('onApiReady never fired'))
-    })
-  })
-}
-
-const tick = () => Promise.resolve()
-
-describe('SvGrid - core render', () => {
-  it('mounts and renders the column headers', async () => {
-    const { target, destroy } = await mountGrid()
-    try {
-      const headers = target.querySelectorAll('[data-svgrid-header-col]')
-      // jsdom reports 0 for offsetWidth so column virtualization may render
-      // a subset. The point of this assertion is just that the header row
-      // exists and is populated.
-      expect(headers.length).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('renders the rows in the body', async () => {
-    const { target, destroy } = await mountGrid()
-    try {
-      await tick()
-      const rows = target.querySelectorAll('[data-svgrid-row]')
-      // Pagination defaults to off in our mount - all rows render.
-      expect(rows.length).toBeGreaterThanOrEqual(people.length)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('renders the empty message when data is empty', async () => {
-    const { target, destroy } = await mountGrid({ data: [], emptyMessage: 'No rows yet' })
-    try {
-      await tick()
-      expect(target.textContent).toContain('No rows yet')
-    } finally {
-      destroy()
-    }
-  })
-
-  it('renders a loading state when `loading` is true', async () => {
-    const { target, destroy } = await mountGrid({ loading: true })
-    try {
-      await tick()
-      const statusEls = target.querySelectorAll('[role="status"]')
-      expect(statusEls.length).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('renders an error state when `error` is set', async () => {
-    const { target, destroy } = await mountGrid({ error: 'Something broke' })
-    try {
-      await tick()
-      expect(target.textContent).toContain('Something broke')
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - sort', () => {
-  it('setSort then clearSort updates filters via api', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      api.setSort('name', 'asc')
-      await tick()
-      api.setSort('name', 'desc')
-      await tick()
-      api.setSort('name', null)
-      await tick()
-      api.clearSort()
-      await tick()
-      // No throw + state consistent = pass.
-      expect(api.getData().length).toBe(people.length)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - pagination', () => {
-  it('shows fewer displayed rows than total when paginated', async () => {
-    const { api, destroy } = await mountGrid({ showPagination: true, pageSize: 3 })
-    try {
-      await tick()
-      const displayed = api.getDisplayedRows()
-      expect(displayed.length).toBeLessThanOrEqual(3)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - global filter', () => {
-  it('showGlobalFilter renders the input', async () => {
-    const { target, destroy } = await mountGrid({ showGlobalFilter: true })
-    try {
-      await tick()
-      const input = target.querySelector(
-        '.sv-grid-global-filter input, input[type="text"]',
-      )
-      expect(input).not.toBeNull()
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - column filter row', () => {
-  it('showColumnFilters renders the filter row inputs', async () => {
-    const { target, destroy } = await mountGrid({ showColumnFilters: true })
-    try {
-      await tick()
-      const inputs = target.querySelectorAll('.sv-grid-column-filter')
-      // One filter input per filterable column.
-      expect(inputs.length).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - inline editing', () => {
-  it('enables enableInlineEditing without throwing', async () => {
-    const { api, destroy } = await mountGrid({ enableInlineEditing: true })
-    try {
-      // setCellValue should mutate internal data.
-      api.setCellValue(0, 'name', 'Renamed Person')
-      await tick()
-      const data = api.getData()
-      expect((data[0] as Person).name).toBe('Renamed Person')
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - row selection', () => {
-  it('showRowSelection renders the checkbox column', async () => {
-    const { target, destroy } = await mountGrid({ showRowSelection: true })
-    try {
-      await tick()
-      const checkboxes = target.querySelectorAll('.sv-grid-checkbox')
-      // At least the header + one per row.
-      expect(checkboxes.length).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - capability shortcuts', () => {
-  it('sortable + filterable enable sorting/filtering UI with no features prop', async () => {
-    const { target, destroy } = await mountGrid({
-      features: undefined,
-      sortable: true,
-      filterable: true,
-    })
-    try {
-      await tick()
-      // rowSortingFeature injected -> headers expose aria-sort.
-      expect(
-        target.querySelectorAll('[role="columnheader"][aria-sort]').length,
-      ).toBeGreaterThan(0)
-      // columnFilteringFeature injected -> per-column filter button renders.
-      expect(target.querySelector('.sv-grid-col-filter-btn')).toBeTruthy()
-    } finally {
-      destroy()
-    }
-  })
-
-  it('sortable={false} overrides a rowSortingFeature passed via features', async () => {
-    // The harness default `fullFeatures` includes rowSortingFeature.
-    const { target, destroy } = await mountGrid({ sortable: false })
-    try {
-      await tick()
-      expect(
-        target.querySelector('[role="columnheader"][aria-sort]'),
-      ).toBeNull()
-    } finally {
-      destroy()
-    }
-  })
-
-  it('pageable toggles the pagination footer', async () => {
-    const off = await mountGrid({ pageable: false })
-    try {
-      await tick()
-      expect(off.target.querySelector('.sv-grid-pagination')).toBeNull()
-    } finally {
-      off.destroy()
-    }
-    const on = await mountGrid({ features: undefined, pageable: true })
-    try {
-      await tick()
-      expect(on.target.querySelector('.sv-grid-pagination')).toBeTruthy()
-    } finally {
-      on.destroy()
-    }
-  })
-
-  it('paginationPosition mounts + gates the bottom pager', async () => {
-    // The top pager is gated on measurement (jsdom does not measure), so it's not
-    // asserted here; the visible top pager is covered by the browser/e2e check.
-    // This guards the mount path (a top footer rendered pre-measure used to crash).
-    for (const paginationPosition of ['top', 'both', 'bottom'] as const) {
-      const g = await mountGrid({ showPagination: true, paginationPosition })
-      try {
-        await tick()
-        expect(g.api).toBeTruthy()
-        const bottoms = [...g.target.querySelectorAll('.sv-grid-pagination')].filter((el) => !el.classList.contains('sv-grid-pagination-top'))
-        expect(bottoms.length).toBe(paginationPosition === 'top' ? 0 : 1) // no bottom pager when position is 'top'
-      } finally {
-        g.destroy()
-      }
-    }
-  })
-
-  it('pageSizeOptions is accepted by the pager', async () => {
-    const g = await mountGrid({ showPagination: true, pageSizeOptions: [5, 15, 45] })
-    try {
-      await tick()
-      expect(g.target.querySelector('.sv-grid-pagination')).toBeTruthy()
-    } finally {
-      g.destroy()
-    }
-  })
-
-  it('editable={false} blocks inline editing entry points', async () => {
-    const { api, target, destroy } = await mountGrid({ editable: false })
-    try {
-      await tick()
-      // Double-clicking a body cell must not open an editor when editing
-      // is disabled via the shortcut.
-      const cell = target.querySelector<HTMLElement>('.sv-grid-cell')
-      cell?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
-      await tick()
-      expect(target.querySelector('.sv-grid-cell-editor')).toBeNull()
-      expect(api.getData().length).toBe(people.length)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - cell selection', () => {
-  it('enableCellSelection mounts without error', async () => {
-    const { api, destroy } = await mountGrid({ enableCellSelection: true })
-    try {
-      await tick()
-      expect(api.getData().length).toBe(people.length)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - grouping + aggregation', () => {
-  it('setGroupBy mounts + the codepath runs without throwing', async () => {
-    const { api, target, destroy } = await mountGrid({
-      enableRowSummaries: true,
-      showGroupingControls: true,
-    })
-    try {
-      api.setGroupBy(['team'])
-      await tick()
-      await tick()
-      // Sanity: the grid is still mounted and the API responsive.
-      const data = api.getData()
-      expect(data.length).toBe(people.length)
-      // Group rendering depends on row model + container dimensions in jsdom;
-      // just verify the codepath does not throw.
-      expect(target).toBeTruthy()
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - column add / remove / visibility', () => {
-  it('addColumn and removeColumn round-trip', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      api.addColumn({ id: 'id-col', field: 'id', header: 'ID', width: 60 } as any, 'left')
-      await tick()
-      api.addColumn(
-        { id: 'extra-tag', field: 'team', header: 'Extra', width: 60 } as any,
-        'right',
-      )
-      await tick()
-      api.addColumn(
-        { id: 'mid-col', field: 'name', header: 'Mid', width: 60 } as any,
-        1,
-      )
-      await tick()
-      api.removeColumn('id-col')
-      await tick()
-      // No throw means the codepath was exercised.
-      expect(typeof api.getData).toBe('function')
-    } finally {
-      destroy()
-    }
-  })
-
-  it('setColumnVisible toggles visibility flag', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      expect(api.isColumnVisible('name')).toBe(true)
-      api.setColumnVisible('name', false)
-      await tick()
-      expect(api.isColumnVisible('name')).toBe(false)
-      api.setColumnVisible('name', true)
-      await tick()
-      expect(api.isColumnVisible('name')).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('columns marked `visible: false` start hidden but stay listed', async () => {
-    const columns: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map(
-      (c) => (c.field === 'team' ? { ...c, visible: false } : c),
-    )
-    const { api, destroy } = await mountGrid({ columns })
-    try {
-      // Starts hidden...
-      expect(api.isColumnVisible('team')).toBe(false)
-      // ...but is still listed in getColumns() (so a Choose Columns UI
-      // can offer it), just with visible=false.
-      const team = api.getColumns().find((c) => c.id === 'team')
-      expect(team).toBeDefined()
-      expect(team?.visible).toBe(false)
-      // A later user toggle wins over the initial flag.
-      api.setColumnVisible('team', true)
-      await tick()
-      expect(api.isColumnVisible('team')).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - row add / remove', () => {
-  it('addRow at top / bottom / specific index', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      const before = api.getData().length
-      api.addRow({ id: 99, name: 'Top', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 'top')
-      api.addRow({ id: 100, name: 'Bottom', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 'bottom')
-      api.addRow({ id: 101, name: 'Mid', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 2)
-      await tick()
-      expect(api.getData().length).toBe(before + 3)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('addRows / removeRow / removeRows', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      const before = api.getData().length
-      api.addRows(
-        [
-          { id: 90, name: 'A', team: 'X', age: 1, active: true, joined: '2025', salary: 1 },
-          { id: 91, name: 'B', team: 'X', age: 1, active: true, joined: '2025', salary: 1 },
-        ],
-        'bottom',
-      )
-      await tick()
-      api.removeRow(0)
-      await tick()
-      api.removeRows([0, 1])
-      await tick()
-      expect(api.getData().length).toBe(before + 2 - 3)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - getCellValue', () => {
-  it('returns the cell value for a known row+column', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      const value = api.getCellValue(0, 'name')
-      expect(value).toBe(people[0]!.name)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('returns undefined for unknown row or column', async () => {
-    const { api, destroy } = await mountGrid()
-    try {
-      expect(api.getCellValue(999, 'name')).toBeUndefined()
-      expect(api.getCellValue(0, 'no-such-col')).toBeUndefined()
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - row number column', () => {
-  it('showRowNumbers renders the leading row-number column', async () => {
-    const { target, destroy } = await mountGrid({ showRowNumbers: true })
-    try {
-      await tick()
-      const rnCells = target.querySelectorAll('.sv-grid-row-number-cell')
-      expect(rnCells.length).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - external sort / filter', () => {
-  it('externalSort + onSortingChange fires without re-ordering rows', async () => {
-    let captured: Array<{ id: string; desc: boolean }> | null = null
-    const { api, destroy } = await mountGrid({
-      externalSort: true,
-      onSortingChange: (s: any) => (captured = s),
-    })
-    try {
-      api.setSort('age', 'desc')
-      await tick()
-      expect(captured).not.toBeNull()
-    } finally {
-      destroy()
-    }
-  })
-
-  it('externalFilter + onFiltersChange fires when a filter is set', async () => {
-    let calls = 0
-    const { api, destroy } = await mountGrid({
-      externalFilter: true,
-      onFiltersChange: () => {
-        calls += 1
-      },
-    })
-    try {
-      api.setFilter('team', { operator: 'contains', value: 'Research' })
-      await tick()
-      expect(calls).toBeGreaterThan(0)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - custom snippet cell', () => {
-  it('accepts a custom cell renderer without throwing', async () => {
-    // Build a snippet via raw object - the SvGrid component reads
-    // `column.columnDef.cell` and pipes it through FlexRender. Returning a
-    // plain string is the simplest renderer; tests only need to verify the
-    // render path doesn't crash.
-    const customCols: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map((c) =>
-      c.field === 'name'
-        ? {
-            ...c,
-            cell: (ctx: any) => `★ ${(ctx.row.original as Person).name}`,
-          }
-        : c,
-    )
-    const { target, destroy } = await mountGrid({ columns: customCols })
-    try {
-      await tick()
-      expect(target.textContent).toContain('★')
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - filterMode shortcuts', () => {
-  it('filterMode="row" + global filter input wiring', async () => {
-    const { destroy } = await mountGrid({ filterMode: 'row' })
-    try {
-      await tick()
-      // No assertion needed - exercising the codepath is enough.
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-  it('filterMode="global"', async () => {
-    const { destroy } = await mountGrid({ filterMode: 'global' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-  it('filterMode="none"', async () => {
-    const { destroy } = await mountGrid({ filterMode: 'none' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - selectionMode shortcuts', () => {
-  it('selectionMode="row"', async () => {
-    const { destroy } = await mountGrid({ selectionMode: 'row' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-  it('selectionMode="cell"', async () => {
-    const { destroy } = await mountGrid({ selectionMode: 'cell' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-  it('selectionMode="both"', async () => {
-    const { destroy } = await mountGrid({ selectionMode: 'both' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-  it('selectionMode="none"', async () => {
-    const { destroy } = await mountGrid({ selectionMode: 'none' })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - fitColumns', () => {
-  it('mounts with fitColumns=true without throwing', async () => {
-    const { destroy } = await mountGrid({ fitColumns: true })
-    try {
-      await tick()
-      expect(true).toBe(true)
-    } finally {
-      destroy()
-    }
-  })
-})
-
-describe('SvGrid - selectable shortcut (cell selection)', () => {
-  // The gated path a user actually takes: pointerdown on a cell runs through
-  // createSelection.setSelection, which bails on !enableCellSelectionEffective.
-  // Asserting through it (rather than api.selectCells, which writes the range
-  // directly and bypasses the gate) is what makes these tests meaningful.
-  // Deliberately skips `.sv-grid-selection-cell`: the checkbox column is a
-  // different surface and a pointerdown there starts no range, so clicking it
-  // would make every assertion below pass vacuously.
-  async function clickCell(target: HTMLElement, index: number) {
-    const cells = target.querySelectorAll(
-      '.sv-grid-cell:not(.sv-grid-selection-cell)',
-    )
-    const cell = cells[index]
-    if (!cell) throw new Error(`no data cell at index ${index} (found ${cells.length})`)
-    cell.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
-    await tick()
-  }
-
-  it('is ON by default - selectionMode defaults to "both"', async () => {
-    const { api, target, destroy } = await mountGrid()
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected().length).toBe(1)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('selectable={false} turns cell selection off', async () => {
-    const { api, target, destroy } = await mountGrid({ selectable: false })
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected()).toEqual([])
-    } finally {
-      destroy()
-    }
-  })
-
-  it('selectable={true} wins over selectionMode="none"', async () => {
-    const { api, target, destroy } = await mountGrid({
-      selectable: true,
-      selectionMode: 'none',
-    })
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected().length).toBe(1)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('selectable={false} wins over enableCellSelection={true}', async () => {
-    const { api, target, destroy } = await mountGrid({
-      selectable: false,
-      enableCellSelection: true,
-    })
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected()).toEqual([])
-    } finally {
-      destroy()
-    }
-  })
-
-  it('falls back to enableCellSelection when selectable is omitted', async () => {
-    const { api, target, destroy } = await mountGrid({ enableCellSelection: false })
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected()).toEqual([])
-    } finally {
-      destroy()
-    }
-  })
-
-  it('api.setOption("selectable", false) turns it off at runtime', async () => {
-    const { api, target, destroy } = await mountGrid()
-    try {
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected().length).toBe(1)
-
-      api.setOption('selectable', false)
-      await tick()
-      api.selectCells([])
-      await tick()
-      await clickCell(target, 0)
-      expect(api.getSelected()).toEqual([])
-    } finally {
-      destroy()
-    }
-  })
-})
-
-/**
- * Guards the promise the homepage "A real grid in ~15 lines" section makes:
- * the snippet shown there is shortcuts-only - no `features` import, no
- * `editorType` - so every capability it advertises must work from exactly
- * those props. The section drifted from the component once already (it showed
- * a bare grid beside a preview captioned "sort, filter, select, edit ... are
- * all live"), which is what this test exists to catch.
- */
-describe('SvGrid - homepage snippet (shortcuts only, no features import)', () => {
-  const snippetRows = [
-    { firstName: 'Ada', age: 36, status: 'active' },
-    { firstName: 'Linus', age: 54, status: 'active' },
-    { firstName: 'Grace', age: 85, status: 'inactive' },
-  ]
-  const snippetColumns = [
-    { field: 'firstName', header: 'First name' },
-    { field: 'age', header: 'Age' },
-    { field: 'status', header: 'Status' },
-  ] as unknown as typeof personColumns
-
-  function mountSnippet(): Promise<MountResult> {
-    return new Promise((resolveApi, rejectApi) => {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGrid, {
-        target,
-        props: {
-          data: snippetRows,
-          columns: snippetColumns,
-          // The four shortcuts the snippet passes - and nothing else.
-          sortable: true,
-          filterable: true,
-          editable: true,
-          selectable: true,
-          getRowId: (r: { firstName: string }) => r.firstName,
-          rowHeight: 36,
-          containerHeight: 300,
-          virtualization: false,
-          onApiReady(api: SvGridApi<any, any>) {
-            resolveApi({
-              api,
-              target,
-              destroy: () => {
-                unmount(app)
-                target.remove()
-              },
-            } as unknown as MountResult)
-          },
-        } as never,
-      })
-      if (!app) rejectApi(new Error('mount failed'))
-    })
-  }
-
-  it('sortable works without importing rowSortingFeature', async () => {
-    const { api, destroy } = await mountSnippet()
-    try {
-      await tick()
-      api.setSort('age', 'asc')
-      await tick()
-      expect(api.getState().sorting).toEqual([{ id: 'age', desc: false }])
-    } finally {
-      destroy()
-    }
-  })
-
-  it('editable opens an editor on a column with no editorType', async () => {
-    const { api, target, destroy } = await mountSnippet()
-    try {
-      await tick()
-      api.startEditing(0, 'firstName')
-      await tick()
-      expect(target.querySelectorAll('.sv-grid-cell-editing').length).toBe(1)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('selectable gives cell selection', async () => {
-    const { api, target, destroy } = await mountSnippet()
-    try {
-      await tick()
-      const cell = target.querySelector('.sv-grid-cell:not(.sv-grid-selection-cell)')
-      cell?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
-      await tick()
-      expect(api.getSelected().length).toBe(1)
-    } finally {
-      destroy()
-    }
-  })
-
-  it('the checkbox column renders and toggles a row - no feature import needed', async () => {
-    const { api, target, destroy } = await mountSnippet()
-    try {
-      await tick()
-      // [0] is the header select-all; [1] is the first row.
-      const boxes = target.querySelectorAll<HTMLElement>('.sv-grid-checkbox')
-      expect(boxes.length).toBeGreaterThan(1)
-      boxes[1]?.click()
-      await tick()
+/**
+ * Broad behavioral test suite for the <SvGrid /> render component.
+ *
+ * The intent is wide coverage on a single file - SvGrid.svelte is ~3000
+ * lines and most of its branches are reachable only when the component is
+ * mounted with a particular prop combination. Each test below exercises a
+ * different feature set so the whole file's effect graph is traversed.
+ *
+ * Pattern (re-used across files):
+ *   1. mount SvGrid in jsdom with the props that trigger the feature
+ *   2. wait one microtask for $effects to flush
+ *   3. assert on the api object delivered via onApiReady, or on visible DOM
+ *   4. unmount
+ */
+
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  columnGroupingFeature,
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Person = {
+  id: number
+  name: string
+  team: string
+  age: number
+  active: boolean
+  joined: string
+  salary: number
+}
+
+const fullFeatures = tableFeatures({
+  columnFilteringFeature,
+  columnGroupingFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+})
+
+const people: Person[] = [
+  { id: 1, name: 'Ada Lovelace', team: 'Research', age: 38, active: true, joined: '2020-01-10', salary: 142_000 },
+  { id: 2, name: 'Grace Hopper', team: 'Compilers', age: 42, active: true, joined: '2018-05-22', salary: 158_000 },
+  { id: 3, name: 'Alan Turing', team: 'Research', age: 41, active: false, joined: '2021-09-01', salary: 138_000 },
+  { id: 4, name: 'Margaret Hamilton', team: 'Apollo', age: 35, active: true, joined: '2019-03-15', salary: 165_000 },
+  { id: 5, name: 'Linus Torvalds', team: 'Kernel', age: 54, active: true, joined: '2017-11-30', salary: 175_000 },
+  { id: 6, name: 'Donald Knuth', team: 'Research', age: 86, active: false, joined: '2010-06-06', salary: 120_000 },
+  { id: 7, name: 'Brian Kernighan', team: 'Compilers', age: 80, active: true, joined: '2012-02-02', salary: 160_000 },
+  { id: 8, name: 'Dennis Ritchie', team: 'Kernel', age: 70, active: false, joined: '2009-07-14', salary: 110_000 },
+]
+
+const personColumns: ColumnDef<typeof fullFeatures, Person>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'team', header: 'Team', width: 160 },
+  {
+    field: 'age',
+    header: 'Age',
+    width: 100,
+    editorType: 'number',
+    format: { type: 'number' },
+  },
+  {
+    field: 'active',
+    header: 'Active',
+    width: 100,
+    editorType: 'checkbox',
+  },
+  {
+    field: 'joined',
+    header: 'Joined',
+    width: 140,
+    editorType: 'date',
+    format: { type: 'number' },
+  },
+  {
+    field: 'salary',
+    header: 'Salary',
+    width: 140,
+    editorType: 'number',
+    format: { type: 'currency', currency: 'USD' },
+  },
+]
+
+type MountResult = {
+  api: SvGridApi<typeof fullFeatures, Person>
+  target: HTMLElement
+  destroy: () => void
+}
+
+function mountGrid(overrides: Record<string, unknown> = {}): Promise<MountResult> {
+  return new Promise((resolveApi, rejectApi) => {
+    const target = document.createElement('div')
+    target.style.width = '1200px'
+    target.style.height = '600px'
+    document.body.appendChild(target)
+
+    let capturedApi: SvGridApi<typeof fullFeatures, Person> | null = null
+
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: people,
+        columns: personColumns,
+        features: fullFeatures,
+        _rowModels: {
+          coreRowModel: createCoreRowModel(),
+          filteredRowModel: createFilteredRowModel(),
+          sortedRowModel: createSortedRowModel(sortFns),
+          groupedRowModel: createGroupedRowModel(),
+          expandedRowModel: createExpandedRowModel(),
+          paginatedRowModel: createPaginatedRowModel(),
+        },
+        rowHeight: 36,
+        containerHeight: 480,
+        virtualization: false,
+        onApiReady(api: SvGridApi<typeof fullFeatures, Person>) {
+          capturedApi = api
+          resolveApi({
+            api,
+            target,
+            destroy: () => {
+              unmount(app)
+              target.remove()
+            },
+          })
+        },
+        ...overrides,
+      } as any,
+    })
+
+    queueMicrotask(() => {
+      if (!capturedApi) rejectApi(new Error('onApiReady never fired'))
+    })
+  })
+}
+
+const tick = () => Promise.resolve()
+
+describe('SvGrid - core render', () => {
+  it('mounts and renders the column headers', async () => {
+    const { target, destroy } = await mountGrid()
+    try {
+      const headers = target.querySelectorAll('[data-svgrid-header-col]')
+      // jsdom reports 0 for offsetWidth so column virtualization may render
+      // a subset. The point of this assertion is just that the header row
+      // exists and is populated.
+      expect(headers.length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('renders the rows in the body', async () => {
+    const { target, destroy } = await mountGrid()
+    try {
+      await tick()
+      const rows = target.querySelectorAll('[data-svgrid-row]')
+      // Pagination defaults to off in our mount - all rows render.
+      expect(rows.length).toBeGreaterThanOrEqual(people.length)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('renders the empty message when data is empty', async () => {
+    const { target, destroy } = await mountGrid({ data: [], emptyMessage: 'No rows yet' })
+    try {
+      await tick()
+      expect(target.textContent).toContain('No rows yet')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('renders a loading state when `loading` is true', async () => {
+    const { target, destroy } = await mountGrid({ loading: true })
+    try {
+      await tick()
+      const statusEls = target.querySelectorAll('[role="status"]')
+      expect(statusEls.length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('renders an error state when `error` is set', async () => {
+    const { target, destroy } = await mountGrid({ error: 'Something broke' })
+    try {
+      await tick()
+      expect(target.textContent).toContain('Something broke')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - sort', () => {
+  it('setSort then clearSort updates filters via api', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      api.setSort('name', 'asc')
+      await tick()
+      api.setSort('name', 'desc')
+      await tick()
+      api.setSort('name', null)
+      await tick()
+      api.clearSort()
+      await tick()
+      // No throw + state consistent = pass.
+      expect(api.getData().length).toBe(people.length)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - pagination', () => {
+  it('shows fewer displayed rows than total when paginated', async () => {
+    const { api, destroy } = await mountGrid({ showPagination: true, pageSize: 3 })
+    try {
+      await tick()
+      const displayed = api.getDisplayedRows()
+      expect(displayed.length).toBeLessThanOrEqual(3)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - global filter', () => {
+  it('showGlobalFilter renders the input', async () => {
+    const { target, destroy } = await mountGrid({ showGlobalFilter: true })
+    try {
+      await tick()
+      const input = target.querySelector(
+        '.sv-grid-global-filter input, input[type="text"]',
+      )
+      expect(input).not.toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - column filter row', () => {
+  it('showColumnFilters renders the filter row inputs', async () => {
+    const { target, destroy } = await mountGrid({ showColumnFilters: true })
+    try {
+      await tick()
+      const inputs = target.querySelectorAll('.sv-grid-column-filter')
+      // One filter input per filterable column.
+      expect(inputs.length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - inline editing', () => {
+  it('enables enableInlineEditing without throwing', async () => {
+    const { api, destroy } = await mountGrid({ enableInlineEditing: true })
+    try {
+      // setCellValue should mutate internal data.
+      api.setCellValue(0, 'name', 'Renamed Person')
+      await tick()
+      const data = api.getData()
+      expect((data[0] as Person).name).toBe('Renamed Person')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - row selection', () => {
+  it('showRowSelection renders the checkbox column', async () => {
+    const { target, destroy } = await mountGrid({ showRowSelection: true })
+    try {
+      await tick()
+      const checkboxes = target.querySelectorAll('.sv-grid-checkbox')
+      // At least the header + one per row.
+      expect(checkboxes.length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - capability shortcuts', () => {
+  it('sortable + filterable enable sorting/filtering UI with no features prop', async () => {
+    const { target, destroy } = await mountGrid({
+      features: undefined,
+      sortable: true,
+      filterable: true,
+    })
+    try {
+      await tick()
+      // rowSortingFeature injected -> headers expose aria-sort.
+      expect(
+        target.querySelectorAll('[role="columnheader"][aria-sort]').length,
+      ).toBeGreaterThan(0)
+      // columnFilteringFeature injected -> per-column filter button renders.
+      expect(target.querySelector('.sv-grid-col-filter-btn')).toBeTruthy()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('sortable={false} overrides a rowSortingFeature passed via features', async () => {
+    // The harness default `fullFeatures` includes rowSortingFeature.
+    const { target, destroy } = await mountGrid({ sortable: false })
+    try {
+      await tick()
+      expect(
+        target.querySelector('[role="columnheader"][aria-sort]'),
+      ).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('pageable toggles the pagination footer', async () => {
+    const off = await mountGrid({ pageable: false })
+    try {
+      await tick()
+      expect(off.target.querySelector('.sv-grid-pagination')).toBeNull()
+    } finally {
+      off.destroy()
+    }
+    const on = await mountGrid({ features: undefined, pageable: true })
+    try {
+      await tick()
+      expect(on.target.querySelector('.sv-grid-pagination')).toBeTruthy()
+    } finally {
+      on.destroy()
+    }
+  })
+
+  it('paginationPosition mounts + gates the bottom pager', async () => {
+    // The top pager is gated on measurement (jsdom does not measure), so it's not
+    // asserted here; the visible top pager is covered by the browser/e2e check.
+    // This guards the mount path (a top footer rendered pre-measure used to crash).
+    for (const paginationPosition of ['top', 'both', 'bottom'] as const) {
+      const g = await mountGrid({ showPagination: true, paginationPosition })
+      try {
+        await tick()
+        expect(g.api).toBeTruthy()
+        const bottoms = [...g.target.querySelectorAll('.sv-grid-pagination')].filter((el) => !el.classList.contains('sv-grid-pagination-top'))
+        expect(bottoms.length).toBe(paginationPosition === 'top' ? 0 : 1) // no bottom pager when position is 'top'
+      } finally {
+        g.destroy()
+      }
+    }
+  })
+
+  it('pageSizeOptions is accepted by the pager', async () => {
+    const g = await mountGrid({ showPagination: true, pageSizeOptions: [5, 15, 45] })
+    try {
+      await tick()
+      expect(g.target.querySelector('.sv-grid-pagination')).toBeTruthy()
+    } finally {
+      g.destroy()
+    }
+  })
+
+  it('editable={false} blocks inline editing entry points', async () => {
+    const { api, target, destroy } = await mountGrid({ editable: false })
+    try {
+      await tick()
+      // Double-clicking a body cell must not open an editor when editing
+      // is disabled via the shortcut.
+      const cell = target.querySelector<HTMLElement>('.sv-grid-cell')
+      cell?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+      await tick()
+      expect(target.querySelector('.sv-grid-cell-editor')).toBeNull()
+      expect(api.getData().length).toBe(people.length)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - cell selection', () => {
+  it('enableCellSelection mounts without error', async () => {
+    const { api, destroy } = await mountGrid({ enableCellSelection: true })
+    try {
+      await tick()
+      expect(api.getData().length).toBe(people.length)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - grouping + aggregation', () => {
+  it('setGroupBy mounts + the codepath runs without throwing', async () => {
+    const { api, target, destroy } = await mountGrid({
+      enableRowSummaries: true,
+      showGroupingControls: true,
+    })
+    try {
+      api.setGroupBy(['team'])
+      await tick()
+      await tick()
+      // Sanity: the grid is still mounted and the API responsive.
+      const data = api.getData()
+      expect(data.length).toBe(people.length)
+      // Group rendering depends on row model + container dimensions in jsdom;
+      // just verify the codepath does not throw.
+      expect(target).toBeTruthy()
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - column add / remove / visibility', () => {
+  it('addColumn and removeColumn round-trip', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      api.addColumn({ id: 'id-col', field: 'id', header: 'ID', width: 60 } as any, 'left')
+      await tick()
+      api.addColumn(
+        { id: 'extra-tag', field: 'team', header: 'Extra', width: 60 } as any,
+        'right',
+      )
+      await tick()
+      api.addColumn(
+        { id: 'mid-col', field: 'name', header: 'Mid', width: 60 } as any,
+        1,
+      )
+      await tick()
+      api.removeColumn('id-col')
+      await tick()
+      // No throw means the codepath was exercised.
+      expect(typeof api.getData).toBe('function')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('setColumnVisible toggles visibility flag', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      expect(api.isColumnVisible('name')).toBe(true)
+      api.setColumnVisible('name', false)
+      await tick()
+      expect(api.isColumnVisible('name')).toBe(false)
+      api.setColumnVisible('name', true)
+      await tick()
+      expect(api.isColumnVisible('name')).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('columns marked `visible: false` start hidden but stay listed', async () => {
+    const columns: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map(
+      (c) => (c.field === 'team' ? { ...c, visible: false } : c),
+    )
+    const { api, destroy } = await mountGrid({ columns })
+    try {
+      // Starts hidden...
+      expect(api.isColumnVisible('team')).toBe(false)
+      // ...but is still listed in getColumns() (so a Choose Columns UI
+      // can offer it), just with visible=false.
+      const team = api.getColumns().find((c) => c.id === 'team')
+      expect(team).toBeDefined()
+      expect(team?.visible).toBe(false)
+      // A later user toggle wins over the initial flag.
+      api.setColumnVisible('team', true)
+      await tick()
+      expect(api.isColumnVisible('team')).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - row add / remove', () => {
+  it('addRow at top / bottom / specific index', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const before = api.getData().length
+      api.addRow({ id: 99, name: 'Top', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 'top')
+      api.addRow({ id: 100, name: 'Bottom', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 'bottom')
+      api.addRow({ id: 101, name: 'Mid', team: 'X', age: 20, active: true, joined: '2025', salary: 1 }, 2)
+      await tick()
+      expect(api.getData().length).toBe(before + 3)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('addRows / removeRow / removeRows', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const before = api.getData().length
+      api.addRows(
+        [
+          { id: 90, name: 'A', team: 'X', age: 1, active: true, joined: '2025', salary: 1 },
+          { id: 91, name: 'B', team: 'X', age: 1, active: true, joined: '2025', salary: 1 },
+        ],
+        'bottom',
+      )
+      await tick()
+      api.removeRow(0)
+      await tick()
+      api.removeRows([0, 1])
+      await tick()
+      expect(api.getData().length).toBe(before + 2 - 3)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - getCellValue', () => {
+  it('returns the cell value for a known row+column', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const value = api.getCellValue(0, 'name')
+      expect(value).toBe(people[0]!.name)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('returns undefined for unknown row or column', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      expect(api.getCellValue(999, 'name')).toBeUndefined()
+      expect(api.getCellValue(0, 'no-such-col')).toBeUndefined()
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - row number column', () => {
+  it('showRowNumbers renders the leading row-number column', async () => {
+    const { target, destroy } = await mountGrid({ showRowNumbers: true })
+    try {
+      await tick()
+      const rnCells = target.querySelectorAll('.sv-grid-row-number-cell')
+      expect(rnCells.length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - external sort / filter', () => {
+  it('externalSort + onSortingChange fires without re-ordering rows', async () => {
+    let captured: Array<{ id: string; desc: boolean }> | null = null
+    const { api, destroy } = await mountGrid({
+      externalSort: true,
+      onSortingChange: (s: any) => (captured = s),
+    })
+    try {
+      api.setSort('age', 'desc')
+      await tick()
+      expect(captured).not.toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('externalFilter + onFiltersChange fires when a filter is set', async () => {
+    let calls = 0
+    const { api, destroy } = await mountGrid({
+      externalFilter: true,
+      onFiltersChange: () => {
+        calls += 1
+      },
+    })
+    try {
+      api.setFilter('team', { operator: 'contains', value: 'Research' })
+      await tick()
+      expect(calls).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - custom snippet cell', () => {
+  it('accepts a custom cell renderer without throwing', async () => {
+    // Build a snippet via raw object - the SvGrid component reads
+    // `column.columnDef.cell` and pipes it through FlexRender. Returning a
+    // plain string is the simplest renderer; tests only need to verify the
+    // render path doesn't crash.
+    const customCols: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map((c) =>
+      c.field === 'name'
+        ? {
+            ...c,
+            cell: (ctx: any) => `★ ${(ctx.row.original as Person).name}`,
+          }
+        : c,
+    )
+    const { target, destroy } = await mountGrid({ columns: customCols })
+    try {
+      await tick()
+      expect(target.textContent).toContain('★')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - filterMode shortcuts', () => {
+  it('filterMode="row" + global filter input wiring', async () => {
+    const { destroy } = await mountGrid({ filterMode: 'row' })
+    try {
+      await tick()
+      // No assertion needed - exercising the codepath is enough.
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+  it('filterMode="global"', async () => {
+    const { destroy } = await mountGrid({ filterMode: 'global' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+  it('filterMode="none"', async () => {
+    const { destroy } = await mountGrid({ filterMode: 'none' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - selectionMode shortcuts', () => {
+  it('selectionMode="row"', async () => {
+    const { destroy } = await mountGrid({ selectionMode: 'row' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+  it('selectionMode="cell"', async () => {
+    const { destroy } = await mountGrid({ selectionMode: 'cell' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+  it('selectionMode="both"', async () => {
+    const { destroy } = await mountGrid({ selectionMode: 'both' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+  it('selectionMode="none"', async () => {
+    const { destroy } = await mountGrid({ selectionMode: 'none' })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - fitColumns', () => {
+  it('mounts with fitColumns=true without throwing', async () => {
+    const { destroy } = await mountGrid({ fitColumns: true })
+    try {
+      await tick()
+      expect(true).toBe(true)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvGrid - selectable shortcut (cell selection)', () => {
+  // The gated path a user actually takes: pointerdown on a cell runs through
+  // createSelection.setSelection, which bails on !enableCellSelectionEffective.
+  // Asserting through it (rather than api.selectCells, which writes the range
+  // directly and bypasses the gate) is what makes these tests meaningful.
+  // Deliberately skips `.sv-grid-selection-cell`: the checkbox column is a
+  // different surface and a pointerdown there starts no range, so clicking it
+  // would make every assertion below pass vacuously.
+  async function clickCell(target: HTMLElement, index: number) {
+    const cells = target.querySelectorAll(
+      '.sv-grid-cell:not(.sv-grid-selection-cell)',
+    )
+    const cell = cells[index]
+    if (!cell) throw new Error(`no data cell at index ${index} (found ${cells.length})`)
+    cell.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+    await tick()
+  }
+
+  it('is ON by default - selectionMode defaults to "both"', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={false} turns cell selection off', async () => {
+    const { api, target, destroy } = await mountGrid({ selectable: false })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={true} wins over selectionMode="none"', async () => {
+    const { api, target, destroy } = await mountGrid({
+      selectable: true,
+      selectionMode: 'none',
+    })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable={false} wins over enableCellSelection={true}', async () => {
+    const { api, target, destroy } = await mountGrid({
+      selectable: false,
+      enableCellSelection: true,
+    })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('falls back to enableCellSelection when selectable is omitted', async () => {
+    const { api, target, destroy } = await mountGrid({ enableCellSelection: false })
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('api.setOption("selectable", false) turns it off at runtime', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected().length).toBe(1)
+
+      api.setOption('selectable', false)
+      await tick()
+      api.selectCells([])
+      await tick()
+      await clickCell(target, 0)
+      expect(api.getSelected()).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+})
+
+/**
+ * Guards the promise the homepage "A real grid in ~15 lines" section makes:
+ * the snippet shown there is shortcuts-only - no `features` import, no
+ * `editorType` - so every capability it advertises must work from exactly
+ * those props. The section drifted from the component once already (it showed
+ * a bare grid beside a preview captioned "sort, filter, select, edit ... are
+ * all live"), which is what this test exists to catch.
+ */
+describe('SvGrid - homepage snippet (shortcuts only, no features import)', () => {
+  const snippetRows = [
+    { firstName: 'Ada', age: 36, status: 'active' },
+    { firstName: 'Linus', age: 54, status: 'active' },
+    { firstName: 'Grace', age: 85, status: 'inactive' },
+  ]
+  const snippetColumns = [
+    { field: 'firstName', header: 'First name' },
+    { field: 'age', header: 'Age' },
+    { field: 'status', header: 'Status' },
+  ] as unknown as typeof personColumns
+
+  function mountSnippet(): Promise<MountResult> {
+    return new Promise((resolveApi, rejectApi) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: snippetRows,
+          columns: snippetColumns,
+          // The four shortcuts the snippet passes - and nothing else.
+          sortable: true,
+          filterable: true,
+          editable: true,
+          selectable: true,
+          getRowId: (r: { firstName: string }) => r.firstName,
+          rowHeight: 36,
+          containerHeight: 300,
+          virtualization: false,
+          onApiReady(api: SvGridApi<any, any>) {
+            resolveApi({
+              api,
+              target,
+              destroy: () => {
+                unmount(app)
+                target.remove()
+              },
+            } as unknown as MountResult)
+          },
+        } as never,
+      })
+      if (!app) rejectApi(new Error('mount failed'))
+    })
+  }
+
+  it('sortable works without importing rowSortingFeature', async () => {
+    const { api, destroy } = await mountSnippet()
+    try {
+      await tick()
+      api.setSort('age', 'asc')
+      await tick()
+      expect(api.getState().sorting).toEqual([{ id: 'age', desc: false }])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('editable opens an editor on a column with no editorType', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      api.startEditing(0, 'firstName')
+      await tick()
+      expect(target.querySelectorAll('.sv-grid-cell-editing').length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('selectable gives cell selection', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      const cell = target.querySelector('.sv-grid-cell:not(.sv-grid-selection-cell)')
+      cell?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+      await tick()
+      expect(api.getSelected().length).toBe(1)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('the checkbox column renders and toggles a row - no feature import needed', async () => {
+    const { api, target, destroy } = await mountSnippet()
+    try {
+      await tick()
+      // [0] is the header select-all; [1] is the first row.
+      const boxes = target.querySelectorAll<HTMLElement>('.sv-grid-checkbox')
+      expect(boxes.length).toBeGreaterThan(1)
+      boxes[1]?.click()
+      await tick()
       const names = (api.getSelectedRows() as unknown as { firstName: string }[]).map(
         (r) => r.firstName,
       )
-      expect(names).toEqual(['Ada'])
-    } finally {
-      destroy()
-    }
-  })
-})
+      expect(names).toEqual(['Ada'])
+    } finally {
+      destroy()
+    }
+  })
+})