bc-grid
GitHub

Grouping

View source

Pull rows under one or more group rows. Each group renders a sticky parent row with an aggregation footer; expand/collapse with the chevron or keyboard.

Group by
Order #
Customer
Region
Status
Sales rep
Amount
Total
9675697.170000011

Try this

Toggle the group field with the buttons above the grid. Off renders the flat list.

  • Click the chevron on a group row to expand or collapse.
  • The Amount column shows a per-group sum because of aggregation: "sum".
  • Group → Region → Status to nest two levels: pass an array.
  • Sort still works inside groups; sort headers reorder rows within each group.

How grouping works

  • Declarative. Pass groupBy as an array of column IDs. Each level renders a parent row with chevron + count + aggregation summary.
  • Aggregations follow. Set aggregation: "sum" | "count" | "avg" | "min" | "max" on a column. The group row shows the per-group rollup; the footer row shows the grand total. Custom aggregations register via useAggregations.
  • Group-then-paginate. For server-paged grids, server-side groups respect the page size and pagination chrome stays group-aware.
  • Tree row model overlap. Grouping is for flat data with shared keys. For real parent-child data (nested rows with stable identities) use the tree row model — see the "Tree row model" page.