Dash AG-Grid: Export Data as CSV

Dash Python
1

I have modified code taken from Dash AG-Grid: Export Data As Excel to both prepend text to and specify a filename.

While the app works, the filename is “export.csv” when it is expected to be “help.csv” and also no text (i.e., “Help” is expected) is prepended to the exported csv file.

What am I missing in the following line wrt filename and prependContent:

dag.AgGrid(
            id="grid-excel-export",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "filter": True},
            enableEnterpriseModules=True,
            dashGridOptions={"rowSelection":"multiple", 
                             "csvExportParams": {"filename": "help.csv", "prependContent": "Help"},
                             },),])

Below is a full minimal code (again, taken from the aforementioned posting) example:

import dash_ag_grid as dag
from dash import Dash, html, Input, Output, clientside_callback
import pandas as pd
import os

app = Dash(__name__)

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

columnDefs = [
    {
        "headerName": "Athlete Details",
        "children": [
            {"field": "athlete", "width": 180},
            {"field": "age", "width": 90},
            {"field": "country", "width": 140},
        ],
    },
    {
        "headerName": "Sports Results",
        "children": [
            {"field": "sport", "width": 140},
            {"field": "total", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "closed"},
            {"field": "gold", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
            {"field": "silver", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
            {"field": "bronze", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
        ],
    },
]

app.layout = html.Div(
    [
        html.Button("Export to csv", id="btn-excel-export"),
        dag.AgGrid(
            id="grid-excel-export",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "filter": True},
            enableEnterpriseModules=True,
            dashGridOptions={"rowSelection":"multiple", 
                             "csvExportParams": {"filename": "help.csv", "prependContent": "Help"},
                             },),])

clientside_callback(
    """function (n) {
        if (n) {
            dash_ag_grid.getApi("grid-excel-export").exportDataAsCsv();
        }
        return dash_clientside.no_update
    }""",
    Output("btn-excel-export", "n_clicks"),
    Input("btn-excel-export", "n_clicks"),
    prevent_initial_call=True
)


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

Hi @EnergyAnt

If you are just exporting a file as csv, then you don’t need to use AG Grid Enterprise. The forum post was for exporting as Excel where an Enterprise license is required.

Please see the “Additional Options” example in the export as CSV dash-ag-grid docs:

3

Hi @AnnMarieW

Thank you for your response. However, I’m still muddled.

After I commented out the enableEnterpriseModules=True, I reran the app. The downloaded file is still named export.csv and does not have “Help” prepended to the csv file.

Perhaps I am missing the point, which is highly likely.

Could you tell me how to codify the dashGridOptions and csvExportParams to assign a filename and prepended text in the minimal example that I tweaked (very minor) to send out a csv file, rather than an Excel?

We don’t have the Enterprise version in my organization.

Ty,
Ant

4

Hi @EnergyAnt

Be sure to refer to the Export to CSV section of the docs for more information. Below is a complete minimal example based on the last example on that page. It’s in the section called “Additional Options”

import dash_ag_grid as dag
from dash import Dash, html, Input, Output
import pandas as pd

app = Dash(__name__)

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

columnDefs = [
    {
        "headerName": "Athlete Details",
        "children": [
            {"field": "athlete", "width": 180},
            {"field": "age", "width": 90},
            {"field": "country", "width": 140},
        ],
    },
    {
        "headerName": "Sports Results",
        "children": [
            {"field": "sport", "width": 140},
            {"field": "total", "width": 100},
            {"field": "gold", "width": 100},
            {"field": "silver", "width": 100},
            {"field": "bronze", "width": 100},
        ],
    },
]

app.layout = html.Div(
    [
        html.Button("Export to csv", id="btn-export", n_clicks=0),
        dag.AgGrid(
            id="grid",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "filter": True},
            csvExportParams={"fileName": "help.csv", "prependContent": "Help"},
            dashGridOptions={"rowSelection":"multiple",}
            ),
    ])

@app.callback(
    Output("grid", "exportDataAsCsv"),
    Input("btn-export", "n_clicks"),
    prevent_intial_call=True
)
def export(n):
    if n > 0:
        return True
    return False
5

Hi @AnnMarieW

Thank you so much for the help. Wonder tool and even better forum responses!

2024-08-26_23-31-59

The above screenshot shows the downloaded file. I see that csvExportParams is not a subset of dashGridOptions, and I was also presuming the opposite.

Again, Ty,
Ant

1 Like