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.

The example below shows agAnimateShowChangeCellRenderer. In this example:

Columns A and B are editable.
Columns C is updated when the button is clicked.
Changes to any of the first 3 columns result in animations in the “Total” and “Average” columns.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, callback

import random
import pandas as pd
import numpy as np

app = Dash(__name__)

df = pd.DataFrame(np.random.randint(0, 1000, size=(15, 3)), columns=list("abc"))
df.reset_index(inplace=True)

columnDefs = [
    {
        "headerName": "Editable A",
        "field": "a",
        "editable": True,
        "resizable": True,
    },
    {
        "headerName": "Editable B",
        "field": "b",
        "editable": True,
    },
    {
        "headerName": "API C",
        "field": "c",
        "cellRenderer": "agAnimateShowChangeCellRenderer",
    },
    {
        "headerName": "Total",
        "valueGetter": {"function": "Number(params.data.a) + Number(params.data.b) + Number(params.data.c)"},
        "cellRenderer": "agAnimateShowChangeCellRenderer",
    },
    {
        "headerName": "Average",
        "valueGetter": {
            "function": "Math.round((Number(params.data.a) + Number(params.data.b) + Number(params.data.c)) * 10 / 3) /10"
        },
        "cellRenderer": "agAnimateShowChangeCellRenderer",
    },
]

defaultColDef = {
    "type": ["numberColumn", "rightAligned"],
    "filter": "agNumberColumnFilter",
    "resizable": True,
    "sortable": True,
}

app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid demonstrates the renderer for animating changes.  Try entering new values into the editable columns and press the button to update column c in a callback"
        ),
        html.Button("Update column C", id="live-data-grid-btn"),
        dag.AgGrid(
            id="live-data-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef=defaultColDef,
            # setting a row ID is required when updating data in a callback
            getRowId="params.data.index",
        ),
    ],
    style={"margin": 20},
)


@callback(
    Output("live-data-grid", "rowData"),
    Input("live-data-grid-btn", "n_clicks"),
    State("live-data-grid", "rowData"),
)
def update_col_c(_, rows):
    for r in rows:
        r["c"] = random.randint(1, 1000)
    return rows


if __name__ == "__main__":
    app.run(debug=True)

This grid demonstrates the renderer for animating changes. Try entering new values into the editable columns and press the button to update column c in a callback