Dash AG-Grid: Export Data As Excel

Hi @Maxx and welcome to the Dash community :slight_smile:

This is available now - it’s just not documented yet.

Be sure to update to the latest version of dash-ag-grid (currently V2.3.0)

Here are a few examples to get you started:

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 Excel", id="btn-excel-export"),
        dag.AgGrid(
            id="grid-excel-export",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "filter": True},
            enableEnterpriseModules=True,
           
        ),
    ]
)

clientside_callback(
    """function (n) {
        if (n) {
            dash_ag_grid.getApi("grid-excel-export").exportDataAsExcel();
        }
        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)



Here’s the example from the docs with styled headers:

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"
)

excelStyles = [
    {
        "id": "header",
        "alignment": {
            "vertical": "Center",
        },
        "interior": {
            "color": "#f8f8f8",
            "pattern": "Solid",
            "patternColor": "undefined",
        },
        "borders": {
            "borderBottom": {
                "color": "#ffab00",
                "lineStyle": "Continuous",
                "weight": 1,
            },
        },
    },
    {
        "id": "headerGroup",
        "font": {
            "bold": "true",
        },
    },
    {
        "id": "gold-header",
        "interior": {
            "color": "#E4AB11",
            "pattern": "Solid",
        },
    },
    {
        "id": "silver-header",
        "interior": {
            "color": "#bbb4bb",
            "pattern": "Solid",
        },
    },
    {
        "id": "bronze-header",
        "interior": {
            "color": "#be9088",
            "pattern": "Solid",
        },
    },
]

columnDefs = [
    {"field": "athlete"},
    {"field": "sport", "minWidth": 150},
    {
        "headerName": "Medals",
        "children": [
            {"field": "gold", "headerClass": "gold-header"},
            {"field": "silver", "headerClass": "silver-header"},
            {"field": "bronze", "headerClass": "bronze-header"},
        ],
    },
]

defaultColDef = {
    "sortable": True,
    "filter": True,
    "resizable": True,
    "minWidth": 100,
    "flex": 1,
}

app.layout = html.Div(
    [
        html.Button("Export to Excel", id="btn-excel-header-style"),
        dag.AgGrid(
            id="grid-excel-header-style",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef=defaultColDef,
            dashGridOptions={
                "excelStyles": excelStyles,
                "defaultExcelExportParams": {"headerRowHeight": 30},
            },
            enableEnterpriseModules=True,
           
        ),
    ],
    className="excel-header-style",
)

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


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


Here’s an example with formulas exported too:

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

app = Dash(__name__)

rowData = [
    {"firstName": "Mair", "lastName": "Inworth", "age": 23, "company": "Rhyzio"},
    {"firstName": "Clair", "lastName": "Cockland", "age": 38, "company": "Vitz"},
    {"firstName": "Sonni", "lastName": "Jellings", "age": 24, "company": "Kimia"},
    {
        "firstName": "Kit",
        "lastName": "Clarage",
        "age": 27,
        "company": "Skynoodle",
    },
    {
        "firstName": "Tod",
        "lastName": "de Mendoza",
        "age": 29,
        "company": "Teklist",
    },
    {"firstName": "Herold", "lastName": "Pelman", "age": 23, "company": "Divavu"},
    {"firstName": "Paula", "lastName": "Gleave", "age": 37, "company": "Demimbu"},
    {"firstName": "Seumas", "lastName": "Pouck", "age": 34, "company": "Aimbu"},
    {"firstName": "Luigi", "lastName": "Rive", "age": 25, "company": "Quatz"},
    {"firstName": "Carolyn", "lastName": "Blouet", "age": 29, "company": "Eamia"},
]


excelStyles = [
    {
        "id": "fullName",
        "dataType": "Formula",
    }
]
columnDefs = [
    {"field": "firstName"},
    {"field": "lastName"},
    {
        "headerName": "Full Name",
        "colId": "fullName",
        "cellClass": "fullName",
        "valueGetter": {
            "function": "`${params.data.firstName} ${params.data.lastName}`"
        },
    },
    {"field": "age"},
    {"field": "company"},
]

defaultColDef = {
    "sortable": True,
    "filter": True,
    "resizable": True,
    "minWidth": 100,
    "flex": 1,
}

app.layout = html.Div(
    [
        html.Button("Export to Excel", id="btn-excel-formula-data-type"),
        dag.AgGrid(
            id="grid-excel-formula-data-type",
            rowData=rowData,
            columnDefs=columnDefs,
            defaultColDef=defaultColDef,
            dashGridOptions={
                "excelStyles": excelStyles,
            },
            enableEnterpriseModules=True,
           
        ),
    ],
)


app.clientside_callback(
    """async function (id) {           
            grid = await dash_ag_grid.getApiAsync(id)
            grid.gridOptionsService.gridOptions.defaultExcelExportParams = defaultExcelExportParams
             
            return window.dash_clientside.no_update
        }""",
    Output("grid-excel-formula-data-type", "id"),
    Input("grid-excel-formula-data-type", "id"),
)


clientside_callback(
    """async function (n) {
        if (n) {
            grid = await await dash_ag_grid.getApiAsync("grid-excel-formula-data-type")
            grid.exportDataAsExcel(defaultExcelExportParams);
        }
        return dash_clientside.no_update
    }""",
    Output("btn-excel-formula-data-type", "n_clicks"),
    Input("btn-excel-formula-data-type", "n_clicks"),
    prevent_initial_call=True,
)


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


5 Likes