@svgrid/grid 2.2.31 → 2.2.33

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()
+    }
+  })
+})

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

@@ -0,0 +1,153 @@
+/**
+ * DOM: with grouping on, `pageSize` budgets DATA rows, not group banners (#73).
+ *
+ * The row model hands the view one flat list with group banners interleaved
+ * between their children. Slicing that list by `pageSize` spent the budget on
+ * banners: ten groups of two at `pageSize: 10` showed roughly three data rows,
+ * and with enough small groups a page could show almost none.
+ *
+ * Now the page window is measured in data rows, and each page reprints the
+ * banners its rows sit under - so a group split across a page boundary is
+ * labelled on both pages.
+ */
+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 }
+
+// Ten groups of two rows - the shape from the report.
+const data: Row[] = []
+for (let g = 0; g < 10; g += 1) {
+  data.push({ id: g * 2, region: `R${g}`, amount: 1 })
+  data.push({ id: g * 2 + 1, region: `R${g}`, amount: 2 })
+}
+
+const columns = [
+  { field: 'region', header: 'Region', width: 120 },
+  { field: 'amount', header: 'Amount', width: 100 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(pageSize: number, groupFooters = false) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  // Grouping state starts empty and is driven through the api - there is no
+  // initial-grouping prop - so group by region as soon as the api lands.
+  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 },
+      pageable: true,
+      pageSize,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 900,
+      virtualization: false,
+    } as never,
+  })
+  return {
+    target,
+    groupByRegion: () => api?.setGroupBy(['region']),
+    /** Groups render collapsed by default; click every banner to open them. */
+    expandAll: () => {
+      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
+        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
+      }
+    },
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const dataRows = (t: HTMLElement) =>
+  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
+    (r) => !r.classList.contains('sv-grid-group-row') && !r.classList.contains('sv-grid-row-spacer'),
+  )
+const groupRows = (t: HTMLElement) => [...t.querySelectorAll('tbody tr.sv-grid-group-row')]
+
+async function grouped(pageSize: number, expand = true, groupFooters = false) {
+  const g = mountGrid(pageSize, groupFooters)
+  cleanup = g.destroy
+  await tick()
+  g.groupByRegion()
+  await tick()
+  if (expand) {
+    g.expandAll()
+    await tick()
+  }
+  return g
+}
+
+describe('grouped pagination (#73)', () => {
+  it('fills the page with pageSize DATA rows, not banners', async () => {
+    const { target } = await grouped(10)
+    // Before the fix the flat slice returned 10 TOTAL rows - banners included -
+    // so only a handful of them were data.
+    expect(dataRows(target)).toHaveLength(10)
+    // Those 10 data rows span 5 groups, so 5 banners come along for free.
+    expect(groupRows(target)).toHaveLength(5)
+  })
+
+  it('reports the data-row count in the pager, not banners + data', async () => {
+    const { target } = await grouped(10)
+    // 20 data rows at pageSize 10 = 2 pages. Counting banners would say 30.
+    expect(target.textContent).toMatch(/of\s+20\b/)
+  })
+
+  it('reprints the banner for a group straddling a page boundary', async () => {
+    const { target } = await grouped(3)
+    // Page 0 holds R0's two rows plus R1's first, so both banners show.
+    const labels = groupRows(target).map((r) => r.textContent ?? '')
+    expect(labels.some((t) => t.includes('R0'))).toBe(true)
+    expect(labels.some((t) => t.includes('R1'))).toBe(true)
+    expect(dataRows(target)).toHaveLength(3)
+  })
+
+  it('does not spend page budget on group footers', async () => {
+    // Footers are inserted after paging, so turning them on must not push data
+    // rows onto the next page.
+    const { target } = await grouped(10, true, true)
+    expect(dataRows(target).filter((r) => !r.classList.contains('sv-grid-group-footer-row')))
+      .toHaveLength(10)
+    expect(target.textContent).toMatch(/of\s+20\b/)
+  })
+
+  it('still fills a page when every group is collapsed', async () => {
+    // Collapsed groups are the visible unit. Treating them as free headers
+    // emptied the page entirely - caught here, not by the pure helper.
+    const { target } = await grouped(4, false)
+    expect(groupRows(target)).toHaveLength(4)
+    expect(dataRows(target)).toHaveLength(0)
+    // 10 collapsed groups over pageSize 4.
+    expect(target.textContent).toMatch(/of\s+10\b/)
+  })
+})