Lattice Grid Buy a licence

demo D242

Grouping columns as you work

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

grid.columns.groupColumns · Ctrl+Shift+Arrow

Building…
Loading a live grid…

The configuration

'group-columns-live': () => ({
  rows: wide(5_000),
  config: {
    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' } },
    ],
  },
  foot: ['bands formed through grid.columns at runtime', 'regroup from the keyboard: Ctrl+Shift+Left or Right to join, Ctrl+Shift+Up to lift out, Alt+Shift+Left or Right to move a band', 'the same model a saved view round-trips'],
  onGrid: (grid: any) => {
    const cols = grid?.columns;
    if (cols && typeof cols.groupColumns === 'function') {
      cols.groupColumns(['requests', 'errors', 'errorRate'], { title: 'Traffic', groupId: 'g-traffic' });
      cols.groupColumns(['p50Ms', 'p95Ms', 'p99Ms'], { title: 'Latency', groupId: 'g-latency' });
      cols.groupColumns(['monthlyCost', 'budget'], { title: 'Cost', groupId: 'g-cost' });
    }
  },
})

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.

Every action 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