Dash AG-Grid - Groups & Checkbox Selection - multiple columns - no selection on leaf nodes - Example

Dash Python
1

Transforming this AG-Grid javascript code into its Dash Ag-Grid equivalent
link: Plunker - Groups & Checkbox Selection - multiple columns - no selection on leaf nodes

There’s one styling change between the two :eyes: Let me know if you catch it :smiley:

import dash_ag_grid as dag
from dash import Dash, html
import requests

app = Dash(__name__)

rowData = requests.get(
    "https://www.ag-grid.com/example-assets/olympic-winners.json"
).json()

columnDefs = [
    {"field": "country", "rowGroup": True, "hide": True},
    {"field": "sport", "rowGroup": True, "hide": True},
    {"field": "athlete", "rowGroup": False},
    {"field": "year", "maxWidth": 120},
    {"field": "date", "minWidth": 150},
]
defaultColDef = {
    "flex": 1,
    "minWidth": 100,
}
dashGridOptions = dict(
    autoGroupColumnDef={
        "minWidth": 250,
        "cellRenderer": "agGroupCellRenderer",
        "cellRendererParams": {
            "checkbox": True,
        },
    },
    groupMultiAutoColumn=True,
    rowSelection="multiple",
    groupSelectsChildren=True,
    suppressRowClickSelection=True,
    suppressAggFuncInHeader=True,
    groupDisplayType="multipleColumns",
    # no blue highlight
    suppressRowHoverHighlight=True,
)

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize=None,
            defaultColDef=defaultColDef,
            dashGridOptions=dashGridOptions,
            enableEnterpriseModules=True,
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)
3 Likes