This guide can help you update your apps if you’re a Dash Enterprise customer migrating from Dash AG Grid 1.x to the open-source version of Dash AG Grid, 2.0.
The release of Dash AG Grid as an open-source library with version 2.0 has introduced new features and includes some breaking changes. This guide will walk you through updating apps created using the v1.x series to run with 2.0.
Breaking Changes
agGridColumn
component has been removed as it was deprecated in AG Grid v29.className
property instead of with the theme
property.ag-theme-
.dangerously_allow_code=True
must be set to render raw HTML with the Markdown component or to execute string expressions.cellStyle
is no longer a property on the AgGrid
component and is instead defined on column definitions: defaultColDef
or columnDefs
.cellStyle
functions and string expressions must be prefixed with params.
.enableResetColumnState
, enableExportDataAsCsv
, selectionChanged
, and clickData
properties have been renamed.cellRendererData
property (renamed from clickData
) no longer has direct access to the row’s data.autoSizeAllColumns
property has been removed. The same functionality is available by setting columnSize
to “autoSize”.AgGrid
component now must be passed to a new dashGridOptions
property as a dict.To update your apps using Dash AG Grid v1.x to v2.0:
requirements.txt
file.python
dash-ag-grid==2.0.0
Replace agGridColumn
components in your app with a list of column definitions and pass it to columnDefs
.
1.x
python
...
dag.AgGrid(
id="ag-grid-children",
columnSize="sizeToFit",
rowData=rowData,
style={"height": "200px"},
children=[
dag.AgGridColumn(
id="column1",
field="make",
sortable=True,
),
dag.AgGridColumn(id="column2", field="model"),
dag.AgGridColumn(
id="column3",
field="price",
),
],
),
...
2.0
```python
…
columnDefs = [
{“headerName”: “Make”, “field”: “make”, “sortable”: True},
{“headerName”: “Model”, “field”: “model”},
{“headerName”: “Price”, “field”: “price”},
]
…
dag.AgGrid(
id=”ag-grid-children-1”,
columnSize=”sizeToFit”,
columnDefs=columnDefs,
rowData=rowData,
style={“height”: “200px”},
)…
```
Rename the theme
property on AgGrid
components to className
and prepend ag-theme-
to any AG Grid-provided theme names.
Here is an example with the balham
theme:
1.x
```python
dag.AgGrid(
columnDefs=[
{
“headerName”: x,
“field”: x,
}
for x in df.columns
],
rowData=df.to_dict(“records”),
theme=”balham”,
columnSize=”sizeToFit”,
style={“height”: “250px”},
),
```
2.0
```python
dag.AgGrid(
columnDefs=[
{
“headerName”: x,
“field”: x,
}
for x in df.columns
],
rowData=df.to_dict(“records”),
className=”ag-theme-balham”,
columnSize=”sizeToFit”,
style={“height”: “250px”},
),
``
If you are using the AG Grid "alpine" theme, this is now the default, so you can delete the
themeproperty, and you don't need to add
className=”ag-theme-alpine”`.
Allow code execution on any AgGrid
that renders raw HTML with Markdown by setting dangerously_allow_code=True
on the grid.
Example grid using HTML:
``python
rowData = [
{
"make": "*Toyota* in italics",
"model": "
code snippet`”,
“link”: “Bold link*”,
“image”: f”{rain} {rain} {rain} {rain} {rain}”
},
{
“make”: “Ford in bold”,
“model”: “Mondeo”,
“link”: ‘<a>Link to new tab<a>‘,
“image”: f”{sun} {sun} {sun} {sun}”
},
{
“make”: “Porsche*** in both”,
“model”: “<b>Boxster<b> in HTML bold”,
“link”: “Example”,
“image”: rain,
},
]
raw_html_example1 = html.Div(
[
dcc.Markdown(
“This grid has both Markdown and raw HTML. By default, raw HTML is not rendered.”
),
dag.AgGrid(
columnSize=”sizeToFit”,
columnDefs=columnDefs,
rowData=rowData,
),
html.Hr(),
]
)
```
Set dangerously_allow_code=True
to render the HTML link in 2.0:
python
dag.AgGrid(
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
dangerously_allow_code=True,
),
Update cell expressions to indicate they should be executed as code. Add a dict
with a function
key and the string to be executed as that key’s value.
1.x
python
columnDefs = [
{"headerName": "Make", "field": "make", "sortable": True},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price", "valueFormatter": "Number(value).toFixed(2)"},
]
2.0
python
columnDefs = [
{"headerName": "Make", "field": "make", "sortable": True},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price", "valueFormatter": {"function": "Number(params.value).toFixed(2)"}},
]
Alternatively, you can set dangerously_allow_code=True
on the grid, as shown in the previous HTML example.
Move any cellStyle
properties on your grids to column definitions, defaultColDef
or columnDefs
.
1.x
python
dag.AgGrid(
columnDefs=[{"headerName": i, "field": i} for i in df.columns],
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef=dict(
resizable=True,
),
cellStyle={
"styleConditions": [
{
"condition": "colDef.headerName == 'State'",
"style": {"backgroundColor": "LightPink", "color": "DarkBlue"},
},
]
},
),
2.0
```python
defaultColDef = {
“cellStyle”: {
“styleConditions”: [
{
“condition”: “params.colDef.headerName == ‘State’“,
“style”: {“backgroundColor”: “LightPink”, “color”: “DarkBlue”},
},
]
},
“resizable”: True,
}
app.layout = html.Div(
[
dag.AgGrid(
columnDefs=[{“headerName”: i, “field”: i} for i in df.columns],
rowData=df.to_dict(“records”),
columnSize=”sizeToFit”,
defaultColDef=defaultColDef,
),
]
)
```
Prefix any cellStyle
parameters with params.
Here is an example of styling based on the column definition header name.
1.x
python
"cellStyle": {
"styleConditions": [
{
"condition": "colDef.headerName == 'State'",
"style": {"backgroundColor": "LightPink", "color": "DarkBlue"},
},
]
},
2.0
python
"cellStyle": {
"styleConditions": [
{
"condition": "params.colDef.headerName == 'State'",
"style": {"backgroundColor": "LightPink", "color": "DarkBlue"},
},
]
},
Update the names of the following properties:
enableResetColumnState
to resetColumnState
enableExportDataAsCsv
to exportDataAsCsv
selectionChanged
to selectedRows
clickData
to cellRendererData
Remove the autoSizeAllColumns
property anywhere it is used and replace with
columnSize: "autoSize"
. If you want to skip headers, set columnSizeOptions: {"skipHeader": True}
.
In places in your app that use cellRendererData
and you access the row data in a callback, update your callback with a State
that gets all rowData
and then filter that data as required.
1.x
python
@callback(
Output("span-click-data", "children"),
Input("ag-grid-menu", "clickData"),
)
def show_click_data(clickData):
if clickData:
return "You selected option {} from the row with make {}, model {}, and price {}.".format(
clickData["value"],
clickData["data"]["make"],
clickData["data"]["model"],
clickData["data"]["price"],
)
return "No menu item selected."
2.0
python
@callback(
Output("span-click-data", "children"),
Input("ag-grid-menu", "cellRendererData"),
State("ag-grid-menu", "rowData"),
)
def show_click_data(cellRendererData, rowData):
if cellRendererData:
row_index = cellRendererData['rowIndex']
rowData = rowData[row_index]
return "You selected option {} from the row with make {}, model {}, and price {}.".format(
cellRendererData['value'],
rowData["make"],
rowData["model"],
rowData["price"],
)
return "No menu item selected."
Move any valid AG Grid properties on your AgGrid
components that are not listed in the reference section at the end of the Dash AG Grid reference page to the property dashGridOptions
, which is new in 2.0.
Example with headerHeight
property, now available on dashGridOptions
1.x
python
dag.AgGrid(
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
defaultColDef=dict(resizable=True),
headerHeight=70
),
2.0
python
dag.AgGrid(
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
defaultColDef=dict(resizable=True),
dashGridOptions={
"headerHeight": 70,
},
),
To test your app, reinstall your app’s requirements and run the app.