New releases of Dash AG Grid are now available:
- v34.3.0
- v35.3.0
- v36.0.0rc0 (release candidate)
These releases add support for new AG Grid features, expand Master/Detail capabilities, support for Integrated Charts and include several bug fixes and internal improvements.
A reminder about the AG Grid documentation
When using Dash AG Grid, be sure to reference the AG Grid documentation that matches your Dash AG Grid version. AG Grid evolves quickly, and examples or APIs from a newer AG Grid release may not yet be available in the Dash wrapper.
The Dash AG Grid documentation includes links to the appropriate upstream AG Grid documentation for each supported version:
Added
AG Charts support (#448)
Dash AG Grid now supports AG Charts, which were split into a separate package beginning with AG Grid v33. This enables Integrated Charts to continue working with newer versions of AG Grid.
To use Integrated Charts, configure:
enableEnterpriseModules=True # unlock for trial
licenseKey="Your Enterprise license",
chartsLicenseKey="Your Enterprise Chart license",
dashChartMode="community" # or "enterprise"
dashGridOptions={"enableCharts": True}
See example below.
Dynamic detailCellRendererParams for Master/Detail (#455)
detailCellRendererParams can now be provided dynamically. This makes it possible to customize each detail grid independently, including generating different column definitions or grid options based on the selected master row.
Function support for processUnpinnedColumns (#468)
The processUnpinnedColumns grid option now accepts a JavaScript callback function. This allows you to control which columns are unpinned when the grid needs to make room for additional pinned columns.
Callback support for groupAggFiltering (#472)
The groupAggFiltering option now supports callback functions, allowing filtering behavior to be customized dynamically instead of using a fixed configuration.
Changed
More robust function parsing (#452)
Improved parsing of OBJ_MAYBE_FUNCTION_OR_MAP_MAYBE_FUNCTIONS by verifying that a value is an object before attempting to parse it. This makes it possible to reuse property names in other contexts without them being incorrectly treated as function maps.
Fixed
Server-side row count of zero (#454)
Fixed an issue where a server-side rowCount of 0 prevented the grid from displaying new data when it later became available.
Removed unnecessary callback warnings (#459)
getRowsRequest and getRowsResponse are Dash callback properties, not AG Grid options. They are now excluded from the grid options passed to AG Grid, eliminating unnecessary console warnings.
getRowId=None (#460)
Fixed grid rendering when getRowId is explicitly set to None. This now correctly falls back to AG Grid’s default row identification behavior.
Sort initialization error (#466)
Fixed an uncaught TypeError that could occur during grid initialization when sorting was restored from initialState.sort.sortModel. The grid now safely handles cases where the gridApi is not yet available.
Thanks!
Thanks to everyone who reported issues, submitted pull requests, and helped improve Dash AG Grid.
Special thanks to @jinnyzor for being the lead maintainer of Dash AG Grid.
Examples
Enabling Integrated Charts (Ag Grid Enterprise)
Here is a minimal example of enabling integrated charts with dash-ag-grid.
import dash
from dash import html, dcc, Input, Output, State
import dash_ag_grid as dag
import pandas as pd
app = dash.Dash()
# Sample data
df = pd.DataFrame([
{"commodity": "Gold", "q1": 1200, "q2": 1350, "q3": 1400, "q4": 1450},
{"commodity": "Silver", "q1": 15, "q2": 18, "q3": 17, "q4": 22},
{"commodity": "Copper", "q1": 3.2, "q2": 3.5, "q3": 3.1, "q4": 3.8},
{"commodity": "Zinc", "q1": 1.1, "q2": 1.2, "q3": 1.15, "q4": 1.3},
])
column_defs = [
{"field": "commodity", "chartDataType": "category"},
{"field": "q1", "type": "numericColumn", "chartDataType": "series"},
{"field": "q2", "type": "numericColumn", "chartDataType": "series"},
{"field": "q3", "type": "numericColumn", "chartDataType": "series"},
{"field": "q4", "type": "numericColumn", "chartDataType": "series"},
]
app.layout = html.Div([
html.Button(
"Trigger Range Chart via API",
id="trigger-chart-btn",
n_clicks=0,
style={"marginBottom": "15px", "padding": "10px"}
),
dag.AgGrid(
id="portfolio-grid",
columnDefs=column_defs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
# Enable enterprise and charting features
enableEnterpriseModules=True, # enabled for testing enter you license keys for production
# licenseKey="Your Enterprise license",
# chartsLicenseKey="Your Enterprise Chart license",
dashChartMode="community", # or "enterprise"
dashGridOptions={
"enableCharts": True,
"cellSelection": True, # Required for range charting
},
),
])
app.clientside_callback(
"""
function(n_clicks, grid_id) {
if (!n_clicks) {
return window.dash_clientside.no_update;
}
// Fetch the grid API instance from Dash AG Grid global registry
const gridApi = dash_ag_grid.getApi(grid_id);
if (gridApi) {
const params = {
cellRange: {
rowStartIndex: 0,
rowEndIndex: 3,
columns: ['commodity', 'q1', 'q2', 'q3', 'q4'],
},
chartType: 'groupedColumn',
chartContainer: null, // Displays chart in default popup window
aggFunc: null
};
// Invoke the native AG Grid Enterprise chart API
gridApi.createRangeChart(params);
}
return window.dash_clientside.no_update;
}
""",
Output("trigger-chart-btn", "id"), # Dummy output requirement
Input("trigger-chart-btn", "n_clicks"),
State("portfolio-grid", "id"),
prevent_initial_call=True
)
if __name__ == "__main__":
app.run(debug=True)
Support for groupAggFiltering
The groupAggFiltering option now supports functions, allowing filtering behavior to be customized dynamically instead of using a fixed configuration.
Here is a dash version of the example in the G Grid docs:
https://www.ag-grid.com/archive/35.3.0/react-data-grid/aggregation-filtering/#filtering-for-aggregated-values
This example filters based on the group totals rather than the item total
from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
app = Dash()
column_defs = [
{"field": "country", "rowGroup": True, "hide": True},
{"field": "year"},
{"field": "total", "aggFunc": "sum", "filter": "agNumberColumnFilter"},
]
default_col_def = {
"flex": 1,
"floatingFilter": True,
}
auto_group_column_def = {
"field": "athlete",
}
app.layout = html.Div(
children=[
dag.AgGrid(
id="olympic-grid",
rowData=df.to_dict("records"),
columnDefs=column_defs,
defaultColDef=default_col_def,
dashGridOptions={
"groupAggFiltering": {"function": "!!params.node.group"},
"groupDefaultExpanded": -1,
"autoGroupColumnDef": auto_group_column_def,
},
enableEnterpriseModules=True,
)
],
)
if __name__ == "__main__":
app.run(debug=True)