Lattice Grid Buy a licence

demo D08

Column groups

Nested headers, collapsible, deciding which children survive a collapse

columnGroups · showWhen

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

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

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
      {
        title: 'Traffic',
        collapsible: true,
        columns: [
          { field: 'requests', title: 'Requests', type: 'number', format: { notation: 'compact' } },
          { field: 'errors', title: 'Errors', type: 'number', showWhen: 'open' },
          { field: 'errorRate', title: 'Rate', type: 'number', format: { style: 'percent', decimals: 2 } },
        ],
      },
      {
        title: 'Latency',
        collapsible: true,
        columns: [
          { field: 'p50Ms', title: 'p50', type: 'number', showWhen: 'open' },
          { field: 'p95Ms', title: 'p95', type: 'number' },
          { field: 'p99Ms', title: 'p99', type: 'number', showWhen: 'open' },
        ],
      },
      {
        title: 'Cost',
        collapsible: true,
        columns: [
          { field: 'monthlyCost', title: 'Spend', type: 'number', format: { style: 'currency', currency: 'USD' } },
          { field: 'budget', title: 'Budget', type: 'number', format: { style: 'currency', currency: 'USD' }, showWhen: 'open' },
        ],
      },
    ],
    rows,  // 5,000 service records
  });
</script>

Nesting headers into column groups in a JavaScript data grid

A column group ties several related columns under one shared header, so “Q1 Revenue”, “Q1 Costs” and “Q1 Margin” sit beneath a single “Q1” band rather than repeating a prefix in three separate labels. Reach for this whenever a dataset has a natural hierarchy, such as a period broken into metrics or an address broken into fields, and a flat header row would force the relationship into the column names instead of the layout. This demo declares that hierarchy through columnGroups, an array of group definitions each holding the child columns it owns, and each group can be marked collapsible so a user folds “Q1” down to a single summary column and expands it again without losing the underlying data or its sort order.

showWhen controls which children remain visible once a group collapses, letting a group collapse to one representative column (a total, say) instead of disappearing entirely. Header cells for a group span the full width of their children and carry aria-colspan so a screen reader announces the grouping rather than reading disconnected single-column headers. Collapsing and expanding a group only reflows the header row and the affected columns; rows outside the visible viewport are not touched, so the operation stays independent of how many records the grid holds.

How do you group columns under a shared header in a JavaScript data grid?

Define a columnGroups array where each entry lists the child column IDs it contains and a group header label. Add showWhen to an entry to name which children stay visible when the group is collapsed, and mark the group collapsible to let users toggle between the full set of children and that reduced view.

Related demos