Multiple Row Selection On Click

The example below shows multi-select with click. Clicking multiple rows will select a range of rows without the need for Ctrl or Shift keys. Clicking a selected row will deselect it. This is useful for touch devices where Ctrl and Shift clicks are not available.

Property rowMultiSelectWithClick=True is set to enable multiple row selection with clicks. Clicking multiple rows will select multiple rows without needing to press Ctrl or Shift keys. Clicking a selected row will deselect that row.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
    {"field": "date"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dcc.Markdown("This grid has multi-select rows.  Click to select rows"),
        html.Div(id="selections-multiple-click-output"),
        dag.AgGrid(
            id="selection-multiple-click-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth": 125,},
            dashGridOptions={"rowSelection":"multiple", "rowMultiSelectWithClick": True},
        ),
    ],
    style={"margin": 20},
)


@callback(
    Output("selections-multiple-click-output", "children"),
    Input("selection-multiple-click-grid", "selectedRows"),
)
def selected(selected):
    if selected:
        selected_athlete = [s["athlete"] for s in selected]
        return f"You selected athletes: {selected_athlete}"
    return "No selections"


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

This grid has multi-select rows. Click to select rows