demo D73
Pivot with several value columns
Generated column groups, and what the headings do
pivot.groupTotals
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',
/*
* 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.groupTotals` is accepted and does nothing in 1.4.0: 'before',
* 'after' and false produce identical headings and identical cells, and
* no per-group total column is generated either way.
*/
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' },
],
rows, // cloud cost rows, one object per resource
});
</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.