Lattice Grid Buy a licence

demo D71

Only what changed

Reducing only the columns an update touched

totalOnlyChangedColumns: true

Building…
Loading a live grid…

The configuration

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

const columns = [
  { field: 'desk', title: 'Desk', group: { enabled: true, index: 0 } },
  { field: 'book', title: 'Book', group: { enabled: true, index: 1 } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'notional', title: 'Notional', type: 'number', total: 'sum', format: { style: 'currency', currency: 'GBP', decimals: 0 } },
  { field: 'pnl', title: 'P&L', type: 'number', total: 'sum', format: { style: 'currency', currency: 'GBP', decimals: 2 } },
  { field: 'fee', title: 'Fee', type: 'number', total: 'sum', format: { style: 'currency', currency: 'GBP', decimals: 2 } },
  { field: 'rate', title: 'Rate', type: 'number', total: 'avg', format: { decimals: 3 } },
];

const rows = [/* half a million settlement rows in seven desks */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    totalOnlyChangedColumns: true,
    grandTotalRow: 'bottom',
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'], actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent);

Reducing only the columns a live update touched

When a row updates in a streaming or polling data source, most of that row’s columns are unchanged, only one or two figures have actually moved. Recomputing every aggregation across every column on each tick wastes cycles the developer already paid for once, and on a fast-ticking feed such as a price board or a fleet-tracking table that waste compounds every second. Lattice Grid controls this with totalOnlyChangedColumns: true, which narrows aggregation work in the JavaScript data grid to the specific columns touched by the incoming delta rather than walking the full row again. A developer reaches for this option once updates arrive faster than the grid needs to fully re-total, typically anywhere ticks land several times a second across thousands of rows, and the totals still need to stay correct without a full recompute pass. The saving is measured in work avoided rather than frames dropped: with the option set, a single-column price change on one row in a 50,000-row grid touches only that column’s aggregation, not the other nineteen. Screen reader users are shielded from the churn too, because only the cells whose values actually changed are re-announced, so a total in an untouched column does not generate a spurious live-region update alongside the one that did change.

Why is my grid recalculating totals for columns that never changed?

By default, an incoming row update can trigger a full recomputation of every aggregated column in Lattice Grid, even when only one value changed. Set totalOnlyChangedColumns: true to limit recalculation to the columns present in the update. This keeps totals accurate while cutting the aggregation work down to the fields that actually moved on that tick.

Related demos