demo D127
Diff and audit mode
Before and after against a baseline, computed only when asked
config.diff · grid.diff
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'), {
// The diff model indexes the snapshot by the row key, so a stable key is
// not optional here: a snapshot keyed by position would compare row 6 of
// today against row 6 of last week.
rowKey: 'id',
selection: 'multiple',
diff: {
snapshot, // the prior revision, the same shape as rows
// null in the snapshot and absent now are the same thing to a reader and
// different things to an auditor. strictNull keeps them apart.
strictNull: true,
// A new column is a schema change, not an edit, so added columns get
// their own muted treatment. Set this to 'changed' to count them.
addedColumns: 'unchanged',
},
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 200, pin: 'start' } },
{ 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' } },
{ field: 'note', title: 'Note', layout: { width: 120 } },
{ field: 'reviewedBy', title: 'Reviewed by', layout: { width: 160 } },
],
rows, // the current revision of the circuit inventory
});
// The before values are off by default: most audit views want the current
// value with the change merely marked. Turn them on to show the prior value
// struck through under each changed cell.
const root = grid.element.classList.contains('lattice')
? grid.element
: grid.element.querySelector('.lattice');
root?.setAttribute('data-diff-before', 'show');
</script>Comparing a grid against a saved baseline
Diff and audit mode compares the current state of a dataset against a stored baseline and marks each cell that has changed, so a reviewer sees what moved between two points in time rather than re-reading every row for differences. A developer reaches for it wherever a change needs sign-off before it lands: a pricing sheet before publish, a configuration table before deploy, a records edit before it reaches a downstream system. Lattice Grid exposes this through config.diff and grid.diff, which take a baseline snapshot and compute the comparison only when asked, rather than tracking every keystroke as the user types. Diffing runs once against the full dataset when triggered, then the grid highlights added, removed, and changed cells using the same overlay layer as its other annotations, so marking differences across a large table in this JavaScript data grid costs one pass rather than a running cost paid on every edit. Changed cells carry their prior value alongside the current one, and that pairing is exposed to assistive technology, so a screen reader announces both values rather than only the one currently rendered. The demo loads a baseline, applies a batch of edits, and computes the diff on request, showing what a reviewer would see before approving a change set.
How do you show which cells changed in a data grid?
Set a baseline snapshot with config.diff, then call grid.diff when a comparison is needed; Lattice Grid computes the difference against that snapshot on demand rather than continuously. Changed cells are marked using the grid’s existing overlay layer, each carrying its previous and current value, and the comparison can be re-run against the same baseline after further edits without recomputing anything until it is asked for again.