@svgrid/grid 2.2.31 → 2.2.32

package/src/svgrid.filter-depth.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Filtering depth, verified rather than assumed (#11, #12).
+ *
+ * Both of these were still listed as roadmap gaps. They are not: the filter row
+ * renders a per-column operator picker, and a column filter carries an optional
+ * second condition joined by AND/OR. These tests pin the behaviour so the claim
+ * is backed by something executable.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  applyExcelFilter,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnFilteringFeature,
+} from './index'
+
+type Row = { id: number; name: string; amount: number }
+
+const data: Row[] = [
+  { id: 1, name: 'alpha', amount: 5 },
+  { id: 2, name: 'beta', amount: 50 },
+  { id: 3, name: 'gamma', amount: 500 },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 160 },
+  { field: 'amount', header: 'Amount', width: 120 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      filterable: true,
+      showFilterRow: true,
+      onApiReady: (a: never) => { api = a },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 400,
+      virtualization: false,
+    } as never,
+  })
+  return { target, getApi: () => api, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const bodyRows = (t: HTMLElement) =>
+  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
+    (r) => !r.classList.contains('sv-grid-row-spacer'),
+  )
+
+describe('filter row operator picker (#11)', () => {
+  it('renders an operator button per column in the filter row', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    const btns = target.querySelectorAll('.sv-grid-filter-operator-btn')
+    expect(btns.length).toBe(columns.length)
+  })
+
+  it('exposes the active operator on the button for a screen reader', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    const btn = target.querySelector('.sv-grid-filter-operator-btn')!
+    expect(btn.getAttribute('aria-label')).toMatch(/^Filter condition: /)
+  })
+
+  it('opens a menu of the operators valid for that column', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    target.querySelector<HTMLButtonElement>('.sv-grid-filter-operator-btn')!.click()
+    await tick()
+    expect(target.querySelector('.sv-grid-filter-operator-btn.is-open')).not.toBeNull()
+  })
+})
+
+describe('two-condition column filter (#12)', () => {
+  // The model is what decides rows; these assert the AND/OR semantics directly.
+  const between = (v: unknown, lo: number, hi: number) =>
+    applyExcelFilter(v, { id: 'amount', operator: 'greaterThan', value: lo }) &&
+    applyExcelFilter(v, { id: 'amount', operator: 'lessThan', value: hi })
+
+  it('AND narrows to the intersection', () => {
+    expect(between(50, 10, 100)).toBe(true)
+    expect(between(5, 10, 100)).toBe(false)
+    expect(between(500, 10, 100)).toBe(false)
+  })
+
+  it('OR widens to the union', () => {
+    const or = (v: unknown) =>
+      applyExcelFilter(v, { id: 'name', operator: 'startsWith', value: 'al' }) ||
+      applyExcelFilter(v, { id: 'name', operator: 'endsWith', value: 'ma' })
+    expect(or('alpha')).toBe(true)
+    expect(or('gamma')).toBe(true)
+    expect(or('beta')).toBe(false)
+  })
+
+  it('applies a two-condition AND filter through the api', async () => {
+    const g = mountGrid()
+    cleanup = g.destroy
+    await tick()
+    const api = g.getApi() as never as {
+      setFilter: (id: string, f: Record<string, unknown>) => void
+    }
+    // amount > 10 AND amount < 100 -> only beta (50)
+    api.setFilter('amount', {
+      operator: 'greaterThan',
+      value: '10',
+      operator2: 'lessThan',
+      value2: '100',
+      join: 'AND',
+    })
+    await tick()
+    expect(bodyRows(g.target)).toHaveLength(1)
+    expect(g.target.textContent).toContain('beta')
+  })
+
+  it('applies a two-condition OR filter through the api', async () => {
+    const g = mountGrid()
+    cleanup = g.destroy
+    await tick()
+    const api = g.getApi() as never as {
+      setFilter: (id: string, f: Record<string, unknown>) => void
+    }
+    // name startsWith "al" OR name endsWith "ma" -> alpha + gamma
+    api.setFilter('name', {
+      operator: 'startsWith',
+      value: 'al',
+      operator2: 'endsWith',
+      value2: 'ma',
+      join: 'OR',
+    })
+    await tick()
+    expect(bodyRows(g.target)).toHaveLength(2)
+    expect(g.target.textContent).toContain('alpha')
+    expect(g.target.textContent).toContain('gamma')
+    expect(g.target.textContent).not.toContain('beta')
+  })
+})

package/src/svgrid.filter-menu-listbox.svelte.test.ts

