Dash AG Grid

35.2.0 · active · verified Sat Apr 11

Dash AG Grid, currently at version 35.2.0, is a high-performance and highly customizable Dash component that wraps the AG Grid JavaScript library. It enables Python developers to create rich, interactive data tables within their Dash applications, offering features like sorting, filtering, and row selection. Actively maintained by Plotly, it receives frequent updates that often align with new releases of the underlying AG Grid component.

Warnings

breaking Theming API changed significantly in `v33+`. Previously, themes were applied via the `className` prop (e.g., `className="ag-theme-alpine"`). From `v33` onwards, themes are configured through a new `theme` API, often set via the `dashGridOptions` property. Applications upgrading from `v32` or earlier will need to update their theme implementation.
Fix: For versions `v33+`, use the new theme API. For example, pass `dashGridOptions={'theme': 'alpine'}` or custom CSS variables instead of `className` for theming. Refer to the official Dash AG Grid documentation on theming.
gotcha Dynamic updates to `columnDefs` (column definitions) can conflict with the grid's internal `columnState` (e.g., user-sorted columns, resized columns). This can lead to unexpected reordering or state loss.
Fix: When dynamically updating `columnDefs`, consider using the `resetColumnState()` method or carefully managing `columnState` as an input/output in callbacks. Prefer `flex` over `sizeToFit` for column sizing to reduce conflicts.
gotcha Implementing custom cell renderers, cell editors, or advanced custom filters often requires writing JavaScript functions or components. These must be defined in `.js` files within your Dash app's `assets/` directory and exposed in specific global JavaScript namespaces (e.g., `window.dashAgGridComponentFunctions`, `window.dashAgGridFunctions`).
Fix: Be prepared to write and manage JavaScript for complex custom grid behaviors. Place JavaScript files in the `assets/` folder and ensure functions/components are registered in the correct `window.dashAgGrid*Functions` namespaces. Consult the 'JavaScript and Dash AG Grid' section of the official documentation.
breaking For security reasons, rendering raw HTML with the Markdown component or executing string expressions in grid properties (e.g., `valueFormatter` or `cellRenderer` when passed as strings) requires explicitly setting `dangerously_allow_code=True`. Without it, such content will be sanitized or ignored. In `v35.2.0`, `linkTarget` in Markdown also requires this prop for certain behaviors.
Fix: If you need to render raw HTML or execute string-based JavaScript, set `dangerously_allow_code=True` on the `AgGrid` component. For custom components or trusted HTML, using Python functions for `cellRenderer` or defining custom JavaScript components is generally safer.

Install

pip install dash-ag-grid Install latest version

Imports

DashAgGrid
```
import dash_ag_grid as dag
```
The convention is to import as 'dag' to reference the main component, 'AgGrid', as 'dag.AgGrid'.

Quickstart

This quickstart creates a basic Dash app displaying a Pandas DataFrame in an interactive AG Grid, demonstrating the minimal setup for displaying tabular data.

import dash_ag_grid as dag
import pandas as pd
from dash import Dash, html

app = Dash(__name__)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv")

app.layout = html.Div(
    [
        dag.AgGrid(
            rowData=df.to_dict("records"),
            columnDefs=[{"field": i} for i in df.columns],
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

view raw JSON →