Grouping Data

Enterprise

Introduction

The Overview showed a grid grouped by a fixed column. This page is about the grouping itself: which columns you bucket by, how to change that at runtime, and how to group by a value you derive from the row rather than a raw column.

Grouping is configured through the rowGrouping() manager. groupBy is the one required option — an ordered list of the columns to bucket by, outermost first.

Choosing what to group by

groupBy takes source column indices (for positional array data, the index into each row array) — outermost group first. Pass several to nest them:

rowGrouping({ groupBy: [2] });        // group by Region
rowGrouping({ groupBy: [2, 5] });     // Region → Status (nested)

Rows whose grouping value is null/undefined collect under a single (Blanks) header, so unbalanced data still buckets cleanly.

Changing the grouping at runtime

The manager can be re-grouped live without rebuilding the grid — ideal for a “group by” menu or drag-to-group panel:

• setGroupBy(cols) — replace the grouping columns wholesale. Pass [] to flatten back to the ungrouped rows.
• addGroup(col) — append a nesting level (no-op if already grouped).
• removeGroup(col) — drop a level.
• getGroupBy() — read the current grouping (indices, or a { col, … } spec for levels with a comparator/key getter).

Each call re-buckets the current data and re-renders; expand/collapse state resets to the expandedByDefault policy for the new tree.

Deriving the group key

By default a group’s key is the raw cell value. Supply a keyGetter on a { col, keyGetter } spec to bucket by something computed from the whole row — a numeric band, a date’s month, a name’s first letter:

rowGrouping({
  groupBy: [{ col: 3, keyGetter: (row) => (row[3] >= 150_000 ? 'Enterprise' : 'SMB') }],
});

The comparator on a spec orders the sibling groups; without one they sort numeric-then-locale.

Try it live

Choose columnsAdd / remove levelsDerived keys

CodeDemoSplit

ResetRun ⌘⏎

groupBy is a list of source column indices. The buttons call setGroupBy(...) to re-group live — try editing the initial groupBy too.

Notes

• Grouping keys are positional. With array-backed rows, groupBy and aggregations index into the row array — the same indices your columns map to.
• Runtime re-grouping resets expansion. setGroupBy / addGroup / removeGroup rebuild the tree, so groups return to the expandedByDefault state. Read the live configuration back with getGroupBy().
• keyGetter doesn’t change the column. Aggregates and the header’s col still reference the source column you named; only the bucket key is derived.
• Blanks bucket together. Missing grouping values collect under one (Blanks) header rather than scattering.

Next

• Group Display Types — group rows vs. a single group column.
• Expanding Groups — control which groups open, and react to expand/collapse.