Lattice Grid Buy a licence

demo D242

Grouping columns as you work in React

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 React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

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

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const 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' } },
  ];

  const 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.
  const onGridReady = (grid) => {
    grid.columns.groupColumns(['requests', 'errors', 'errorRate'], { title: 'Traffic' });
    grid.columns.groupColumns(['p50Ms', 'p95Ms', 'p99Ms'], { title: 'Latency' });
    grid.columns.groupColumns(['monthlyCost', 'budget'], { title: 'Cost' });
  };

  function App() {
    return (
      <LatticeGrid rowKey="id" columns={columns} rows={rows} onGridReady={onGridReady} style={{ height: '520px' }} />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</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