Lattice Grid Buy a licence

demo D39

Delta indicators

Change since last value, with direction and colour, on a live feed

render: 'delta'

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 });

// The delta renderer reads one number against another and shows the movement:
// the value tinted by direction, the change on its own, or the arrow alone.
const columns = [
  { field: 'service', title: 'Service', layout: { pin: 'start', width: 170 } },
  { field: 'team', title: 'Team', filter: { type: 'set' } },
  { field: 'previousClose', title: 'Yesterday', type: 'number', layout: { width: 140 },
    format: { style: 'currency', currency: 'USD', decimals: 2 } },
  { field: 'price', title: 'Now', type: 'number', layout: { width: 150 },
    format: { style: 'currency', currency: 'USD', decimals: 2 },
    cell: { render: 'delta', props: { mode: 'against', against: 'previousClose', places: 2 } } },
  // The same comparison, showing the movement instead of the value. An explicit
  // id, because a column id defaults to its field and three columns over price
  // would otherwise be one column.
  { id: 'price-change', field: 'price', title: 'Change', type: 'number', layout: { width: 130 },
    cell: { render: 'delta', props: { mode: 'against', against: 'previousClose', show: 'delta', places: 2 } } },
  // And the direction alone, for a column read as a shape.
  { id: 'price-direction', field: 'price', title: 'Dir', type: 'number', layout: { width: 70 },
    cell: { render: 'delta', props: { mode: 'against', against: 'previousClose', show: 'arrow' } } },
  { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 160 },
    format: { style: 'currency', currency: 'USD' }, total: 'sum' },
];

const rows = [/* rows, each carrying a price and yesterday's close */];



@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',
    selection: 'multiple',
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
          actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent);

Showing change since the last value with delta indicators

A delta indicator renders a value alongside the direction and size of its most recent change: an arrow, a signed figure, a colour, or some combination of the three, so a reader can tell whether a number went up or down since the cell last updated. A developer reaches for it on any live feed where the current value alone is not the interesting part, a price, a stock level, a queue depth, and the movement matters as much as the reading. Lattice Grid renders this with render: 'delta' on a column, which compares each incoming value against the one it replaces and draws the comparison inline with the cell rather than in a separate column, so the grid does not need a second field to carry the direction. On a live feed the comparison stays cheap because it reuses the value already held for change highlighting rather than recomputing a history, so a delta column in a JavaScript data grid updating many cells a second adds no extra pass over the data. Colour is never the only signal: the arrow and the sign carry the same information, so the indicator still reads correctly for a viewer who cannot distinguish the colours, and under a screen reader the announced value includes the direction rather than relying on a glyph alone.

How do I show whether a value went up or down in a data grid cell?

Set render: 'delta' on the column. Lattice Grid keeps the previous value for each cell, compares it against the new one on update, and draws an arrow, a signed change and a colour together in the cell. The comparison runs on the same per-cell state used for change highlighting, so it adds no separate pass over a fast-moving feed.

An in-cell renderer, not the charting module. This draws one SVG inside a cell, sized to the cell and costing what a cell costs as rows recycle. It is a different, older feature from the charts module, which draws full charts from the grid’s own filtered rows across thirty types and redraws them as the grid moves. Reach for a renderer when the shape belongs in the row; reach for charts when it belongs above the grid.

Related demos