Multi-level headers

Use a shared heading for related columns such as delivery country, city, and address. Parent and individual headings appear across two or more rows.

Integration steps

1. Choose columns to group

   For example, group product and quantity under Order details. The current preview has a single header; add the group to your app's column definitions.

2. Create a parent heading

   Add a columnDefs entry with headerName set to Order details and place product and quantity columns in its children array.

3. Inspect the expanded result

   Pass the new columnDefs array to the Grid. Product and quantity appear beneath the parent heading, with sorting and resizing available on each column.

Distinguish a parent group's name from the columns that read actual data. The product column's field remains product.

Useful terms

children

The child columns contained within a parent header.

groupId

A unique name identifying a header group.

Key API examples

Application code that references the registered Grid element as grid.

grid.columnDefs = [{ headerName: 'Order', groupId: 'order', children: [
  {field:'product', headerName:'Product'},
  {field:'quantity', headerName:'Quantity'}
]}];