Vue Data GridHighlighting Changes

vue logo

Highlight changes by flashing or animating cells.

In the example above, to show changing values:

Flashing Cells

You can trigger cells to flash either though the Grid API or by enabling cells to flash when the data changes.

Enable Flashing on Data Change

Set Column attribute enableCellChangeFlash=true to flash the cells when data changes.

In the example above:

  • All columns have enableCellChangeFlash=true so changes to the columns values will flash the cell.
  • Clicking Update Some Data will randomly update some data. The grid will then flash the cells where data has changed.

To change the length of the effect, use the grid options cellFlashDuration and cellFadeDuration.

By default, value changes caused by updates to column filters are not highlighted with cell flashing. This behaviour can be toggled by enabling the grid option allowShowChangeAfterFilter

Flash Cells using the API

Alternatively flash cells using the grid API flashCells(params). The params object takes a list of columns and rows to flash, together with the flashDuration and the fadeDuration values.