demo D240
The grid as a pivot table
One field down, one across, a measure summed at every crossing, with subtotals that match the grid and a cell drill
pivotView · pivot:drill
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/lattice-grid.min.css">
<div id="grid" style="height: 540px"></div>
<script type="module">
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/modules/htmx.esm.js';
// The same grid presented as a cross-tab. pivotView turns the table into a
// matrix; group() picks the row axis, pivot() the column axis, and the amount
// column's reduction fills every cell.
const grid = createGrid(document.getElementById('grid'), {
rowKey: 'id',
pivotView: true,
columns: [
{ field: 'region', title: 'Region' },
{ field: 'product', title: 'Product' },
{ field: 'amount', title: 'Amount', type: 'number',
format: { style: 'currency', currency: 'USD', decimals: 0 }, total: 'sum' },
],
rows, // e.g. [{ id: 1, region: 'EMEA', product: 'Widget', amount: 420 }, …]
});
grid.columns.group(['region']); // region down the side
grid.columns.pivot(['product']); // product across the top
// A cell click drills to the rows behind that crossing.
grid.on('pivot:drill', (e) => {
console.log(e.measure, [...e.keys].length + ' orders behind this cell');
});
</script>Reading a table as a cross-tab, with totals you can trust and rows a click away
A pivot table answers a question a flat list makes you work for: how much of this, by that. Sales by region and product, spend by team and month, counts by status and owner, laid out as a matrix with one field down the side, another across the top, and a figure summed at every crossing. In Lattice Grid this is a presentation of the one grid rather than a separate tool. Turn it on with pivotView, choose the two axes, and the table becomes a matrix of cells, each holding the measure reduced over the rows that fall at that crossing, with a subtotal down every row, across every column, and a grand total in the corner.
Because it is the same grid presented differently, every number in the matrix is the reduction the grid already runs, over the same rows, so a pivot subtotal cannot disagree with the grid’s own total for the same set. An average subtotal is the average of the rows, never an average of the cell averages. Both axes scroll, so a wide cross-tab stays responsive rather than mounting every cell at once, and a cell click drills straight to the rows behind that crossing, so a surprising figure is one click from the records that made it. On a narrow screen the matrix steps aside for a card list, the same way the table does, so the view survives a phone.
How do you show a data grid as a pivot table?
Set pivotView in the grid configuration, then choose the row axis and the column axis and give a column a reduction to fill the cells. The grid draws a matrix with that field down the side, the other across the top, and the measure summed at every crossing, with row, column and grand subtotals. It is the same grid presented as a cross-tab, not a second component to wire up.
Do the pivot subtotals match the grid’s own totals?
Yes, by construction. Each pivot cell and subtotal is the same reduction the totals row runs, over the same rows, so there is no second aggregation path to drift out of step. A row or column subtotal is the reduction over the union of its rows, which is exactly the grid’s own group total for that set, and clicking a cell drills to those rows so the figure can be checked against the records behind it.