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.

cellValueChanged (dict) with keys:
rowIndex (number) a row number
rowId - row id from the grid, this could be a number automatically, or set via getRowId
data (dict) - data object from the row
oldValue - old value of the cell
newValue - new value of the cell
colId - the id of the column where the cell was changed

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

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


app = Dash()

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},
            dashGridOptions={"animateRows": False}
        ),
        html.Div(id="editing-grid-output"),
    ]
)


@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)
```

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.

```python
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()

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},
            dashGridOptions={"animateRows": False}
        ),
        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)
```

Editing and Callbacks

Triggering a Callback on Cell Value Change

Using rowData or virtualRowData in a Callback

Using `rowData` or `virtualRowData` in a Callback