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.27.0/lattice-grid.min.css">
<div id="grid"></div>
<script type="module">
import React from 'https://esm.sh/react@18';
import { createRoot } from 'https://esm.sh/react-dom@18/client';
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/react.esm.min.js';
const LatticeGrid = createLatticeGrid({ React, createGrid });
const 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' },
];
const rows = [/* cloud cost rows, one object per resource */];
function App() {
return (
<LatticeGrid
rowKey="id"
// Two value columns, so each pivot value generates a column group with a
// leaf per value column: eight environments across cost and change is
// sixteen generated columns under eight generated headings. The leaves
// name their reduction, so two adjacent columns of numbers stay
// distinguishable.
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={columns}
rows={rows}
style={{ height: '540px' }}
/>
);
}
createRoot(document.getElementById('grid')).render(<App />);
</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.