demo D72
Pivot
Transposing values across distinct keys, with a column guard
columns.pivot(['status'])
The configuration
<script>
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/svelte.esm.min.js';
const lattice = createLatticeAction({ createGrid });
const config = {
rowKey: 'id',
// Accounts run down the side, environments across the top, and each cell
// holds that account's summed cost in that environment. maxColumns caps how
// many columns a pivot may generate: past it the grid shows the rows
// unpivoted rather than building a table too wide to read.
pivot: { enabled: true, maxColumns: 24 },
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' }, pivot: { enabled: true, index: 0 } },
{ field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
],
// With one value column, each generated heading is titled with its pivot
// value alone, so the headings read as the environment names.
showTotalInHeader: true,
rows, // cloud cost rows, one object per resource
};
</script>
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
</svelte:head>
<div use:lattice={config} style="height: 540px"></div>Turning row values into columns with a pivot table
A pivot transposes data: instead of one row per record, distinct values in a chosen field become the columns themselves, and each cell holds the aggregated figure for that combination, such as revenue by product down the rows and by quarter across the top. A developer reaches for this once a flat table stops answering the question directly, typically when a stakeholder wants a cross-tabulation rather than a list, or when a report needs the same underlying rows read two ways without a second dataset. This demo builds that structure through columns.pivot(['status']), an array of field names whose distinct values become the pivoted column set, with a guard that caps the number of generated columns so a field with high cardinality cannot silently produce hundreds of them. Because Lattice Grid is a JavaScript data grid built on virtual scrolling and incremental aggregation rather than server round trips, the pivot recalculates from the same per-column total definitions used elsewhere in the grid, so a sum defined once for grouping or the grand total row is reused here without a separate formula. Pivoted headers carry the same column semantics as any other, including sort and resize, so the transposed view behaves like a normal grid rather than a static export.
How do I create a pivot table in a JavaScript data grid?
Call columns.pivot() with an array of field names whose values should become columns, for example columns.pivot(['status']) to spread each distinct status into its own column. Lattice Grid aggregates the existing per-column totals into each generated cell and applies a column guard that limits how many columns a high-cardinality field can produce.