You can trigger a Dash callback from clicking on a cell with the cellClicked
property and from double-clicking on a cell with cellDoubleClicked
property. If you use cellClicked
or cellDoubleClicked
as a callback input, when the callback runs, you’ll have access to data about the click or double-click.
cellClicked
and cellDoubleClicked
are dicts and have the following keys:
colId
(boolean | number | string | dict | list; optional): column where the cell was clicked.
rowId
(boolean | number | string | dict | list; optional): Row Id from the grid, this could be a number automatically, or set via getRowId.
rowIndex
(number; optional): rowIndex, typically a row number.
timestamp
(boolean | number | string | dict | list; optional): timestamp of last action.
value
(boolean | number | string | dict | list; optional): value of the clicked cell.
The following example demonstrates cellClicked
. In this example, we output the cell’s value
, colId
, and rowId
to an html.Div
component when the cell is clicked.
from dash import Dash, html, Input, Output, callback
import dash_ag_grid as dag
import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
app = Dash(__name__)
grid = dag.AgGrid(
id="quickstart-grid",
rowData=df.to_dict("records"),
columnDefs=[{"field": i} for i in df.columns],
defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},
columnSize="sizeToFit",
getRowId="params.data.State"
)
app.layout = html.Div([grid, html.Div(id="quickstart-output")])
@callback(
Output("quickstart-output", "children"), Input("quickstart-grid", "cellClicked")
)
def display_cell_clicked_on(cell):
if cell is None:
return "Click on a cell"
return f"clicked on cell value: {cell['value']}, column: {cell['colId']}, row index: {cell['rowIndex']}"
if __name__ == "__main__":
app.run(debug=True)
The following example outputs the cell’s value
, colId
, and rowId
to an html.Div
component when the cell is double-clicked.
from dash import Dash, html, Input, Output, callback
import dash_ag_grid as dag
import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/iris.csv")
app = Dash(__name__)
grid = dag.AgGrid(
id="cell-double-clicked-grid",
rowData=df.to_dict("records"),
columnDefs=[{"field": i} for i in df.columns],
defaultColDef={
"resizable": True,
"sortable": True,
"filter": True,
"minWidth": 125,
},
columnSize="sizeToFit",
getRowId="params.data.State",
)
app.layout = html.Div([grid, html.Div(id="cell-double-clicked-output")])
@callback(
Output("cell-double-clicked-output", "children"),
Input("cell-double-clicked-grid", "cellDoubleClicked"),
)
def display_cell_clicked_on(cell):
if cell is None:
return "Double-click on a cell"
return f"Double-clicked on cell value: {cell['value']}, column: {cell['colId']}, row index: {cell['rowIndex']}"
if __name__ == "__main__":
app.run(debug=True)
You can also trigger Dash callbacks with custom components. For more information, see: