Tree Data (Nested Rows) in Apex Grid

The Apex grid renders nested rows from a flat data array by deriving hierarchy from a user-supplied getDataPath(row) callback. This is the same "tree data" pattern used by AG Grid: rows themselves are flat, but each row's path describes where it sits in the tree.

When tree mode is active, the first visible data column (or one explicitly named via groupColumnKey) renders a chevron toggle and depth-based indentation. The host element advertises role="treegrid" for accessibility tooling.

Enabling tree data

grid.tree = {
  enabled: true,
  getDataPath: (row) => row.path,        // e.g. ['Adrian', 'Bryan']
  defaultExpanded: 1,                    // boolean | number — depth
  groupColumnKey: 'name',
  childIndent: 20,
};

Configuration

The TreeConfiguration object accepts:

type TreeConfiguration<T> = {
  enabled: boolean;
  getDataPath: (row: T) => string[];
  defaultExpanded?: boolean | number;
  groupColumnKey?: keyof T;
  childIndent?: number;
};
  • getDataPath returns the row's hierarchy as a string array. The last element is the row's own identifier; the preceding elements are its ancestors.
  • defaultExpanded controls the initial state. Pass true to expand everything, false (default) to start fully collapsed, or a number to expand up to that depth.
  • groupColumnKey designates which column renders the chevron and indentation. If omitted, the first visible data column is used.
  • childIndent is the per-depth left padding applied to the group column (default 20).

Programmatic API

await grid.toggleTreeRow(row);
await grid.expandTreeRow(row);
await grid.collapseTreeRow(row);
await grid.expandAllTreeRows();
await grid.collapseAllTreeRows();
const isOpen = grid.isTreeRowExpanded(row);

Events

  • treeRowExpanding — cancellable; fires before a tree row toggles open.
  • treeRowExpanded — fires after the row's expanded state changes.

Tree data vs. row expansion

Tree data renders nested rows that share the column layout of their parent. Use row expansion instead when you want to show an arbitrary detail panel (a different layout, a chart, a form) under a row.