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.
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)