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.27.0/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, 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 */];

  function App() {
    return (
      <LatticeGrid
        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}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</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