đź“Ł Dash AG Grid 31.0.0 Released - More Function Support, New Quartz Theme, Cell Data Types, Built-in Cell Editors, and More

Dash Python
2

This is an awesome release with lots of new features! Here is a little more information:

New Feature Preview

Let’s walk through a few of the new features available in this release. Everything here is is available in the free AG Grid Community version.

You will find a new tutorial with the code and live examples here:

Quickstart

Add a beautiful data grid to your Dash app with just a few lines of code!


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

app = Dash()

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

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

app.run(debug=True)

ag-grid-v31a

This basic grid has the following features available by default:

  • Alpine theme is applied to style the grid
  • The columns are resizable (drag on the vertical handle in the header) (New default in V31)
  • The rows are sortable (click on the header to sort. shift-click the header to sort by multiple columns) (New default in V31)
  • Note the row animation when sorting (New default in V31)
  • Boolean values are rendered as a checkbox (New default in V31)
  • Reorder the columns by dragging the column header
  • Pin a column to the right or left side of the grid by dragging the column header.

Cell Data Types and Automatic Type Inference

This version adds built-in cell data types with automatic type inference based on the data in the column.

This allows a lot of the configuration on column definitions that previously had to be manually set to now be automatically provided by the grid based on the data type.

See more information in the Cell Data Types section of the Dash Docs.

Filtering

In this example, the filters are enabled by setting:

defaultColDefs= {"filter: True}

The cell data type is inferred, and you’ll see the different filters based on the data type:

  • The “Success” column has a dropdown that displays True and False
  • The “Price” has a number filter
  • The “Date” has a date filter with a date picker component
  • The other columns have a text filter.

ag-grid-v31b

Editing and Provided Cell Editors

The grid comes with some cell editors provided out of the box. No need to write your own custom component for the following:

  • Text Cell Editor
  • Large Text Cell Editor
  • Select Cell Editor
  • Rich Select Cell Editor (Enterprise only)

New in V31: Additional cell editors that are generally used with Cell Data Types:

  • Number Cell Editor
  • Date Cell Editor
  • Checkbox Cell Editor

See the new number, date and checkbox editor in action!:
ag-grid-v31c

Also new in V31:

  • page size in the pagination controls
  • Ability to interact with the tooltip - select and copy tooltip content!

ag-grid-v31d

There are even more new features - check out the AG Grid release notes and the Dash Docs for more!

New to Dash AG Grid?

Here are a few posts to help you get started:

If you like Dash AG Grid, please give it a :star: on Github

Note that there are even more new features if you are using AG Grid Enterprise. A license required, please see the AG Grid docs for pricing information:

10 Likes