How to correctly implement getDataPath for Tree structures in Dash AG Grid (python)

Dash Python
1

I am trying to implement a data table that has a ‘tree structure’ such that the table is render with rows that have drop downs for additional rows (children). Below is a basic Dash app I have created and tried to run but the table appears blank and the console reports the following error “AG Grid: getDataPath() should not return an empty path for data [object Object]”. Can someone advise on the correct implementation?

Please note that an AG Grid enterprise key has to be provided to run this type of type of table.

import dash
from dash import Dash, html
from dash_ag_grid import AgGrid


app = Dash()

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(
    [
        AgGrid(
            id="tree-data-example",
            columnDefs=[
                {"field": "jobTitle"},
                {"field": "employmentType"},
            ],
            defaultColDef={
                "flex": 1,
            },
            dashGridOptions={
                "autoGroupColumnDef": {
                    "headerName": "Organisation Hierarchy",
                    "minWidth": 300,
                    "cellRendererParams": {
                        "suppressCount": True,
                    },
                },
                "groupDefaultExpanded": -1,

                "getDataPath": "function(data) { return data.orgHierarchy; }",

                "treeData": True,
                "animateRows": False,
            },
            rowData=rowData,
            enableEnterpriseModules=True,
            licenseKey = DAG_KEY  # an enterprise AG grid key needs to be added
        ),
    ]
)

app.layout = html.Div(
    [
        grid,
    ]
)

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

Hi @wcarpenter and welcome to the Dash community :slight_smile:

Try

dashGridOptions={
  "getDataPath": {"function": "params.orgHierarchy"},

}
1 Like
3

Thanks for the follow up - should this work without any additional .js files? Aiming to build something out that doesn’t need to rely on one if I can avoid it.

4

Did you try the solution I provided?

5

Update - this worked … thank you!