Ag-grid on Tree Structured Data

[Luigi_Salemi]

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

[thunderbug1]

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

[Luigi_Salemi]

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

[thunderbug1]

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)

[imClumsyPanda]

@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:

[imClumsyPanda]

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

[Luigi_Salemi]

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?

[imClumsyPanda]

@Luigi_Salemi Try this

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
)

[Quajijalon]

I noticed that you set suppressCount in autoGroupColumnDef.cellRendererParams to true. Is this supposed to suppress the child count in the UI? If so, this is not working.

In general, modifying any of the gridOptions for autoGroupColumnDef seems to have no impact on the Group Column

[Quajijalon]

Figured out why.

There’s an extra comma at the end of this assignment, turning the dict into a tuple:

gridOptions[“autoGroupColumnDef”]= {
“headerName”: ‘Organisation Hierarchy’,
“minWidth”: 300,
“cellRendererParams”: {
“suppressCount”: True,
},
},

[ravins10]

Thanks for this. I am looking for a similar feature with the following differences:

1. I will have 3 levels such as A/B/C
2. When I display the data for “C”, I would like additional columns only for row C. So, my 3rd level could be a separate dataframe and columns from A & B will be present but it will also have some addtional columns and I would only like to display those columns when C is displayed.

Would appreciate information on how this can be accomplished.