Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: Change Cell Renderers

The grid provides two cell renderers for animating changes to data. They are:

  • agAnimateShowChangeCellRenderer: The previous value is temporarily shown beside the old value with a directional arrow showing increase or decrease in value. The old value is then faded out.
  • agAnimateSlideCellRenderer: The previous value shown in a faded fashion and slides, giving a ghosting effect as the old value fades and slides away.

Example

The example below shows both types of animation cell renders in action. To test, try the following:

  • Columns A, B and C are editable.
  • Columns D and E are updated via clicking the button.
  • Changes to any of the first 5 columns results in animations in the Total and Average column.

We hope you like the animation cell renderers. However you can also take inspiration from them, and create your own animations in your own cell renderers. Check out our source code on GitHub to see how we implemented these cell renderers for inspiration.

Most AG Grid users prefer the animateShowChange cell renderer for showing changes in values to the animateSlide one, so if you are trying to impress someone, probably best to show them animateShowChange :)