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

Dash Python
1

:tada: We are pleased to announce that Dash AG Grid V31.0.0 is out!

pip install dash-ag-grid==31.0.0

As of this release, the Dash version numbers will align with the version number of the AG Grid component it wraps. This will make it easier to know which version of the AG Grid documentation to use if you need more information.

Thank you to @jinnyzor for leading the contributions of these developments. Thank you to @Skiks for contributing to the Dash AG Grid docs. Thank you to @AnnMarieW for supporting the community with Dash AG Grid solutions, demos, and write-ups. And thank you to @Emil for your cellValueChanged pull request.

Official Changelog :arrow_forward: Dash-AG-Grid v31.0.0

Added

  • #246

    • grid_version added to allow developer to see underlying AG Grid version in python
    • Added quartz theme native support
    • Added function support for dateParser, dateFormatter, quickFilterParser, components, quickFilterMatcher, predicate, textFormatter, textMatcher, numberFormatter, numberParser, dataTypeMatcher

Removed

  • #246 dropped getColumnApi and getColmunApiAsync as these are deprecated from the underlying grid.

Changed

  • #261 The cellValueChanged property has been changed from a (single) event object to a list of event objects. For multi-cell edits, the list will contain an element per change. In other cases, the list will contain a single element. Fixes #262

  • #246

    • updating underlying grid version from AG Grid v29 → v31, with this change, Dash AG Grid will reflect a similar version number to underlying Grid version.
    • dataTypeDefinitions now supports full js, partial python with full definitions in js of an object, and objects have parts that are js
    • columnSize and columnState cannot be currently passed together when grid initializes, the columnSize will trump the columnState

Fixed

  • #246 testing for grid going to destroyed state

New Features

Note that there are some breaking changes in this release, most of which are due to new features enabled by default. Find out more in the V31 Migration Guide.

Here are a few highlights from the upstream AG Grid docs. The topics with links have more info in the Dash docs. For the other features, please see the AG Grid docs.

AG Grid V31.0.0

AG Grid V30.2.0

  • Advanced Filter Builder UI for building filter expressions (Enterprise)
  • Support for Custom Matching in Quick Filter
  • Typing, filtering, async population of values in Rich Select Editor (Enterprise)
  • Dynamic Group Footer Rows (Enterprise)

AG Grid V30.1.0

  • Advanced filtering with boolean expressions (Enterprise)
  • Rebuilt Rich Select Editor (Enterprise)
  • Figma Design System to design and customize AG Grid
  • Automatic pivot columns for server-side row model (Enterprise)
  • Interactive Tooltips

AG Grid V30.0.0

Dash-ag-grid v31 includes the new features available in AG Grid V30 through AG Grid V31.0.3.

15 Likes
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
5

Thank you; this is excellent. I was looking for a way to access pivotMode through the gridApi, but it was not available on v29. Now it works perfectly!

(For those curious: gridApi.isPivotMode(); to check whether pivot mode is active. gridApi.setGridOption(‘pivotMode’, trueOrFalse) to change it.)

Being able to refer to the latest version of the ag-grid docs is also nice

1 Like
9

If you are new to Dash AG Grid, you might find this article helpful. It has a step-by-step guide to some of the most popular features of the grid.

1 Like