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

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.