mates-grid

Tree Data

Supply getDataPath instead of rowGroup columns. Parents aggregate children. Indentation and expand state follow the path.

Region / team / person

Each row carries a path array. The auto group column becomes the tree.

Organisation

Name

Status

People

Amount

EMEA (8)

$1,828

Engineering (8)

$1,828

APAC (8)

$1,644

Support (8)

$1,644

Americas (8)

$1,940

Sales (8)

$1,940

Grand Total

$5,412

gridAtom({
  treeData: true,
  getDataPath: (row) => row.path,
  autoGroupColumnDef: { headerName: "Organisation", width: 310 },
  data: [
    { id: 1, name: "Ada", path: ["EMEA", "Engineering", "Ada Lovelace"] },
  ],
});