Checkbox Row Selection

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.

Multi-select Rows with Checkboxes

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.

Specify Selectable Rows

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" }},
)

Selectable Rows with Header Checkbox

This example demonstrates the following:

The isRowSelectable function only allows selections on rows where the year < 2007.
The country column has 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)

Preselected Rows

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.