demo D17
Custom headers
A header rendering a sparkline, a filter chip or a unit toggle
column.header.render
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',
components: {
unitToggle: class {
render() {
const b = document.createElement('button');
b.type = 'button';
b.textContent = 'GB / TB';
return b;
}
},
},
columns: [
{ field: 'service', title: 'Service', layout: { width: 160 } },
{ field: 'requests', title: 'Requests', type: 'number', header: { template: '{{title}} ▲' } },
{ field: 'memoryGb', title: 'Memory', type: 'number', header: { render: 'unitToggle' } },
{ field: 'errorRate', title: 'Error rate', type: 'number', header: { class: 'demo-probe-header' } },
],
rows, // 3,000 service records
});
</script>Rendering sparklines, filter chips and unit toggles in a column header
A custom header replaces the default label-and-sort-arrow cell with a rendering function, so the header itself carries information rather than only naming the column beneath it. Reach for this when a header needs to show a sparkline for the column’s distribution, a chip reflecting an active filter, or a control that toggles the unit a column displays, such as switching a price column between currency and percentage without a separate settings panel. Lattice Grid exposes this through column.header.render, a function that receives the column definition and returns the header’s contents, so the sort click target, resize handle and keyboard focus ring stay in place around whatever markup that function produces.
Because the render function runs once per header cell rather than per row, a sparkline or a filter chip in a header costs nothing extra as row count grows in this JavaScript data grid; the expense scales with column count, not with the million rows that might sit beneath it. The generated header retains role="columnheader" and aria-sort on the underlying element regardless of what column.header.render draws inside it, so a screen reader still announces sort direction correctly even when the visible label has been replaced by a chip or a small chart. Custom headers compose with column groups and pinned columns without extra wiring.
How do you customise a column header in a JavaScript data grid?
Set column.header.render to a function that returns the header cell’s contents, such as a sparkline, a filter chip or a unit toggle. Lattice Grid keeps the sort control, resize handle and aria-sort attribute on the surrounding header element, so custom content sits inside the grid’s existing interaction and accessibility handling rather than replacing it.