Cell Selection

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.

Cell Clicked Example

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)

Cell Double-Clicked Example

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)

Cell Selection with Custom Components

You can also trigger Dash callbacks with custom components. For more information, see: