To include checkbox selection for a column, set the attribute ‘checkboxSelection’ to true on the column definition. You can set this attribute on as many columns as you like, however it doesn’t make sense to have it in more than one column in a table.
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", "checkboxSelection": True, "headerCheckboxSelection": True},
{"field": "age", "maxWidth": 100},
{"field": "country"},
{"field": "year", "maxWidth": 120},
{"field": "date", "minWidth": 150},
{"field": "sport"},
{"field": "gold"},
{"field": "silver"},
{"field": "bronze"},
{"field": "total"},
]
defaultColDef = {
"flex": 1,
"minWidth": 150,
"sortable": True,
"resizable": True,
"filter": True,
}
app.layout = html.Div(
[
dcc.Markdown("This grid has multi-select rows with checkboxes."),
dag.AgGrid(
id="selection-checkbox-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
defaultColDef=defaultColDef,
dashGridOptions={"rowSelection":"multiple"},
),
html.Div(id="selections-checkbox-output"),
],
style={"margin": 20},
)
@callback(
Output("selections-checkbox-output", "children"),
Input("selection-checkbox-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 with checkboxes.
It is possible to specify which rows can be selected via the isRowSelectable
function.
isRowSelectable
- Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row un-selectable.For instance if we only wanted to allow rows where the ‘year’ property is less than 2007, we could implement the following:
dag.AgGrid(
rowSelection="multiple",
dashGridOptions = {'isRowSelectable': {"function": "params.data ? params.data.year < 2007 : false" }},
)
This example demonstrates the following:
isRowSelectable
function only allows selections on rows where the year < 2007.headerCheckboxSelection: True
and checkboxSelection: True
, but only rows which are selectable will obtain a selectable checkbox. Similarly, the header checkbox will only select selectable rows."""
Multiple Row Selection - with selectable 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", "maxWidth": 100},
{"field": "country", "checkboxSelection": True, "headerCheckboxSelection": True},
{"field": "year", "maxWidth": 120},
{"field": "date", "minWidth": 150},
{"field": "sport"},
{"field": "gold"},
{"field": "silver"},
{"field": "bronze"},
{"field": "total"},
]
defaultColDef = {
"flex": 1,
"minWidth": 150,
"sortable": True,
"resizable": True,
"filter": True,
}
app.layout = html.Div(
[
dcc.Markdown("Example: Selectable Rows with Header Checkbox"),
dag.AgGrid(
id="selectable-checkbox-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
defaultColDef=defaultColDef,
dashGridOptions={
"rowSelection":"multiple",
"isRowSelectable": {
"function": "params.data ? params.data.year < 2007 : false"
}
},
),
html.Div(id="selectable-checkbox-output"),
],
style={"margin": 20},
)
@callback(
Output("selectable-checkbox-output", "children"),
Input("selectable-checkbox-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 example demonstrates preselecting rows.
"""
Multiple Row Selection - with check boxes and preselected 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", "checkboxSelection": True, "headerCheckboxSelection": True},
{"field": "age", "maxWidth": 100},
{"field": "country"},
{"field": "year", "maxWidth": 120},
{"field": "date", "minWidth": 150},
{"field": "sport"},
{"field": "gold"},
{"field": "silver"},
{"field": "bronze"},
{"field": "total"},
]
defaultColDef = {
"flex": 1,
"minWidth": 150,
"sortable": True,
"resizable": True,
"filter": True,
}
app.layout = html.Div(
[
dcc.Markdown("This grid has multi-select rows with checkboxes."),
dag.AgGrid(
id="preselect-checkbox-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
defaultColDef=defaultColDef,
dashGridOptions={"rowSelection":"multiple"},
selectedRows= df.head(4).to_dict("records")
),
html.Div(id="preselect-checkbox-output"),
],
style={"margin": 20},
)
@callback(
Output("preselect-checkbox-output", "children"),
Input("preselect-checkbox-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 with checkboxes.