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">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  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/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          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 } },
            // The delta renderer reads this value against yesterday's close and
            // shows the direction, colour and figure together.
            { 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 three columns over price would otherwise be one.
            { 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' },
          ],
          rows,  // each row carries a price and yesterday's close
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</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