Ag-grid on Tree Structured Data

I’m trying to create a table to display tree structured data, I currently have a json file with my tree structured similar to the data from : Angular Data Grid: SSRM Tree Data
[{
“employeeId”: 101,
“employeeName”: “Erica Rogers”,
“jobTitle”: “CEO”,
“employmentType”: “Permanent”,
“children”: [{
“employeeId”: 102,
“employeeName”: “Malcolm Barrett”,
“jobTitle”: “Exec. Vice President”,
“employmentType”: “Permanent”,
“children”: [
{
“employeeId”: 103,
“employeeName”: “Leah Flowers”,
“jobTitle”: “Parts Technician”,
“employmentType”: “Contract”
},
{
“employeeId”: 104,
“employeeName”: “Tammy Sutton”,
“jobTitle”: “Service Technician”,
“employmentType”: “Contract”
}
]
}]
}]
I would like to be able to display this data on my app using AgGrid, and be able to expand a collapse the elements on my tree as presented on this link:
Angular example
Thanks

The Aggrid component does support nested dataframes.
Here is an example: allow nesting dataframes by thunderbug1 · Pull Request #58 · PablocFonseca/streamlit-aggrid · GitHub

1 Like

This is close to what Im trying to achieve ,but I think the data structure for nested dataframes it a little bit different to the tree data structure that I have. I would like to be able to pass the treeData = true to gridOptions and pass my json data to the grid. I do not mind having to write the grid Options for every column. I would like to pass my data to the Agrid constructor and have a result similar to the example stated before.
Thanks for the reply.
pd: This how I want my data to be displayed

Ok, I think that’s not supported by the Aggrid component, at least not out of the box.
You could, however, easily hack something like this into it since all it does is to make a json object out of the pandas dataframe. Your Json object would need to be compatible to the Json format that it internally produces ( oriented by records and iso timestamps)

@Luigi_Salemi I’ve just got one solution!

df=pd.DataFrame([{"orgHierarchy": 'A', "jobTitle": "CEO", "employmentType": "Permanent" },
    { "orgHierarchy": 'A/B', "jobTitle": "VP", "employmentType": "Permanent" }])
st.write(df)
gb = GridOptionsBuilder.from_dataframe(df)
gridOptions = gb.build()


gridOptions["columnDefs"]= [
    { "field": 'jobTitle' },
    { "field": 'employmentType' },
]
gridOptions["defaultColDef"]={
      "flex": 1,
    },
gridOptions["autoGroupColumnDef"]= {
    "headerName": 'Organisation Hierarchy',
    "minWidth": 300,
    "cellRendererParams": {
      "suppressCount": True,
    },
  },
gridOptions["treeData"]=True
gridOptions["animateRows"]=True
gridOptions["groupDefaultExpanded"]= -1
gridOptions["getDataPath"]=JsCode(""" function(data){
    return data.orgHierarchy.split("/");
  }""").js_code

r = AgGrid(
    df,
    gridOptions=gridOptions,
    height=500,
    allow_unsafe_jscode=True,
    enable_enterprise_modules=True,
    filter=True,
    update_mode=GridUpdateMode.SELECTION_CHANGED,
    theme="material",
    tree_data=True
)

It shows like this:

1 Like

And this link is the instrucrtion of Ag-gird I’ve followed

Awesome!, Thanks for taking time working on such a great solution, how ever I’m having some troubles replicating your code, do you mind adding the necessary imports to run you code?

@Luigi_Salemi Try this :grin:

import pandas as pd
import streamlit as st
from st_aggrid import JsCode, AgGrid, GridOptionsBuilder

df=pd.DataFrame([{"orgHierarchy": 'A', "jobTitle": "CEO", "employmentType": "Permanent" },
    { "orgHierarchy": 'A/B', "jobTitle": "VP", "employmentType": "Permanent" }])
st.write(df)
gb = GridOptionsBuilder.from_dataframe(df)
gridOptions = gb.build()


gridOptions["columnDefs"]= [
    { "field": 'jobTitle' },
    { "field": 'employmentType' },
]
gridOptions["defaultColDef"]={
      "flex": 1,
    },
gridOptions["autoGroupColumnDef"]= {
    "headerName": 'Organisation Hierarchy',
    "minWidth": 300,
    "cellRendererParams": {
      "suppressCount": True,
    },
  },
gridOptions["treeData"]=True
gridOptions["animateRows"]=True
gridOptions["groupDefaultExpanded"]= -1
gridOptions["getDataPath"]=JsCode(""" function(data){
    return data.orgHierarchy.split("/");
  }""").js_code

r = AgGrid(
    df,
    gridOptions=gridOptions,
    height=500,
    allow_unsafe_jscode=True,
    enable_enterprise_modules=True,
    filter=True,
    update_mode=GridUpdateMode.SELECTION_CHANGED,
    theme="material",
    tree_data=True
)

1 Like