angular data grid · row grouping

Angular Grid: Row Grouping

Nest rows by account, then by service inside it, and every group carries its own subtotal. Grouping, sorting and filtering compose: a filter narrows the rows inside every group rather than replacing the grouping.

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

cloud-costs.component.ts

// cloud-costs.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';

// group nests by account, then by service inside it, in the order given by
// index. showTotalInHeader puts each group's own reduction on its heading
// row, so the "Monthly cost" heading names its group's total, not just the
// column.
const COLUMNS = [
  { field: 'account', title: 'Account', filter: { type: 'set' }, group: { enabled: true, index: 0 } },
  { field: 'service', title: 'Service', filter: { type: 'set' }, group: { enabled: true, index: 1 } },
  { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
  { field: 'environment', title: 'Env', filter: { type: 'set' },
    cell: { decoration: 'pill', variant: { map: {
      prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
      staging: 'warning', untagged: 'warning', test: 'info',
      dev: 'success', 'not-prod': 'neutral',
    } } } },
  { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
    format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
];

@Component({
  selector: 'app-cloud-costs',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="config" style="display:block;height:480px"></lattice-grid>',
})
export class CloudCostsComponent {
  config = {
    rowKey: 'id',
    selection: 'multiple',
    showTotalInHeader: true,
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
    columns: COLUMNS,
    rows: [] as unknown[], // 10,000 cloud cost records
  };
}

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

See it running

Building…

Loading a live grid…

Open this demo's Angular tab →

Working in Angular

Grouping is column configuration, not extra template. There is no separate "group row" element to add: group.index on a column is the whole configuration, and the grid draws the nested headers and footers itself inside <lattice-grid>.

config is compared by identity. Hold it in a field, as above, rather than an inline object literal in the template; the latter is a new object on every change-detection pass and reconfigures grouping every time.

Group state survives change detection. Expanding or collapsing a group is grid state, held by the instance, so a host re-rendering for an unrelated reason does not collapse what a reader already opened.

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