Editing and Callbacks

Use the following Dash properties to access edited data in a callback:
- cellValueChanged
- RowData
- virtualRowData
- cellRendererData (see the components section)

Triggering a Callback on Cell Value Change

If the grid is editable, you can trigger a callback by using the cellValueChanged property in a callback Input.

Try editing a cell of the grid to see the data included in the cellValueChanged prop

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import plotly.express as px


app = Dash(__name__)

df = px.data.gapminder()


app.layout = html.Div(
    [
        dcc.Markdown("Example of using `cellValueChanged` in a callback"),
        dag.AgGrid(
            id="editing-grid",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "minWidth": 120},
        ),
        html.Div(id="editing-grid-output"),
    ],
    style={"margin": 20},
)


@callback(
    Output("editing-grid-output", "children"), Input("editing-grid", "cellValueChanged")
)
def update(cell_changed):
    return f"{cell_changed}"


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

Example of using cellValueChanged in a callback

Using rowData or virtualRowData in a Callback

When the grid is editable, the state of the rowData and virtualRowData is updated with user edits. Note that these props cannot
be used to trigger a callback. To access the updated row data in a callback, use the rowData or virtualRowData prop in State and use something else as the Input() to trigger the callback - such as a button, or the grid’s cellValueChanged prop.

# This won't work
@callback(
    Output("my-output", "children"),
    Input("grid", "rowData")
)
def update(row_data):
    # do something

Here we use the n_clicks prop of a button to trigger the callback:

# This will work
@callback(
    Output("my-output", "children"),
    Input("btn", "n_clicks"),
    State("grid", "rowData")
)
def update(n, row_data):
    # do something

The example below uses cellValueChanged prop to trigger the callback so that the figure is updated after each edit.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, callback
import plotly.express as px
import pandas as pd


app = Dash(__name__)

df = px.data.medals_long()


app.layout = html.Div(
    [
        dcc.Markdown("Example of using `rowData` in a callback with an editable grid"),
        dag.AgGrid(
            id="editing-grid2",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
        ),
        html.Div(id="editing-grid-output2"),
    ],
    style={"margin": 20},
)


@callback(
    Output("editing-grid-output2", "children"),
    Input("editing-grid2", "cellValueChanged"),
    State("editing-grid2", "rowData"),
)
def update(_, rows):
    dff = pd.DataFrame(rows)
    fig = px.bar(dff, x="nation", y="count", color="medal")
    return dcc.Graph(figure=fig)


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

Example of using rowData in a callback with an editable grid