Grouping & pivot

Server-side grouping

Show groups summarised on the server, and load each group's rows only when it is expanded.

When the data is grouped on the server, or is too large to send up front, give the grid the group summaries (lazyGroups) and a function that loads a group’s rows (loadGroup). The grid shows the groups at once, with the counts and totals the server sent, and fetches a group’s rows the first time it is opened.

Expand a region: a loading row shows while its orders arrive, then they stay loaded.

ServerGroups.svelte Open GitHub ↗

Group summaries and loading

<script lang="ts">
  import { Grid, type LazyGroup } from 'bo-grid';

  const lazyGroups: LazyGroup[] = [
    { key: 'North America', count: 142, agg: { amount: '$2.4M' } },
    { key: 'Europe', count: 98, agg: { amount: '$1.8M' } },
  ];
  const loadGroup = (key: string) => fetch(`/api/orders?region=${encodeURIComponent(key)}`).then((r) => r.json());
</script>

<Grid rows={[]} {columns} height={520} {lazyGroups} {loadGroup} />

Each LazyGroup has:

Field	Meaning
`key`	The group’s id, passed to `loadGroup`
`label`	The header text (defaults to `key`)
`count`	The row count shown on the header
`agg`	Preformatted totals by column key, shown on the header under that column

loadGroup(key) returns a promise of the group’s rows. While it runs the group shows a loading row; the rows are kept once loaded, so closing and reopening a group does not fetch again.

The totals come from the server as strings, already formatted, because the grid has not seen the rows they sum. For groups computed in the browser from rows you already have, use Row grouping.

Reference

Grid props from the types

lazyGroups LazyGroup[] Default undefined

Server-side grouping: top-level group summaries (header data, no leaf rows). Each group's rows load on expand via loadGroup. In-memory mode.

Example

<Grid rows={[]} {columns} height={480}
  lazyGroups={[{ key: 'HOSE', count: 412 }, { key: 'HNX', count: 330 }]}
  loadGroup={(key) => fetch(`/api/board/${key}`).then((r) => r.json())} />

loadGroup (key: string) => Promise<GridRow[]>

Load a lazy group's leaf rows on expand (returns a promise; shows a loading row, then caches). Required with lazyGroups.

Example

<Grid rows={[]} {columns} height={480} {lazyGroups} loadGroup={(key) => loadExchange(key)} />