Skip to main content

Column groups

Nest children to create multi-row headers. Groups may be nested to any depth, and leaf columns keep their ordinary pinning, filtering, sizing, and state.

Loading interactive example…
React
const columns: ReactColDef[] = [{
  label: "Revenue",
  openByDefault: true,
  children: [
    { key: "revenue", label: "Gross" },
    { key: "margin", label: "Margin", columnGroupShow: "open" },
  ],
}];

<Grid rowData={rows} columnDefs={columns} />

Nested column groups​

const columnDefs: ColDef[] = [
  {
    label: "Customer",
    openByDefault: true,
    children: [
      { key: "firstName", label: "First name", columnGroupShow: "open" },
      { key: "lastName", label: "Last name" },
    ],
  },
  {
    label: "Order",
    children: [
      { key: "total", label: "Total", type: ColumnType.CURRENCY },
      { key: "status", label: "Status" },
    ],
  },
];

The group chevron expands/collapses children. Nested groups may be used at more than one level.

Expansion​

openByDefault controls a group's initial state. A leaf with columnGroupShow: "open" is visible only while its parent is expanded; "closed" provides the inverse behavior. Manually hidden active leaves remain hidden when the group state changes. A group renders its expander only when its children mix columnGroupShow values — a group whose children all toggle together has nothing to expand.

Groups also appear as collapsible branches in the column panel. Searching a group name reveals its descendants, while reordering remains constrained to a valid hierarchy.

Pinned boundaries

A group can contain leaves in different pinned sections, but cell spans and drag targets never cross a pinned-section boundary.