demo D66
The grand total row
Inline at the end, or pinned above the status bar
grandTotalRow: 'bottom'
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',
selection: 'multiple',
grandTotalRow: 'bottom',
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' } },
{ field: 'service', title: 'Service', filter: { type: 'set' } },
{ field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
{ 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',
} } } },
{ field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
],
rows, // cloud cost rows, one object per resource
});
</script>Placing a grand total row across the whole dataset
A grand total row is the single summary line that closes the entire grid rather than one group within it, distinct from a group footer, which only reduces the rows inside its own section. A developer reaches for it whenever the figure at the bottom needs to represent every row currently in the grid, such as a total revenue line under a sales sheet, regardless of how many groups sit above it. Lattice Grid controls placement with grandTotalRow: 'bottom', which docks the row inline after the last row in the JavaScript data grid; setting it to 'top' instead pins the row above the scrolling body, ahead of the header, so it stays in view above a long list rather than requiring a scroll to the foot. The row draws on the same aggregation already declared per column, so a total: 'sum' on a currency column produces a grand total in the same format as the group subtotals above it, with no separate calculation to maintain. Because the row is a synthesised row type rather than a rendered footer element, it participates in the grid’s row virtualisation, so it costs nothing extra to keep on screen at a million rows, and it carries its own aria-rowindex so a screen reader can distinguish it from an ordinary data row.
How do I add a grand total row that stays visible while scrolling?
Set grandTotalRow: 'top' rather than 'bottom'. Lattice Grid then pins the row above the scrolling body of the JavaScript data grid, ahead of the header, so the total remains on screen regardless of scroll position. The row still draws its figures from each column’s existing aggregation, so no calculation needs to be written twice.