Lattice Grid Buy a licence

demo D39

Delta indicators in htmx

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

render: 'delta'

This grid renders a value alongside the direction and size of its most recent change, with an arrow and colour, on a live feed. It lets a reader tell at a glance whether a number moved up or down since it last changed, without comparing against a remembered figure.

Building…
Loading a live grid…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="delta-indicators-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="team">Team</th>
      <th data-field="previousClose">Yesterday</th>
      <th data-field="price">Now</th>
      <th data-field="cost">Monthly cost</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0"><td>fraud-edge</td><td>Commerce</td><td>89.62</td><td>88.26</td><td>2863.61</td></tr>
    <tr data-id="1"><td>payments-stream</td><td>Growth</td><td>188.38</td><td>195.2</td><td>4874.98</td></tr>
    <tr data-id="2"><td>checkout-edge</td><td>Payments</td><td>196.31</td><td>197</td><td>3552.72</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('delta-indicators-table'), {
    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 value, coloured and arrowed by how it moved against yesterday.
      { 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' },
    ],
  });
</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