Tree Data

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

Supplying Tree Data

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

GetDataPath

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

Hierarchy in Data is Already a String Array

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;
}

Hierarchy is a Path String

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

Configuring Group Column

There are two ways to configure the Group Column:

• Auto Column Group - this is automatically selected by the grid when in Tree Data mode, however you can override the default.
• Custom Column Group - you can provide your own custom column group definition, which gives allows more control over how the Group Column is displayed.

Example: Organizational Hierarchy

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;
}