Cell Selection

Cell Selection Callbacks

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): Row Index, 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 Simple-Click Example

The following example demonstrates cellClicked. In this example, we output the cell’s data to an html.Pre component
when the cell is clicked.

```python
from dash import Dash, html, Input, Output, callback
import dash_ag_grid as dag
import pandas as pd
import json

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = Dash()

grid = dag.AgGrid(
    id="cell-selection-simple-click-callback",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    defaultColDef={"filter": True},
    columnSize="sizeToFit",
    getRowId="params.data.State",
    dashGridOptions={"animateRows": False}
)

app.layout = html.Div([grid, html.Pre(id="pre-cell-selection-simple-click-callback")])


@callback(
    Output("pre-cell-selection-simple-click-callback", "children"),
    Input("cell-selection-simple-click-callback", "cellClicked")
)
def display_cell_clicked_on(cell):
    return f"Clicked on cell:\n{json.dumps(cell, indent=2)}" if cell else "Click on a cell"


if __name__ == "__main__":
    app.run(debug=True)
```

Cell Double-Click Example

The following example demonstrates cellDoubleClicked. In this example, we output the cell’s data to an html.Pre
component when the cell is double-clicked.

```python
from dash import Dash, html, Input, Output, callback
import dash_ag_grid as dag
import pandas as pd
import json

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/iris.csv")

df["index"] = df.index.astype(str)

app = Dash()

grid = dag.AgGrid(
    id="cell-selection-double-click-callback",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    defaultColDef={"filter": True},
    columnSize="sizeToFit",
    getRowId="params.data.index",
    dashGridOptions={"animateRows": False}
)

app.layout = html.Div([grid, html.Pre(id="pre-cell-selection-double-click-callback")])


@callback(
    Output("pre-cell-selection-double-click-callback", "children"),
    Input("cell-selection-double-click-callback", "cellDoubleClicked"),
)
def display_cell_double_clicked_on(cell):
    return f"Double-clicked on cell:\n{json.dumps(cell, indent=2)}" if cell else "Double-click on a cell"


if __name__ == "__main__":
    app.run(debug=True)
```

Cell Callbacks with Custom Components

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

```python
from dash import Dash, html
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()

app.layout = html.Div(
    [
        dag.AgGrid(
            id="cell-selection-disable-focus",
            rowData=df.to_dict("records"),
            columnDefs=[{"field": i} for i in df.columns],
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            dashGridOptions={"suppressCellFocus": True, "animateRows": False},
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True)
```

Range Selection

Range selection allows Excel-like range selection of cells.

Note that range selection is an AG Grid Enterprise feature. See
the Cell Selection page in the
AG Grid docs for more details.

Range Selection

<br>