Lattice Grid Buy a licence

demo D242

Grouping columns as you work in ESM

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 ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">

<div id="grid" style="height: 520px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.esm.min.js';

  const grid = createGrid(document.getElementById('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. With no groupId
  // each call creates a new band and returns it; pass a groupId to add to the
  // band already carrying it. The same model a saved view round-trips, so a
  // reader can still drag a heading in or out afterwards.
  grid.columns.groupColumns(['requests', 'errors', 'errorRate'], { title: 'Traffic' });
  grid.columns.groupColumns(['p50Ms', 'p95Ms', 'p99Ms'], { title: 'Latency' });
  grid.columns.groupColumns(['monthlyCost', 'budget'], { title: 'Cost' });
</script>

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