@svgrid/grid 2.7.0 → 3.0.1

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

@@ -1,171 +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'])
-  })
-})
+/**
+ * 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

@@ -1,121 +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()
-    }
-  })
-})
+/**
+ * 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()
+    }
+  })
+})