Row Groupings

Row groupings is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

The following example demonstrates how to group rows in Dash AG Grid. In this example, we group first by country and then by year.

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
import os


app = Dash(__name__)


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

columnDefs = [
    # Row group by country and by year is enabled.
    {"field": "country", "sortable": True, "filter": True, "rowGroup": True},
    {"field": "year", "sortable": True, "filter": True, "rowGroup": True},
    {"field": "athlete", "sortable": True, "filter": True},
    {"field": "age", "sortable": True, "filter": True},
    {"field": "date", "sortable": True, "filter": True},
    {"field": "sport", "sortable": True, "filter": True},
    {"field": "total", "sortable": True, "filter": True},
]

app.layout = html.Div(
    [
        dcc.Markdown("Demonstration of row groupings in a Dash AG Grid."),
        dcc.Markdown("This grid groups first by country and then by year."),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple"},
            defaultColDef=dict(
                resizable=True,
            ),
            id="grouped-grid",
            # Row groupings is an ag-grid Enterprise feature.
            # A license key should be provided if it is used.
            # License keys can be passed to the `licenseKey` argument of dag.AgGrid
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_ENTERPRISE'],
        ),
    ]
)


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

Demonstration of row groupings in a Dash AG Grid.

This grid groups first by country and then by year.

Scroll To with Row Groups

For more information see the Scroll To section.

In order to scroll the grid to a position, the row must exist the DOM. When using row groups, the detailed row must be
displayed prior to setting the scrollTo prop.

In this example we use the setRowNodeExpanded function in a clientside callback to expand the group that has the detail row specified by the rowId.

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


app = Dash(__name__)


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

columnDefs = [
    {"field": "id"},
    # Row group by country and by year is enabled
    {"field": "country",  "rowGroup": True},
    {"field": "year",  "rowGroup": True},
    {"field": "athlete"},
    {"field": "age"},
    {"field": "date"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        html.Label("Scroll to row id:"),
        dcc.Input(id="input-scroll-to-group", min=0, max=df.shape[0], type="number"),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple"},
            defaultColDef=dict(
                resizable=True,
                sortable=True,
                filter=True,
                minWidth=150
            ),
            getRowId="params.data.id",
            id="grid-scroll-to-group",
            # Row groupings is an ag-grid Enterprise feature.
            # A license key should be provided if it is used.
            # License keys can be passed to the `licenseKey` argument of dag.AgGrid
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_ENTERPRISE'],
        ),
    ]
)


clientside_callback(
    """function (rowId) {
        if (rowId) {
            grid = dash_ag_grid.getApi("grid-scroll-to-group")
            grid.setRowNodeExpanded(grid.getRowNode(rowId), true, true)
        }
        return {"rowId": rowId.toString()}
    }""",
    Output("grid-scroll-to-group", "scrollTo"),
    Input("input-scroll-to-group", "value"),
    prevent_initial_call=True,
)


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

Scroll to row id: