Lattice Grid Buy a licence

demo D49

Cell Flashing: Highlight Changed Values Live in htmx

Flashing a cell when its value moves

grid.highlight.cell()

This grid flashes a cell's background the moment its value moves, then fades it back. It lets a reader watching a live table catch an update without scanning every row for the difference, so a change announces itself.

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="change-highlighting-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="circuit">Circuit</th>
      <th data-field="region">Region</th>
      <th data-field="status">Status</th>
      <th data-field="bandwidth">Bandwidth</th>
      <th data-field="charge">Monthly charge</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0"><td>DFB-EDI-100000</td><td>Edinburgh</td><td>live</td><td>100</td><td>94.88</td></tr>
    <tr data-id="1"><td>MPL-BIR-100001</td><td>Birmingham</td><td>provisioning</td><td>10000</td><td>4324.6</td></tr>
    <tr data-id="2"><td>DFB-LON-100002</td><td>London</td><td>live</td><td>2000</td><td>1031.02</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('change-highlighting-table'), {
    // A cell flashes whenever its value changes, whether from an edit or a write
    // through grid.edit.setCells. The duration is long enough to notice and
    // short enough not to accumulate; 0 would hold the highlight until cleared.
    highlightOnChange: { colour: '#ffd9a0', duration: 1200 },
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
      { field: 'region', title: 'Region' },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
    ],
  });
</script>

Flashing a cell when its value changes

Change highlighting flashes a cell’s background the moment its value moves, then fades it back to normal, so a reader watching a live table catches an update without scanning every row for a difference. A developer reaches for it on any feed where values arrive out of view: a price ticking over while attention is on a different column, a status field flipping in a monitoring grid, a total recalculating after an edit elsewhere in the row. Lattice Grid triggers this through grid.highlight.cell(), called with the row and column to flash, so the highlight is driven directly from the same update path that changes the value rather than inferred by diffing the grid’s own state. Because the flash is applied as a transient class rather than a full cell re-render, highlighting many cells on a fast-moving feed adds no extra layout work beyond the value update itself, so a JavaScript data grid can flash dozens of cells a second without the fades queuing up or the frame rate dropping. The flash supplements the value rather than replacing it: the new figure is legible throughout the animation, and a screen reader announces the changed value on update regardless of whether the highlight is visible, so the signal still reaches a reader who cannot see the colour.

How do I flash a cell when its data changes in a data grid?

Call grid.highlight.cell() with the row and column identifying the cell whose value has changed. Lattice Grid applies a transient background flash that fades back to the normal state, triggered from the same code path that updates the value rather than from a separate diff pass. The underlying figure stays visible throughout, so the flash marks the change without hiding the data it is drawing attention to.

Related demos