Lattice Grid Buy a licence

demo D49

Change highlighting

Flashing a cell when its value moves

grid.highlight.cell()

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',
    // Highlighting listens for cell:changed, raised by the write path an editor
    // uses, so a flash follows any edit or any write through grid.edit.setCells.
    // A duration long enough to notice, short enough not to accumulate; 0 would
    // leave the highlight until something cleared it.
    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 },
    ],
    rows,  // circuit records
  });
</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