# Highlighting changes ## Built-in cell flash (`cellFlash`) Set `cellFlash` on a column and the grid flashes that cell whenever its value changes - edits, streaming feeds, server pushes. It is keyed by row identity, so scrolling a virtualized grid (which recycles `` nodes) never triggers a false flash; only a same-row value change does. It respects `prefers-reduced-motion`. ```ts { field: 'price', cellFlash: true } // default tint { field: 'change', cellFlash: { className: 'flash-up-down' } } // your own animation ``` The default flash fades a theme-tinted background (`--sg-cell-flash`, or the accent). For directional colouring (green up / red down) pass your own class and toggle it from a `cellClass` callback, or animate `flash-up-down` in CSS. > Live demo: Stock market - live - https://svgrid.com/demos/11-stock-market/ ## Rolling your own If you need more than a flash (persistent dirty markers, diff badges), you can still build it by hand with a diff against a frozen snapshot of the data. ## Dirty cells while editing Demo 5 ([demos/05-inline-editing.svelte](https://svgrid.com/demos/05-inline-editing/)) does this: ```svelte ``` To make the dirty marker visible in the grid, render an indicator inside a custom `cell`: ```ts { field: 'salary', cell: (ctx) => renderSnippet(MaybeDirty, { value: ctx.getValue(), isDirty: dirty[`${ctx.row.original.id}.salary`] === true, }), } ``` ```svelte {#snippet MaybeDirty(p: { value: unknown; isDirty: boolean })} {p.value} {#if p.isDirty}{/if} {/snippet} ``` ## Flash on value change (live data) For live-update grids (stock tickers, queue dashboards): ```svelte ``` Drive the flash from your cell renderer the same way. Use `prefers- reduced-motion` to disable the animation for users who opt out. ## Flash on change `cellFlash` tints a cell for a moment whenever its value changes. On a live feed that is the difference between a number that updated and one you happened to be looking at. ```svelte Change one salary ``` ## Your own flash class Pass `{ className }` to style the flash yourself - a green-up / red-down pair is the usual next request, and it is CSS rather than configuration. ```svelte (rows[0] = { ...rows[0]!, salary: rows[0]!.salary + 1000 })}> Raise the first ``` ## See also - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) - [demos/05-inline-editing.svelte](https://svgrid.com/demos/05-inline-editing/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/highlighting-changes/ . All docs: https://svgrid.com/llms.txt