Dash AG Grid - Export file and keep headername format in csv

Dash Python
1

I’m trying to use column groups in Dash Ag Grid and then export it. But in the exported file, column groups will not show as Dash Ag Grid but just show on the first children columns. For example:

Dash Ag Grid:

Screenshot 2023-08-25 140734
Screenshot 2023-08-25 1407341897×501 17.9 KB

Exported File:

Screenshot 2023-08-25 140754
Screenshot 2023-08-25 1407541037×267 9.08 KB

Below is my code:

import dash
import dash_ag_grid as dag
from dash import dcc, html
import pandas as pd
import dash_mantine_components as dmc
app = dash.Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {
        "headerName": "Group 1",
        "children": [
            {"field": "athlete", "minWidth": 170, "resizable": True},
            {"field": "age", "resizable": True},
        ],
    },
    {
        "headerName": "Group 2",
        "children": [
            {"field": "country"},
            {"field": "year"},
            {"field": "date"},
            {"field": "sport"},
            {"field": "gold"},
            {"field": "silver"},
            {"field": "bronze"},
            {"field": "total"},
        ],
    },
]

defaultColDef = {"sortable": True, "filter": True, "editable": True}

app.layout = html.Div([
    dmc.Grid([
        dmc.Col([
            dcc.Markdown("Demonstration of header styling."),
            dmc.Button('Download', id='export'),
            dag.AgGrid(
                id='table_1',
                className="ag-theme-alpine headers1",
                columnDefs=columnDefs,
                rowData=df.to_dict("records"),
                defaultColDef=defaultColDef,
                dashGridOptions={"pagination":True, "paginationPageSize":20},
                csvExportParams={'filename':'Download.csv'}
            )
        ])
    ]),
    
    dmc.Grid([
        dmc.Col([
            dcc.Markdown("Demonstration of header column separators and resize handles."),
            dag.AgGrid(
                className="ag-theme-alpine headers2",
                columnDefs=columnDefs,
                rowData=df.to_dict("records"),
                defaultColDef=defaultColDef,
                dashGridOptions={"pagination":True, "paginationPageSize":20}),
        ])
    ])
])

@app.callback(Output('table_1', 'exportDataAsCsv'), 
              Input('export', 'n_clicks'))

def export(n_clicks):
    if n_clicks:
        return True
    return False


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

So I’m curious is there anyway to export file and keep headername format as Ag Grid. Thank you.

2

Hello @hoatran,

You may be able to use this in the params:

You need to figure out how to get it to display the group name. I don’t know if this is possible.

1 Like
3

Thank you Bryan. I will try to read it.

1 Like