Flashing Cells

The grid can flash cells to highlight data changes. This is a great visual indicator to users of the grid who want data
changes to be noticed.

To enable cell flashing on data changes for a particular column, set the attribute enableCellChangeFlash=True on the
column definition.

You can also explicitly flash cells using the grid API flashCells(params). The params takes a list of columns and rows
to flash, the flashDuration and the fadeDuration values. For details on the params see
the AG Grid docs.

The example below demonstrates cell flashing. Note the following:

How Flashing Works

Each time the call value is changed, the grid adds the CSS class ag-cell-data-changed for 500ms by default, and then
CSS class ag-cell-data-changed-animation for 1,000ms by default. The grid provided themes use this to apply a
background color.

If you want to override the flash background color, this has to be done by overriding the relevant CSS class. There are
two ways to change how long a cell remains “flashed”.

  1. Change the cellFlashDuration and cellFadeDuration configs in the dashGridOptions
  2. When calling flashCells(), pass the flashDuration and fadeDuration values (in milliseconds) as params.

The example below demonstrates flashing delay changes. Note the following:

Here is the CSS to change the background color:

#grid-flash-cells-custom {
  --ag-value-change-value-highlight-background-color: #cc222244;
}

This CSS class must be added to any *.css file in the assets folder
(See Loading CSS files for more
information).

Filtering & Aggregations

Row groupings is an AG Grid Enterprise feature, so you’ll need a license key to use it.
See Using AG Grid Enterprise for an example of how to
use your license key with Dash AG Grid components.

One exception to the above is changes due to filtering. If you
are Row Grouping the data
with Aggregations, then the aggregated values will change as filtering
adds and removes rows contained within the groups. It typically doesn’t make sense to flash these changes when it’s due
to a filter change, as filtering would impact many (possibly all) cells at once, thus not usefully bringing the users
attention to any particular cell. If you do not like this exception and would like to flash changes even when it’s the
result of a filter change, then set grid property allowShowChangeAfterFilter=True.

Flashing Cells vs Custom Cell Renderers

Flashing cells is a simple and quick way to visually show to the user that the data has changed. It is also possible to
have more intelligent animations by putting animations into
custom Cell Renderers. Cell Renderers have a refresh
method that gets called when data changes, allowing custom animations to highlight data changes.

The grid comes with two such Cell Renderers for showing data changes which are detailed in
the