Lattice Grid Buy a licence

demo D242

Grouping columns as you work in Angular

Form, rename, move and dissolve banded headers at runtime, by drag, by keyboard or through the model

grid.columns.groupColumns · Ctrl+Shift+Arrow

This grid lets you form, rename, move and dissolve banded column headers while you work, by drag, by keyboard or through the model. It lets a reader shape the header to the question in front of them, pulling related columns together on the spot rather than only at build time.

Building…
Loading a live grid…

This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" (grid-ready)="onGridReady($event)" style="display:block;height:520px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
      { field: 'requests', title: 'Requests', type: 'number', format: { notation: 'compact' } },
      { field: 'errors', title: 'Errors', type: 'number' },
      { field: 'errorRate', title: 'Rate', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'p50Ms', title: 'p50', type: 'number' },
      { field: 'p95Ms', title: 'p95', type: 'number' },
      { field: 'p99Ms', title: 'p99', type: 'number' },
      { field: 'monthlyCost', title: 'Spend', type: 'number', format: { style: 'currency', currency: 'USD' } },
      { field: 'budget', title: 'Budget', type: 'number', format: { style: 'currency', currency: 'USD' } },
    ],
    rows: [/* service metrics: service, requests, errors, errorRate, p50Ms, p95Ms, p99Ms, monthlyCost, budget */],
  };

  // The runtime equivalent of dragging these headings together, once the
  // grid reports it is ready.
  onGridReady(grid: any) {
    grid.columns.groupColumns(['requests', 'errors', 'errorRate'], { title: 'Traffic' });
    grid.columns.groupColumns(['p50Ms', 'p95Ms', 'p99Ms'], { title: 'Latency' });
    grid.columns.groupColumns(['monthlyCost', 'budget'], { title: 'Cost' });
  }
}

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

Forming banded headers as you work

Column groups tie related columns under one shared header. This demo forms those bands at runtime rather than declaring them ahead of time, so a reader can shape the header to the question in front of them: pull the traffic metrics under one band, the latency percentiles under another, and dissolve either when it stops being useful. Grouping, renaming, moving and dissolving a band all run through the grid’s column model, and the result is the same banded header a static configuration would produce, so it round-trips through a saved view like any other layout.

To band two columns, drag one header onto the middle of another and they join under a shared header. Every action also has a keyboard equivalent, so grouping is never drag-only. From a focused header, join a column to its neighbour, lift a column out of its band, or slide a whole band along, all from the keys. Whether a band came from a drag, from the keyboard or from a call in your own code, it is one state rather than three, which keeps a JavaScript data grid that lets people rearrange their own columns predictable to build on.

Can users create column groups at runtime in a data grid?

Yes. Lattice Grid forms, renames, moves and dissolves banded headers at runtime through its column model, by drag or from the keyboard, and a band made by interaction is the same group a static configuration declares. Because it is one model, a runtime band round-trips through a saved view alongside the rest of the layout.

Related demos