Column Groups

{ name: 'Employee', children: [
  { name: 'Identity', children: [ …First name, Surname… ] },
  { name: 'Contact',  children: [ …Email, Phone… ] },
] }

What a group is

[columns] accepts ColumnOrGroup<T>[] — leaf columns, groups, or both in any order. A group is an object with a children array and a name for its spanner label; a child can be another group, so the nesting goes as deep as your data does. Every header row and every span is derived from that one array.

Nothing about a group reaches the rows. Cells, sorting, filtering, editing and export all see the leaf columns exactly as they would if the groups were not there — which is why grouping can be added to an existing grid without touching anything else.

Collapsible groups

columnGroupShow on a child is what makes its parent collapsible. Give at least one child 'open' or 'closed' and a chevron appears on the spanner; leave every child without it and the group is a static header.

• 'open' — shown while the group is expanded.
• 'closed' — shown while the group is collapsed. The usual use is one compact summary column standing in for several detail ones.
• 'everywhere' or unset — always shown.

openByDefault is true unless you say otherwise, so a collapsible group starts expanded and openByDefault: false is the line that starts one closed. A nested group can carry its own columnGroupShow as well, and then it appears or disappears with its parent's state.

Always leave a collapsible group something to show in each state — a 'closed' child, or one with no columnGroupShow at all. A group's spanner is drawn over its visible columns, so a group whose children are all 'open' would lose its header along with them the moment it collapsed. Rather than let that happen, the grid declines the toggle: no chevron, every child visible, and a dev-mode console message naming the group. The same applies to all-'closed' children, which would be missing while the group is open.

Resizing a group

With config.columnResize on, a group's trailing header edge is a resize handle for every visible column inside it: the delta is distributed proportionally and each child is clamped to its own minWidth/maxWidth. A child with resizable: false keeps its width and is left out of the distribution. Set resizable: false on the group to lock only the group-level edge — the children keep their own handles.

Keeping a group together

marryChildren: true asks the grid to keep a group's columns adjacent while the reader drags one of them, so a reorder cannot leave a hole in the middle of a group. It is best-effort rather than a hard lock.

The label while scrolling

A group wider than the viewport would otherwise lose its label off the leading edge, so by default the label is pinned there (after any pinned columns) for as long as one of the group's columns is visible. stickyLabel: false turns that off per group.