demo D15
Column spanning
A cell covering several columns, in its own layer so recycling cannot clip it
cell.spanColumns
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: 'region', title: 'Region', layout: { width: 140 } },
{ field: 'service', title: 'Service', layout: { width: 160 } },
{
field: 'note', title: 'Note',
layout: { width: 200 },
// A row with a note is carrying a sentence, not a field. It runs
// across the three remaining columns; a row without one leaves them
// alone and the window and owner cells paint as normal.
cell: { spanColumns: (p) => (p.value ? 3 : 1) },
},
{ field: 'window', title: 'Window', layout: { width: 150 } },
{ field: 'owner', title: 'Owner', layout: { width: 150 } },
{ field: 'cost', title: 'Cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
],
rows, // 400 rows in region runs, some carrying a note
});
</script>Merging cells across columns in a JavaScript data grid
Column spanning lets a single cell stretch across several columns instead of staying confined to the one it was defined in, so a section label, a merged total, or a note covering a run of fields can occupy the width it needs. Reach for this whenever a row mixes structured data with something that belongs to no single column, such as a divider between grouped sections or a summary cell that should read across the fields it totals rather than sitting cramped in the first of them. Lattice Grid controls this through cell.spanColumns, set per cell so the decision to span is made row by row rather than fixed at the column definition, and the spanned cell renders on its own layer above the grid so column recycling during horizontal scroll cannot clip or truncate it mid-scroll.
The spanning cell’s width recalculates whenever the columns it covers are resized or reordered, without a manual redraw call, and only cells in the visible row range are evaluated for a span, so checking spanColumns costs nothing proportional to total row count under virtual scrolling. Screen readers encounter the spanned cell as one cell with a colspan attribute matching the number of columns it covers, so the merge is announced correctly rather than as a run of empty cells.
How do you merge cells across columns in a JavaScript data grid?
Set cell.spanColumns on the cell definition to the number of columns it should cover. Lattice Grid renders that cell on a separate layer so column virtualisation does not clip it, recalculates its width when the spanned columns resize or reorder, and exposes the merge to assistive technology through a matching colspan.