{"id":3446,"library":"dash-ag-grid","title":"Dash AG Grid","description":"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.","status":"active","version":"35.2.0","language":"en","source_language":"en","source_url":"https://github.com/plotly/dash-ag-grid","tags":["dash","plotly","datagrid","ui","interactive","table"],"install":[{"cmd":"pip install dash-ag-grid","lang":"bash","label":"Install latest version"}],"dependencies":[{"reason":"Core framework for building web applications with Dash AG Grid.","package":"dash","optional":false},{"reason":"Commonly used for data handling and preparation before display in the grid.","package":"pandas","optional":true}],"imports":[{"note":"The convention is to import as 'dag' to reference the main component, 'AgGrid', as 'dag.AgGrid'.","wrong":"from dash_ag_grid import AgGrid","symbol":"DashAgGrid","correct":"import dash_ag_grid as dag"}],"quickstart":{"code":"import dash_ag_grid as dag\nimport pandas as pd\nfrom dash import Dash, html\n\napp = Dash(__name__)\n\ndf = pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv\")\n\napp.layout = html.Div(\n    [\n        dag.AgGrid(\n            rowData=df.to_dict(\"records\"),\n            columnDefs=[{\"field\": i} for i in df.columns],\n        )\n    ]\n)\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)","lang":"python","description":"This quickstart creates a basic Dash app displaying a Pandas DataFrame in an interactive AG Grid, demonstrating the minimal setup for displaying tabular data."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"<33.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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`).","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-11T00:00:00.000Z","next_check":"2026-07-10T00:00:00.000Z"}