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

<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',
    /*
     * Reduce only the totalled columns an update actually moved. Off by
     * default, because it asserts that each total depends on nothing but its
     * own column: true of every built-in reduction, and a promise a `total`
     * function reading anything else would break.
     *
     * Group totals are re-reduced on every change, which is why this is a
     * grouped grid: on a flat one there is nothing to save.
     */
    totalOnlyChangedColumns: true,
    grandTotalRow: 'bottom',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    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 } },
    ],
    rows,  // half a million settlement rows in seven desks
  });

  // Read on every update rather than baked into a cached reduction, so this
  // alone changes the next update's cost. Nothing has to be recomputed.
  grid.set('totalOnlyChangedColumns', true);
</script>

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