Overview

Dash Ag-Grid is a Dash Enterprise component library.
Dash Enterprise is the fastest way to write & deploy Dash apps and
Jupyter notebooks.
10% of the Fortune 500 uses Dash Enterprise to productionize AI and
data science apps. Find out if your company is using Dash Enterprise.

Dash Ag-Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids. Some AG Grid features include the ability for users to reorganize grids (column pinning, sizing, and hiding), grouping rows, and nesting grids within another grid’s rows.

These docs are using Dash Ag-Grid version 1.3.1, which uses version 27.2.1 of AG Grid. It’s not possible to change the AG Grid version used, but it is updated regularly with each new version of Dash Ag-Grid.

>>> import dash_ag_grid as dag
>>> print(dag.__version__)
1.3.1

AG Grid Community Vs Enterprise

AG Grid comes in Community and Enterprise versions and Dash Ag-Grid supports features of both. If you have an AG Grid license key, you can use this to access enterprise AG Grid features in your Dash apps.

Note: An AG Grid license key is not included with Dash Enterprise. It can be purchased directly from AG Grid.
For further information on the distinction between AG Grid Community and Enterprise versions, how to get a license, and how to know which features are Enterprise features, see
JavaScript Data Grid: Community and Enterprise in the official AG Grid docs.

Example

Here’s a simple example of what you can do with Dash Ag-Grid.
Note in the following example:
- There are menu options available when you hover over a column that you can use to pin, hide/show, and autosize the column. Note: this is an AG Grid Enterprise feature.
- You can resize the columns by hovering between the column headers and clicking and dragging on the resize cursor that appears.
- You can change the order of columns by dragging them to a different position in the grid.
- You can easily hide columns by dragging them off the grid.

import dash_ag_grid as dag
import dash_design_kit as ddk
import dash
import pandas as pd
import os

app = dash.Dash(__name__)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app.layout = ddk.Row(
    [
        dag.AgGrid(
            enableEnterpriseModules=True,
            licenseKey = os.environ['AGGRID_ENTERPRISE'],
            columnDefs=[{"headerName": i, "field": i} for i in df.columns],
            rowData= df.to_dict('records'),
            columnSize="sizeToFit",
            defaultColDef=dict(
                resizable=True,
            ),
        ),
    ]
)


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

Using column menus

These docs have examples of how to implement many Dash Ag-Grid features. Many of the sections, for example, ‘Grid Height’ have the same name as the Dash DataTable page that implements the same feature in DataTable. Explore both pages to see the different implementations.