Hi @Maxx and welcome to the Dash community
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)