Use the following Dash properties to access edited data in a callback:
- cellValueChanged
- RowData
- virtualRowData
- cellRendererData
(see the components section)
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 numberrowId
- row id from the grid, this could be a number automatically, or set via getRowIddata
(dict) - data object from the rowoldValue
- old value of the cellnewValue
- new value of the cellcolId
- the id of the column where the cell was changedTry 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
rowData
or virtualRowData
in a CallbackWhen 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