@@ -82,8 +82,22 @@ function mountGrid(data: Row[]) {
 async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   btn.click()
-  // GridMenus is a lazy chunk; poll until the popover mounts.
-  await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull())
+  // GridMenus is a lazy chunk, so poll until the popover mounts AND its value
+  // checklist has rendered.
+  //
+  // Waiting only for the popover element returns while the listbox is still
+  // empty: the chunk arrives, the menu element appears, and the values are
+  // snapshotted and windowed in a later flush. Callers then read option counts
+  // from a list that has not populated yet. It survives locally because those
+  // flushes land in the same task, but under parallel load the gap widens - it
+  // failed once that way in a full-suite run. Every caller here opens a menu on
+  // a column that has values, so a populated list is the settled state to wait
+  // for, and each test's own assertions are unchanged.
+  await vi.waitFor(() => {
+    const menu = target.querySelector('.sv-grid-filter-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelectorAll('[role="option"]').length).toBeGreaterThan(0)
+  })
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

package/src/svgrid.filter-menu-scroll.test.ts

@@ -64,8 +64,16 @@ async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   expect(btn).not.toBeNull()
   btn.click()
-  // GridMenus is a lazy chunk; poll until the popover mounts.
-  await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull())
+  // GridMenus is a lazy chunk, so poll until the popover mounts AND its value
+  // checklist is in the DOM. Waiting only for the popover element returns while
+  // the menu body is still filling in, so a caller that reaches for
+  // `.sv-listbox` can get null - which is how this file flaked under
+  // full-suite parallel load.
+  await vi.waitFor(() => {
+    const menu = target.querySelector('.sv-grid-filter-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelector('.sv-listbox')).not.toBeNull()
+  })
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

package/src/svgrid.grand-total.test.ts

@@ -0,0 +1,188 @@
+/**
+ * DOM: `grandTotalRow` appends one totals row for the whole filtered set.
+ *
+ * It is shaped like a group footer (so totals render under their own columns
+ * through the normal cell path) but closes the dataset rather than a group:
+ * it must appear exactly once, last, on the LAST page only, aggregate the
+ * LEAF rows (not the group banners, which already carry subtotals and would
+ * otherwise be counted twice), and follow the filtered set rather than the
+ * raw data.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnGroupingFeature,
+} from './index'
+
+type Row = { id: number; region: string; amount: number }
+
+const data: Row[] = [
+  { id: 1, region: 'East', amount: 10 },
+  { id: 2, region: 'East', amount: 5 },
+  { id: 3, region: 'West', amount: 7 },
+]
+
+const columns = [
+  { field: 'region', header: 'Region', width: 120 },
+  { field: 'amount', header: 'Amount', width: 100, aggregate: 'sum' },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+type Api = {
+  setGroupBy: (ids: string[]) => void
+  nextPage: () => void
+  setState: (s: Record<string, unknown>) => void
+}
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: Api | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      groupable: true,
+      onApiReady: (a: never) => { api = a as never },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return {
+    target,
+    api: () => api,
+    ready: async () => { await tick() },
+    group: async () => {
+      await tick()
+      api?.setGroupBy(['region'])
+      await tick()
+      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
+        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
+      }
+      await tick()
+    },
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const totals = (t: HTMLElement) => [...t.querySelectorAll('tr.sv-grid-grand-total-row')]
+
+describe('grandTotalRow', () => {
+  it('renders nothing when off', async () => {
+    const g = mountGrid({})
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+  })
+
+  it('appends exactly one total row on a flat (ungrouped) grid', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const rows = totals(g.target)
+    expect(rows).toHaveLength(1)
+    // 10 + 5 + 7
+    expect(rows[0]?.textContent).toContain('22')
+  })
+
+  it('is the last row in the body', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
+    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
+  })
+
+  it('counts leaf rows once when grouping is on (banners are not double-counted)', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.group()
+    const rows = totals(g.target)
+    expect(rows).toHaveLength(1)
+    // Still 22, not 44 - the East(15)/West(7) banners must not be summed too.
+    expect(rows[0]?.textContent).toContain('22')
+    expect(rows[0]?.textContent).not.toContain('44')
+  })
+
+  it('coexists with group footers without becoming one of them', async () => {
+    const g = mountGrid({ grandTotalRow: true, groupFooters: true })
+    cleanup = g.destroy
+    await g.group()
+    // Two group subtotals + one grand total, and the grand total is last.
+    expect(g.target.querySelectorAll('tr.sv-grid-group-footer-row')).toHaveLength(3)
+    expect(totals(g.target)).toHaveLength(1)
+    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
+    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
+  })
+
+  it('is not an expandable banner', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const row = totals(g.target)[0]!
+    expect(row.classList.contains('sv-grid-group-row')).toBe(false)
+    expect(row.querySelector('.sv-grid-group-toggle')).toBeNull()
+  })
+
+  it('appears only on the last page when paginating', async () => {
+    // pageSize 2 over 3 rows: page 0 has no total, page 1 (the last) has it.
+    const g = mountGrid({ grandTotalRow: true, pageable: true, pageSize: 2 })
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+    g.api()?.nextPage()
+    await tick()
+    expect(totals(g.target)).toHaveLength(1)
+    // The total is over the whole set (22), not just the last page's row.
+    expect(totals(g.target)[0]?.textContent).toContain('22')
+  })
+
+  it('totals the FILTERED set, not the raw data', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    g.api()?.setState({ globalFilter: 'East' })
+    await tick()
+    // East only: 10 + 5 = 15.
+    expect(totals(g.target)[0]?.textContent).toContain('15')
+  })
+
+  it('renders no total row when no column declares an aggregate', async () => {
+    const g = mountGrid({
+      grandTotalRow: true,
+      columns: [
+        { field: 'region', header: 'Region', width: 120 },
+        { field: 'amount', header: 'Amount', width: 100 },
+      ],
+    })
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+  })
+})

package/src/svgrid.group-display-mode.test.ts

@@ -0,0 +1,171 @@
+/**
+ * DOM: `groupDisplayMode` renders group state in COLUMNS instead of banners.
+ *
+ * `groupRows` (the default) draws a full-width banner per group. The two column
+ * modes fold that state into synthetic auto-group columns and let the group row
+ * render as an ordinary row - which is the point: its aggregate cells then line
+ * up under the real columns instead of sitting in a full-width strip.
+ *
+ * The grouped SOURCE columns are hidden in those modes, since their values have
+ * moved into the auto column.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnGroupingFeature,
+} from './index'
+
+type Row = { id: number; region: string; tier: string; amount: number }
+
+const data: Row[] = [
+  { id: 1, region: 'East', tier: 'Gold',   amount: 10 },
+  { id: 2, region: 'East', tier: 'Silver', amount: 5 },
+  { id: 3, region: 'West', tier: 'Gold',   amount: 7 },
+]
+
+const columns = [
+  { field: 'region', header: 'Region', width: 130 },
+  { field: 'tier',   header: 'Tier',   width: 120 },
+  { field: 'amount', header: 'Amount', width: 110, aggregate: 'sum' },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      groupable: true,
+      onApiReady: (a: never) => { api = a },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return {
+    target,
+    group: (ids: string[]) => (api as never as { setGroupBy: (i: string[]) => void }).setGroupBy(ids),
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+async function grouped(props: Record<string, unknown>, by: string[] = ['region']) {
+  const g = mountGrid(props)
+  cleanup = g.destroy
+  await tick()
+  g.group(by)
+  await tick()
+  return g
+}
+
+const headers = (t: HTMLElement) =>
+  [...t.querySelectorAll('[data-svgrid-header-col]')].map((e) => e.getAttribute('data-svgrid-header-col'))
+// Read labels from the SAME elements that carry the column id, so a gutter or
+// spacer `th` cannot shift the two lists relative to each other.
+const headerLabels = (t: HTMLElement) =>
+  [...t.querySelectorAll('[data-svgrid-header-col]')].map((e) => e.textContent?.trim() ?? '')
+const banners = (t: HTMLElement) => t.querySelectorAll('tr.sv-grid-group-row')
+
+describe('groupDisplayMode', () => {
+  it('defaults to groupRows - full-width banners, source column kept', async () => {
+    const g = await grouped({})
+    expect(banners(g.target).length).toBeGreaterThan(0)
+    expect(headers(g.target)).toContain('region')
+    expect(headers(g.target)).not.toContain('__autoGroup')
+  })
+
+  it('singleColumn adds one auto column and hides the grouped source', async () => {
+    const g = await grouped({ groupDisplayMode: 'singleColumn' })
+    const ids = headers(g.target)
+    expect(ids[0]).toBe('__autoGroup')
+    // The grouped column is folded in, so showing it too would duplicate it.
+    expect(ids).not.toContain('region')
+    expect(ids).toContain('amount')
+    // No banners - group rows render as ordinary rows now.
+    expect(banners(g.target)).toHaveLength(0)
+  })
+
+  it('singleColumn renders the group label + count with an expander', async () => {
+    const g = await grouped({ groupDisplayMode: 'singleColumn' })
+    const labels = [...g.target.querySelectorAll('.sv-grid-autogroup-label')].map((e) => e.textContent)
+    expect(labels).toEqual(['East', 'West'])
+    expect(g.target.querySelectorAll('.sv-grid-tree-toggle').length).toBe(2)
+    expect(g.target.textContent).toContain('(2)') // East has two rows
+  })
+
+  it('multipleColumns gives each grouped field its own column', async () => {
+    const g = await grouped({ groupDisplayMode: 'multipleColumns' }, ['region', 'tier'])
+    const ids = headers(g.target)
+    expect(ids.slice(0, 2)).toEqual(['__group_region', '__group_tier'])
+    expect(ids).not.toContain('region')
+    expect(ids).not.toContain('tier')
+  })
+
+  it('names the auto column after the source header', async () => {
+    const g = await grouped({ groupDisplayMode: 'multipleColumns' })
+    expect(headerLabels(g.target).some((t) => t.includes('Region'))).toBe(true)
+  })
+
+  it('honours autoGroupColumnHeader in singleColumn mode', async () => {
+    const g = await grouped({ groupDisplayMode: 'singleColumn', autoGroupColumnHeader: 'Breakdown' })
+    expect(headerLabels(g.target).some((t) => t.includes('Breakdown'))).toBe(true)
+  })
+
+  it('keeps header cells aligned with their columns', async () => {
+    // The header row indexes headers BY POSITION against the rendered columns,
+    // so a synthetic column with no engine header would shift every later
+    // header by one. Amount must still sit over Amount.
+    const g = await grouped({ groupDisplayMode: 'singleColumn' })
+    const ids = headers(g.target)
+    const labels = headerLabels(g.target)
+    expect(ids).toEqual(['__autoGroup', 'tier', 'amount'])
+    expect(labels[ids.indexOf('amount')]).toContain('Amount')
+  })
+
+  it('expands a group from the auto column', async () => {
+    const g = await grouped({ groupDisplayMode: 'singleColumn' })
+    const toggle = g.target.querySelector<HTMLButtonElement>('.sv-grid-tree-toggle')!
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    toggle.click()
+    await tick()
+    expect(g.target.querySelector('.sv-grid-tree-toggle')!.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('reverts cleanly when grouping is cleared', async () => {
+    const g = await grouped({ groupDisplayMode: 'singleColumn' })
+    expect(headers(g.target)).toContain('__autoGroup')
+    g.group([])
+    await tick()
+    const ids = headers(g.target)
+    expect(ids).not.toContain('__autoGroup')
+    expect(ids).toEqual(['region', 'tier', 'amount'])
+  })
+})

package/src/svgrid.group-footers.test.ts

@@ -0,0 +1,121 @@
+/**
+ * DOM: `groupFooters` renders a subtotal row after each group's children.
+ *
+ * The footer is a clone of the group banner, so it already carries the group's
+ * aggregate values and renders through the normal cell path - which is what puts
+ * each total under its own column instead of in a full-width strip. It must not
+ * behave like a banner: no expander, and no page budget (footers are inserted
+ * after paging).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnGroupingFeature,
+} from './index'
+
+type Row = { id: number; region: string; amount: number }
+
+const data: Row[] = [
+  { id: 1, region: 'East', amount: 10 },
+  { id: 2, region: 'East', amount: 5 },
+  { id: 3, region: 'West', amount: 7 },
+]
+
+const columns = [
+  { field: 'region', header: 'Region', width: 120 },
+  { field: 'amount', header: 'Amount', width: 100, aggregate: 'sum' },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(groupFooters: boolean) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: { setGroupBy: (ids: string[]) => void } | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      groupable: true,
+      groupFooters,
+      onApiReady: (a: never) => { api = a as never },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+    } as never,
+  })
+  return {
+    target,
+    setup: async () => {
+      await tick()
+      api?.setGroupBy(['region'])
+      await tick()
+      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
+        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
+      }
+      await tick()
+    },
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const footers = (t: HTMLElement) => [...t.querySelectorAll('tr.sv-grid-group-footer-row')]
+
+describe('groupFooters', () => {
+  it('renders nothing extra when off', async () => {
+    const g = mountGrid(false)
+    cleanup = g.destroy
+    await g.setup()
+    expect(footers(g.target)).toHaveLength(0)
+  })
+
+  it('renders one footer per group', async () => {
+    const g = mountGrid(true)
+    cleanup = g.destroy
+    await g.setup()
+    expect(footers(g.target)).toHaveLength(2)
+  })
+
+  it('carries the group aggregate under its own column', async () => {
+    const g = mountGrid(true)
+    cleanup = g.destroy
+    await g.setup()
+    // East totals 15, West totals 7 - in the Amount column, not a banner strip.
+    const text = footers(g.target).map((f) => f.textContent ?? '')
+    expect(text[0]).toContain('15')
+    expect(text[1]).toContain('7')
+  })
+
+  it('is not treated as an expandable banner', async () => {
+    const g = mountGrid(true)
+    cleanup = g.destroy
+    await g.setup()
+    for (const f of footers(g.target)) {
+      expect(f.classList.contains('sv-grid-group-row')).toBe(false)
+      expect(f.querySelector('.sv-grid-group-toggle')).toBeNull()
+    }
+  })
+})