demo D73
Pivot with several value columns in htmx
Generated column groups, and what the headings do
pivot.groupTotals
This grid pivots two measures at once, so 'Revenue' and 'Units' appear together under every distinct key, with generated column groups labelling them. It answers several questions per key in one table, so you compare related figures side by side.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes, and data-id on each row is
the key the grid carries it under. -->
<table id="pivot-multi-value-table" data-lattice-grid>
<thead>
<tr>
<th data-field="account">Account</th>
<th data-field="cost">Monthly cost</th>
<th data-field="change">Change</th>
</tr>
</thead>
<tbody>
<tr data-id="1"><td>Legacy (Do Not Decommission)</td><td>31612.55</td><td>-0.0468</td></tr>
<tr data-id="2"><td>Cost Optimisation Programme</td><td>6109.09</td><td>0.1143</td></tr>
<tr data-id="3"><td>Data & Insights</td><td>42.69</td><td>0.1082</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('pivot-multi-value-table'), {
// Two value columns, so each pivot value generates a column group with a
// leaf per value column: eight environments times cost and change is
// sixteen generated columns under eight generated headings. The leaves
// name their reduction, which is what stops two adjacent columns of
// numbers from being indistinguishable.
pivot: { enabled: true, groupTotals: 'after', maxColumns: 40 },
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
columns: [
{ field: 'account', title: 'Account', filter: { type: 'set' }, group: { enabled: true, index: 0 } },
{ field: 'environment', title: 'Env', filter: { type: 'set' },
cell: { decoration: 'pill', variant: { map: {
prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
staging: 'warning', untagged: 'warning', test: 'info',
dev: 'success', 'not-prod': 'neutral',
} } },
pivot: { enabled: true, index: 0 } },
{ field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
{ field: 'change', title: 'Change', type: 'number',
layout: { width: 140, min: 140 }, format: { style: 'percent', decimals: 1 }, total: 'avg' },
],
});
</script>Pivoting several value columns at once
A single-value pivot answers one question per distinct key: revenue by region, say. A multi-value pivot answers several at once, transposing “Revenue” and “Units” together across every status or region found in the data, so each distinct key produces its own generated column group rather than a single generated column. A developer reaches for this once a report needs more than one measure per pivoted key, such as a finance grid showing both an amount and a count for every quarter, without hand-building a separate pivot for each. Lattice Grid controls the heading structure for this case with pivot.groupTotals, which decides whether each generated group carries its own subtotal column alongside the per-value columns, or whether the totals stay out of the generated groups entirely. Because this is a JavaScript data grid that reduces incrementally rather than rescanning, a row arriving on a live feed updates only the pivoted cells its key and values touch, not the whole transposed table. The generated column groups behave like any other column group for sizing, visibility and export, so a wide pivot with many keys still virtualises horizontally and only renders the columns in the current viewport.
How do I pivot on more than one value column?
Pass more than one field to the value side of the pivot configuration and Lattice Grid generates a column group per distinct key, containing one column for each value alongside the pivoted dimension. Use pivot.groupTotals to decide whether each generated group also gets its own subtotal, matching how the equivalent single-value pivot handles totals.