Troubleshooting

Below are some issues you may encounter as you build your apps with Dash AG Grid, and how to resolve them.

Unexpected Keyword Argument

TypeError: The `dash_ag_grid.AgGrid` component (version 2.0.0) received an unexpected keyword argument: `<argumentName>`

You will encounter this issue if you’ve misspelled a property name or used one that does not exist on the Dash AG Grid
component.

AG Grid has many properties, but in Dash AG Grid not all of these are defined at the top level of the component.
Instead, some props need to be passed to dashGridOptions. For example, rowSelection, which is a valid AG Grid
property:

# Correct
dag.AgGrid(
    dashGridOptions={"rowSelection": "multiple"},
    # other props
)

# Incorrect
dag.AgGrid(
    rowSelection="multiple",
    # other props
)

You’ll encounter a similar issue if you try to pass a column-level property to the grid. For example, sortable is a
property that is available on columnDefs and defaultColDef, not on the AgGrid component directly:

# Incorrect
dag.AgGrid(
    sortable=True,
    # other props
)

# Correct using defaultColDef
dag.AgGrid(
    defaultColDef={"sortable": True},
    # other props
)

# Correct using columnDefs
dag.AgGrid(
    columnDefs=[
        {'field': 'athlete', 'sortable': True},
        {'field': 'sport'},
        {'field': 'age'},
    ]
    # other props
)

Note, if you’re migrating from Dash AG Grid 1.x to 2.0, note that some property names have changed. See
the migration guide for a complete list.

Property Doesn’t Work - No Error in Dash

You often won’t get an error message from Dash if something in the grid is not working. Errors handled by AG Grid are
displayed as messages in the browser console. Be sure to check for both warning messages and error messages.

For example, if you use an invalid prop in columnDefs or defaultColDef you will not get an error message from Dash.
If you open your browser console, you will see a warning message like the image below. Note that invalid props will be
ignored, and will seem to “fail silently”.

If you are using raw HTML in Markdown or other components that accept raw HTML, or if you are using string expressions
rather than the safer method of validated functions, you must set dangerously_allow_code=True, otherwise you will see
the following message in the browser console:

Solution 1:

Before setting dangerously_allow_code=True, please try other ways to make your app more secure. For more info on using
functions, see the JavaScript and Dash AG Grid page.
Instead of rendering raw HTML, consider using custom components.

Solution 2:

dag.AgGrid(
    dangerously_allow_code=True,
    # other props
)

The Grid is Gone

Solution: The grid must always have a theme class set on its container, whether this is a provided theme or your
own. The default is className="ag-theme-alpine". If you set the grid’s className property to something else, be sure
to include the theme.

For more information see the Themes section of the docs.

Dot Notation Not Working

If your field names contain spaces, then you cannot use dot notation (for example, params.data.date)

Solution: Use square brackets around the field name. (for example, params.data['invoice date'])

For example, if your data looks like:

rowData = [
    {'invoice date': '12-31-2023', 'price': 100.00}
    # other rows
]

# Incorrect
"valueGetter": {"function": "d3.timeParse('%Y-%m-%d')(params.data.invoice date)"}

# Incorrect
myDate = "invoice date"
"valueGetter": {"function": "d3.timeParse('%Y-%m-%d')(params.data.myDate)"}

# Correct
"valueGetter": {"function": "d3.timeParse('%Y-%m-%d')(params.data['invoice date'])"}

Custom Function Not Working

Dash AG Grid includes a log function for debugging. For more details see
the Log Function section in JavaScript and Dash AG Grid.

Additional Resources

If you are still having issues, check
the Dash AG Grid Github issues page,
the AG Grid issues page, or search or post in
the Dash Community Forum.