Tree data

Tree data represents real hierarchical records rather than value buckets. Real parent rows remain data-bearing, selectable, editable, sortable, and filterable.

Loading interactive example…

React

React

<Grid
  rowIdKey="id"
  rowData={rows}
  columnDefs={columns}
  groupDefaultExpanded={2}
  treeData={{
    mode: "parent",
    getParentId: (row) => row.parentId,
    getLabel: (row) => row.name,
    columnDef: { label: "Workspace", width: 260 },
  }}
/>

Angular

Angular

treeData = {
  mode: "parent" as const,
  getParentId: (row: Item) => row.parentId,
  getLabel: (row: Item) => row.name,
  columnDef: { label: "Workspace", width: 260 },
};

<awb-grid
  rowIdKey="id"
  [rowData]="rows"
  [columnDefs]="columns"
  [treeData]="treeData"
/>

Core TypeScript

Framework-neutral

const core = new GridCore(measurer, {
  rowIdKey: "id",
  columnDefs,
  groupDefaultExpanded: 2,
  treeData: {
    mode: "parent",
    getParentId: (row) => row.parentId,
    getLabel: (row) => row.name,
    columnDef: { label: "Workspace", width: 260 },
  },
});

Relationship modes

Mode	Supply
path	getPath(row) returning the complete hierarchy path
parent	Stable IDs plus getParentId(row)
children	Root objects plus getChildren(row)

All modes support ancestor-preserving filtering, sibling sorting, saved expansion, sticky ancestors, selection, editing, and export. A generated hierarchy column can be configured through treeData.columnDef.

// Paths
const pathOptions = {
  rowIdKey: "id",
  treeData: { mode: "path", getPath: (row) => row.path },
} satisfies GridOptions;
// rows: [{ id: "paris", path: ["World", "Europe", "France", "Paris"] }]

// Parent IDs
const parentOptions = {
  rowIdKey: "id",
  treeData: {
    mode: "parent",
    getParentId: (row) => row.parentId,
    getLabel: (row) => row.name,
    columnDef: { label: "Organization", width: 280 },
  },
} satisfies GridOptions;

// Nested children
const childrenOptions = {
  rowIdKey: "id",
  treeData: {
    mode: "children",
    getChildren: (row) => row.children,
    getLabel: (row) => row.name,
  },
} satisfies GridOptions;

Keyboard navigation

Tree navigation defaults to ordinary grid behavior. Hierarchy mode maps Ctrl/Cmd+Right to expand and Ctrl/Cmd+Left to collapse or move to the parent. Applications may allow users to switch modes at runtime:

const options = {
  treeData: {
    mode: "parent",
    getParentId: (row) => row.parentId,
    keyboardNavigationMode: "hierarchy",
    enableKeyboardNavigationModeSwitch: true,
  },
} satisfies GridOptions;

api.setKeyboardNavigationMode("grid");
// Both fields are also reconfigurable after mount (the rest of `treeData` is not):
api.setTreeDataKeyboardNavigationOptions({ enableKeyboardNavigationModeSwitch: false });

note

Tree data is client-side and cannot be combined with value-based row grouping.