Hi Everyone,
It’s a pleasure to announce that Dash AG Grid 2.4.0 is out!
pip install dash-ag-grid==2.4.0
Thank you to @jinnyzor for leading the contributions of these developments. Thank you to @AnnMarieW for supporting the community with Dash AG Grid solutions, demos, and write-ups. And thank you to @Skiks for contributing to the Dash AG Grid docs.
A reminder that dash-ag-grid 2.4.0 is a wrapper for AG Grid 29.3 5.
We are diligently working towards documenting all the features into the Dash docs. In the meantime, if you feel anything is missing, we encourage you to read the AG Grid docs - version 29.3.5.
Official Changelog 
Dash-AG-Grid v2.4.0
New
-
#243 Added function support for:
-
getContextMenuItems,isRowMaster,setPopupParent,popupParent,filter -
iterate through
csvExportParamsanddefaultCsvExportParamsfor functions:getCustomContextBelowRow,shouldRowBeSkipped,processCellCallback,processHeaderCallback,processGroupHeaderCallback,processRowGroupCallback
-
Fixed
-
#237 Fixed issue with grid components not being passed down to the detail grids
-
#232 Fixed height style to unassign automatically if
domLayout= ‘autoHeight’, addresses #231
New Features Examples:
1. Added function support for filter
Allows you to create custom functions and components for the AG Grid filters. You can find the example and images at Ag-Grid Custom Filtering - #17 by AnnMarieW
An example of dcc.RadioItems as a custom component in the header:
2. Added function support for getContextMenuItems
(AG Grid Enterprise) Allows you to customize the context menu when you right click on a cell. You can find an example and images at Context Menu in Dash AG Grid - #11 by AnnMarieW
3. Added function support for isRowMaster
(AG Grid Enterprise) Allows specifically deciding what rows in the Master Grid can be expanded. This can be useful if, for example, a Master Row has no child records, then it may not be desirable to allow expanding the Master Row.
See more info in the AG Grid Docs Dynamic Master Rows: React Data Grid: Master / Detail - Master Rows
In this example, only India has a master detail row:
import dash_ag_grid as dag
from dash import Dash, html
app = Dash(__name__)
masterColumnDefs = [
{
"headerName": "Country",
"field": "country",
"cellRenderer": "agGroupCellRenderer",
},
{"headerName": "Region", "field": "region"},
{"headerName": "Population", "field": "population"},
]
detailColumnDefs = [
{"headerName": "City", "field": "city"},
{"headerName": "Pop. (City proper)", "field": "population_city"},
{"headerName": "Pop. (Metro area)", "field": "population_metro"},
]
rowData = [
{
"country": "China",
"region": "Asia",
"population": 1411778724,
"cities": [
{"city": "Shanghai", "population_city": 24870895, "population_metro": "NA"},
{"city": "Beijing", "population_city": 21893095, "population_metro": "NA"},
{
"city": "Chongqing",
"population_city": 32054159,
"population_metro": "NA",
},
],
},
{
"country": "India",
"region": "Asia",
"population": 1383524897,
"cities": [
{
"city": "Delhi",
"population_city": 16753235,
"population_metro": 29000000,
},
{
"city": "Mumbai",
"population_city": 12478447,
"population_metro": 24400000,
},
{
"city": "Kolkata",
"population_city": 4496694,
"population_metro": 14035959,
},
],
},
{
"country": "United States",
"region": "Americas",
"population": 332593407,
"cities": [
{
"city": "New York",
"population_city": 8398748,
"population_metro": 19303808,
},
{
"city": "Los Angeles",
"population_city": 3990456,
"population_metro": 13291486,
},
{
"city": "Chicago",
"population_city": 2746388,
"population_metro": 9618502,
},
],
},
{
"country": "Indonesia",
"region": "Asia",
"population": 271350000,
"cities": [
{
"city": "Jakarta",
"population_city": 10154134,
"population_metro": 33430285,
},
],
},
]
app.layout = html.Div(
[
dag.AgGrid(
id="grid",
enableEnterpriseModules=True,
columnDefs=masterColumnDefs,
rowData=rowData,
columnSize="sizeToFit",
masterDetail=True,
detailCellRendererParams={
"detailGridOptions": {
"columnDefs": detailColumnDefs,
},
"detailColName": "cities",
"suppressCallback": True,
},
dashGridOptions={
"detailRowAutoHeight": True,
"isRowMaster": {
"function": 'params ? params.country == "India" : false'
},
},
),
]
)
if __name__ == "__main__":
app.run(debug=True)
4. Added function support for popupParent
This allows popups to extend beyond the borders of the grid. This is useful when using components in cells, especially when the grid is not tall and the full content of the popup cannot be displayed.
Here the popupParent is set with a function (see code below):
Here is the default – you will see this if you don’t set the popupParent. Note that the options are only displayed inside the borders of the grid.
import dash_ag_grid as dag
from dash import Dash, html
app = Dash(__name__)
items = [f"Product Number {i}" for i in range(15)]
app.layout = html.Div(
[
dag.AgGrid(
rowData=[{"items": i} for i in items],
columnDefs=[
{
"field": "items",
"cellEditor": "agSelectCellEditor",
"cellEditorParams": {"values": items},
"cellEditorPopup": True,
"editable": True,
}
],
style={"height": 200},
dashGridOptions={"popupParent": {"function": "setBody()"}},
)
],
)
if __name__ == "__main__":
app.run(debug=True)
"""
Add this to the dashAgGridFunctions.js file in the assets folder
----------------
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.setBody = () => {
return document.querySelector('body')
}
"""
5. More functions available in CSV exports
This example is similar to the CSV example in the dash docs but has a few more features. This example only downloads certain rows with the shouldRowBeSkipped function, and uses the processCellCallback function to format the price by prepending a $ symbol.
import dash_ag_grid as dag
import dash
from dash import Input, Output, html, dcc
app = dash.Dash(__name__)
columnDefs = [
{"headerName": "Make", "field": "make"},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price"},
{"headerName": "Sale Price", "field": "sale", "hide": True},
]
rowData = [
{"make": "Toyota", "model": "Celica", "price": 35000, "sale": 33000},
{"make": "Ford", "model": "Mondeo", "price": 32000, "sale": 29000},
{"make": "Porsche", "model": "Boxster", "price": 72000, "sale": 69000},
]
app.layout = html.Div(
[
dcc.Markdown(
"Customizing CSV Exports with `shouldRowBeSkipped` and formatted with `processCellCallback` "
),
html.Button("Download CSV", id="csv-button", n_clicks=0),
dag.AgGrid(
id="export-data-grid",
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
csvExportParams={
"fileName": "ag_grid_test.csv",
"shouldRowBeSkipped":{"function": "shouldRowBeSkipped(params)"},
"processCellCallback": {"function": "processCellCallback(params)"}
},
),
]
)
@app.callback(
Output("export-data-grid", "exportDataAsCsv"),
Input("csv-button", "n_clicks"),
)
def export_data_as_csv(n_clicks):
if n_clicks:
return True
return False
if __name__ == "__main__":
app.run_server(debug=True)
"""
Add this to the dashAgGridFunctions.js file in the assets folder
----------------
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.shouldRowBeSkipped = (params) => {
return params.node.data.make == "Ford"
}
dagfuncs.processCellCallback = (params) => {
return params.column.colDef.field == 'price'? '$' + params.value : params.value
}
"""
