Aggrid _headerName of multi-index dataframe does not merge

Dash Python
1

I’m trying to transform from flattened dataframe to multi-index with Aggrid but I have a problem as below:

import pandas as pd
import numpy as np
from dash import Dash, html
import dash_ag_grid as dag

branch_names = [f"Branch_{i}" for i in range(1, 11)]
date1 = '20241231'
date2 = '20250220'

data = {
    'Branch': branch_names,
    date_1 + '_001': np.random.randint(60, 90, 10),
    date_1 + '_002': np.random.randint(60, 90, 10),
    date_1 + '_003': np.random.randint(60, 90, 10),
    date_2 + '_001': np.random.randint(60, 90, 10),
    date_2 + '_002': np.random.randint(60, 90, 10),
    date_2 + '_003': np.random.randint(60, 90, 10),
    date_3 + '_001': np.random.randint(60, 90, 10),
    date_3 + '_002': np.random.randint(60, 90, 10),
    date_3 + '_003': np.random.randint(60, 90, 10)
}

# Chuyển thành DataFrame
df = pd.DataFrame(data)

columnDefs = [{"field": "Branch"}] + [{
    "headerName": date1,
    "children": [{"field": date1 + '_' + f"{i}", "headerName": i}]}
    for i in ['001', '002', '003']] + [{
    "headerName": date2,
    "children": [
        {"field": date2 + '_' + f"{i}", "headerName": i}]}
    for i in ['001', '002', '003']]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            defaultColDef={"minWidth": 100, "sortable": False},
            dashGridOptions={"suppressRowTransform": True},
        )
    ]
)

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

Screenshot 2025-02-26 132341
Screenshot 2025-02-26 1323411105×462 8.45 KB

Actually it worked but headerName as 20241231, 20250220 does not merge as I understand. What am I wrong here.

Thank you.

2

Hello @hoatran,

It looks like your iteration is on the wrong level.

To adjust, I’d print out the columnDefs, I’d also recommend making it easier to digest and see what it is doing. I’d make a function that will append to the columnDefs instead of trying to do it in one line.

3

Thank you. I changed code as below and it worked.

import pandas as pd
import numpy as np
from dash import Dash, html
import dash_ag_grid as dag

branch_names = [f"Branch_{i}" for i in range(1, 11)]
date_1 = '20241231'
date_2 = '20250214'
date_3 = '20250220'

data = {
    'Branch': branch_names,
    date_1 + '_001': np.random.randint(60, 90, 10),
    date_1 + '_002': np.random.randint(60, 90, 10),
    date_1 + '_003': np.random.randint(60, 90, 10),
    date_2 + '_001': np.random.randint(60, 90, 10),
    date_2 + '_002': np.random.randint(60, 90, 10),
    date_2 + '_003': np.random.randint(60, 90, 10),
    date_3 + '_001': np.random.randint(60, 90, 10),
    date_3 + '_002': np.random.randint(60, 90, 10),
    date_3 + '_003': np.random.randint(60, 90, 10)
}

# Chuyển thành DataFrame
df = pd.DataFrame(data)

# Định nghĩa columnDefs
columnDefs = [{"field": "Branch"}] + [
    {"headerName": date, "children": [
        {"field": f"{date}_{i}", "headerName": i} for i in ['001', '002', '003']
    ]}
    for date in [date_1, date_2, date_3]
]

# In để kiểm tra
print(columnDefs)

app = Dash(__name__)
app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            defaultColDef={"minWidth": 100, "sortable": False},
            dashGridOptions={"suppressRowTransform": True}
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=False)
1 Like