Tree Data 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.
Use Tree Data to display data with parent-child relationships. Enable it via the dashGridOptions
by setting treeData
to True
:
dag.AgGrid(
dashGridOptions={"treeData": True},
)
When providing tree data to the grid, you will need to use a function with the getDataPath
prop to tell the
grid the hierarchy for each row. The function must return a string[] representing the route, with each element
specifying a level of the tree. Below are two examples presenting the hierarchy in different ways.
dag.AgGrid(
dashGridOptions={"getDataPath": {"function": "getDataPath(params)"}},
)
The getDataPath(params)
function is defined in the dashAgGridFunctions.js
file in the assets folder.
The following are two examples with a sample hierarchy, Malcolm is child of Erica
# + Erica
# - Malcolm
rowData = [
{ 'orgHierarchy': ['Erica'], 'jobTitle': "CEO", 'employmentType': "Permanent" },
{ 'orgHierarchy': ['Erica', 'Malcolm'], 'jobTitle': "VP", 'employmentType': "Permanent" }
...
]
Just return the hierarchy. No conversion is required:
Defined in /assets/dashAgGridFunctions.js
:
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.getDataPath = function (data) {
return data.orgHierarchy;
}
rowData = [
{ 'path': "Erica", jobTitle: "CEO", 'employmentType': "Permanent" },
{ 'path': "Erica/Malcolm", jobTitle: "VP", 'employmentType': "Permanent" }
...
]
This function converts “Erica/Malcolm” to [“Erica”,”Malcolm”]
Defined in /assets/dashAgGridFunctions.js
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.getDataPath = function (data) {
return data.path.split('/'); // path: "Erica/Malcolm"
}
There are two ways to configure the Group Column:
import dash_ag_grid as dag
from dash import Dash, Input, Output, html, dcc
import dash_bootstrap_components as dbc
import os
app = Dash(__name__)
rowData = [
{
"orgHierarchy": ["Erica Rogers"],
"jobTitle": "CEO",
"employmentType": "Permanent",
},
{
"orgHierarchy": ["Erica Rogers", "Malcolm Barrett"],
"jobTitle": "Exec. Vice President",
"employmentType": "Permanent",
},
{
"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker"],
"jobTitle": "Director of Operations",
"employmentType": "Permanent",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Esther Baker",
"Brittany Hanson",
],
"jobTitle": "Fleet Coordinator",
"employmentType": "Permanent",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Esther Baker",
"Brittany Hanson",
"Leah Flowers",
],
"jobTitle": "Parts Technician",
"employmentType": "Contract",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Esther Baker",
"Brittany Hanson",
"Tammy Sutton",
],
"jobTitle": "Service Technician",
"employmentType": "Contract",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Esther Baker",
"Derek Paul",
],
"jobTitle": "Inventory Control",
"employmentType": "Permanent",
},
{
"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland"],
"jobTitle": "VP Sales",
"employmentType": "Permanent",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Francis Strickland",
"Morris Hanson",
],
"jobTitle": "Sales Manager",
"employmentType": "Permanent",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Francis Strickland",
"Todd Tyler",
],
"jobTitle": "Sales Executive",
"employmentType": "Contract",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Francis Strickland",
"Bennie Wise",
],
"jobTitle": "Sales Executive",
"employmentType": "Contract",
},
{
"orgHierarchy": [
"Erica Rogers",
"Malcolm Barrett",
"Francis Strickland",
"Joel Cooper",
],
"jobTitle": "Sales Executive",
"employmentType": "Permanent",
},
]
grid = html.Div(
[
dag.AgGrid(
id="tree-data-example",
columnDefs=[
# we're using the auto group column by default!
{"field": "jobTitle"},
{"field": "employmentType"},
],
defaultColDef={
"flex": 1,
},
dashGridOptions={
"autoGroupColumnDef": {
"headerName": "Organisation Hierarchy",
"minWidth": 300,
"cellRendererParams": {
"suppressCount": True,
},
},
"groupDefaultExpanded": -1,
"getDataPath": {"function": "getDataPath(params)"},
"treeData": True,
},
rowData=rowData,
enableEnterpriseModules=True,
licenseKey = os.environ['AGGRID_ENTERPRISE'],
),
]
)
app.layout = html.Div(
[
dcc.Markdown("Example: Organisational Hierarchy using Tree Data "),
grid,
]
)
if __name__ == "__main__":
app.run(debug=True)
To run this example, include the following in the dashAgGridFunctions.js
file in your app’s assets folder
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.getDataPath = function (data) {
return data.orgHierarchy;
}