Dash AG Grid

We are currently working on the initial open-source release of Dash AG Grid, which will be v2.0.0.
If you’d like to try out the alpha version today, install it with:

pip install dash-ag-grid==2.0.0a1

If you pip install dash-ag-grid (without specifying the alpha version number), you will get a non-functional stub package. If you are a Dash Enterprise customer, you can continue to use the v1.x series included with your Dash Enterprise installation.

We don’t recommend using the alpha version, V2.0.0a1, in production apps, as there will be breaking changes introduced with the release of v2.0.0.

For more details on Dash AG Grid, watch the technical tutorial with Plotly’s CTO, Alex Johnson.

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.

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.