Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.
Configure row selection with the following properties:
rowSelection
: Type of row selection, set to either ‘single’ or ‘multiple’ to enable selection. ‘single’ will use single row selection, such that when you select a row, any previously selected row gets unselected. ‘multiple’ allows multiple rows to be selected.rowMultiSelectWithClick
: Set to true to allow multiple rows to be selected with clicks. For example, if you click to select one row and then click to select another row, the first row will stay selected as well. Clicking a selected row in this mode will deselect the row. This is useful for touch devices where Ctrl and Shift clicking is not an option.suppressRowDeselection
: Set to true to prevent rows from being deselected if you hold down Ctrl and click the row (i.e. once a row is selected, it remains selected until another row is selected in its place). By default the grid allows deselection of rows.suppressRowClickSelection
: If true, rows won’t be selected when clicked. Use, for example, when you want checkbox selection, and don’t want to also select the row when the row is clicked.The example below shows single row selection.
Property rowSelection='single'
is set to enable single row selection. It is not possible to select multiple rows.
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 single-select rows."),
html.Div(id="selections-single-output"),
dag.AgGrid(
id="selection-single-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth": 125},
dashGridOptions={"rowSelection":"single"},
),
],
style={"margin": 20},
)
@callback(
Output("selections-single-output", "children"),
Input("selection-single-grid", "selectedRows"),
)
def selected(selected):
if selected:
return f"You selected athlete: {selected[0]['athlete']}"
return "No selections"
if __name__ == "__main__":
app.run(debug=True)
This grid has single-select rows.