Getting Started

This guide shows how to get started with AG Grid, and demonstrates some of the grid’s key features.

A basic Dash AG Grid contains column definitions, columnDefs, which define the grid’s columns and how they are displayed and behave, and the grid’s data, rowData.

In this example, we create a grid using the AgGrid component. Our columnDefs are written out in full and then passed to the grid.

The previous example showed the columnDefs written out in full. You can also extract the required information from the dataframe’s column names:

For more on column definitions see the Column Definitions page and the Updating Column Definitions page.

Headers

Note how in the first example above, when you provide field names, the grid capitalizes the first letter when displaying the header name. You can also specify a header name in the column definitions, if you don’t want it to be created based on the field name. In this example, we specify a headerName for the second and third columns.

There are many other ways to configure headers. For details on advanced options, including adding tooltips to headers, see the Column Headers page.

Column Filtering

Allow a user of the grid to filter a column by enabling filtering on it. In this example, we enable filtering on the first and last columns. Hover over a column header and select the icon that appears to see filtering options.

See the column filtering page for more examples.

Row Sorting

By default, the rows can be sorted by any of the columns by clicking on the heading. You can disable sorting by setting sortable=False in the column’s definition so users cannot sort the rows based on that column. This example disables sorting on the first column.

See the row sorting page for more examples.

Disable Animation

By default, rows will animate after sorting or filtering. If you wish to suppress this animation set the grid property animateRows=false.

Themes

You can style your grid with a theme. AG Grid includes the following themes: ag-theme-quartz, ag-theme-quartz-dark, ag-theme-alpine, ag-theme-alpine-dark, ag-theme-balham, ag-theme-balham-dark, ag-theme-material.

The grid uses ag-theme-alpine by default. To use any other theme, set it using className. For example, className="ag-theme-alpine-dark", like in the following example.

from dash import Dash, html
import dash_ag_grid as dag
import plotly.express as px

app = Dash()

df = px.data.gapminder()
df = df[['country', 'continent', 'year', 'pop']]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="getting-started-themes-example",
            columnDefs= [{"field": x, } for x in df.columns],
            rowData= df.to_dict('records'),
            className="ag-theme-alpine-dark",
            columnSize="sizeToFit",
        ),
    ]
)

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

Alpine Dark Theme

For more on themes, including how to configure custom themes, see the themes page.

Pagination

By default, the grid uses a vertical scroll. You can reduce the amount of scrolling required by adding pagination. To add pagination, set pagination to True:

For more on pagination options, including how to set the page size, see the pagination page.

With Callbacks

You can use callbacks to update the grid based on user input. In this example, when the user selects the button, the columnDefs on the grid update.

For more examples on updating columnDefs, see the updating column definitions page. Throughout the docs, you’ll find more examples of using callbacks to update the grid, and to perform other actions, for example, to download the grid to a CSV file.

Using AG Grid Enterprise

AG Grid offers both community and enterprise versions. See the AG Grid docs for details on purchasing a license key.

To use an AG Grid Enterprise license key with Dash AG Grid, include it with licenseKey=<your_license_key>. and set enableEnterpriseModules=True:

dag.AgGrid(
    enableEnterpriseModules=True,
    licenseKey='< your_license_key >',
    columnDefs=ColumnDefs,
    rowData=rowData
)

For examples with enterprise features, see Sparklines, Master Detail, Row Aggregation with Conditional Formatting, Aggregation with Custom Functions, Row Groupings, Sidebar, Pivot, and Tree Data.