demo D67
The aggregations
sum, avg, min, max, count, countValues, first, last, one column each
total: 'sum'
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',
grandTotalRow: 'bottom',
columns: [
{ field: 'team', title: 'Team', group: { enabled: true, index: 0 } },
{ field: 'service', title: 'Service', total: 'count' },
{ field: 'instances', title: 'sum', type: 'number', total: 'sum' },
{ field: 'p95Ms', title: 'avg', type: 'number', total: 'avg' },
{ field: 'p50Ms', title: 'min', type: 'number', total: 'min' },
{ field: 'p99Ms', title: 'max', type: 'number', total: 'max' },
{ field: 'owner', title: 'countValues', total: 'countValues' },
{ field: 'region', title: 'first', total: 'first' },
{ field: 'tier', title: 'last', total: 'last' },
],
rows, // wide service records
});
</script>Summarising a column with sum, avg, min, max, count and more
An aggregation reduces every value in a column, or every value within a group, down to a single figure: a sum of “Revenue”, the average of “Response time”, the earliest “first” value or the latest “last” one. A developer reaches for it wherever a column of raw numbers needs a headline figure alongside it, whether that is a grand total row, a per-group subtotal, or a pivoted summary table. Lattice Grid assigns the function per column with total: 'sum', and the same setting accepts 'avg', 'min', 'max', 'count', 'countValues', 'first' or 'last', so a column of currency values and a column of timestamps can each carry the aggregation that actually suits their data rather than sharing one formula. Because this is a JavaScript data grid built around incremental state rather than repeated full-table scans, adding or removing a row updates the affected totals directly instead of walking every row again, which keeps aggregation cost proportional to the change rather than to the size of the dataset. Grouping, group footers and the grand total row all read from these same per-column definitions, so a sum defined once is reused everywhere a total for that column is displayed, with no separate calculation to keep in sync.
How do I calculate a sum or average for a column in a data grid?
Set total: 'sum' on the column definition, or 'avg', 'min', 'max', 'count', 'countValues', 'first', 'last' for the other built-in reducers. Lattice Grid applies the chosen function to the column’s values, and reuses that same definition for group footers, the grand total row and pivot summaries, so the aggregation only needs to be declared once per column.