angular data grid · tree data

Angular Grid: Tree Data

A hierarchy needs one thing from your data: each row naming its own parent. The grid builds the expander column, the indent and the totals from that reference, so you configure a tree the same way you configure any other column.

Also in: React

Install and import

npm install @toclocoinc/lattice-grid
# free on localhost; a production domain needs a licence key (see /pricing/)

The file

estate.component.ts

// estate.component.ts
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

// Every node is a real row naming its own parent. The grid generates the
// tree column itself: the expander, the indent and the shown name all come
// from "label", so "name" is deliberately not declared as a column below.
const TREE = { parentKey: 'parentId', label: 'name', title: 'Estate' };

const COLUMNS = [
  { field: 'kind', title: 'Level', filter: { type: 'set' }, layout: { width: 120 } },
  {
    field: 'status', title: 'Status', filter: { type: 'set' }, layout: { width: 140 },
    cell: { decoration: 'pill', variant: { map: { live: 'success', provisioning: 'info', ceased: 'neutral' } } },
  },
  { field: 'devices', title: 'Devices', type: 'number', total: 'sum', layout: { width: 120 } },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP', decimals: 0 }, total: 'sum', layout: { width: 180 } },
];

@Component({
  selector: 'app-estate',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="config" style="display:block;height:480px"></lattice-grid>',
})
export class EstateComponent {
  config = {
    rowKey: 'id',
    selection: 'multiple',
    grandTotalRow: 'bottom',
    tree: TREE,
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
    columns: COLUMNS,
    rows: [] as unknown[], // estate nodes, each naming its parent
  };
}

bootstrapApplication(EstateComponent, {
  providers: [provideLattice({ createGrid })],
});

See it running

Building…

Loading a live grid…

Open this demo's Angular tab →

Working in Angular

The label field is not a column. tree.label names the field the tree column shows; declaring that same field again in columns would draw it twice, so leave it out of the array and let the tree configuration own it.

Totals roll up the hierarchy. grandTotalRow and a column's own total both read the whole tree, not just the rows a reader has expanded, so a collapsed branch still contributes to the figure above it.

Expand and collapse state lives on the instance, not as a component field, so it survives a host re-render the same way group state does.

Read the docs Angular data grid overview Free on localhost. See pricing.