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

<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',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    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 that is 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' },
    ],
    rows,  // rendering demo rows
  });
</script>

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