What's New in AG Grid 27

Author Credit: Kiril Matev

AG Grid 27 is a major step forward in developer productivity, functionality and accessibility and a stepping stone for further product improvements. As a major version, it allows us to introduce improvements that require breaking changes but that deliver significant benefits for the product.

These improvements involve deprecating and removing unused API members. We recommend reviewing the list of deprecations and breaking changes when planning to update to this version.

Please see the full list of changes, including breaking changes and deprecations in our changelog.

100% React Rendering

In previous versions of the grid we introduced an experimental new rendering engine that is written 100% in React. This means AG Grid React is no longer a thin React wrapper over a JavaScript library. The new rendering engine means the grid will behave exactly as you would expect from any pure React component.

This experimental feature was turned on by setting the reactUi grid property. As of AG Grid 27 the new 100% React Rendering Engine is no longer experimental and is on by default.

Simplified Registration of Framework Components

The registration of Framework Components in the grid is now simplified. While previously Framework Components had to be registered separately, all components are now registered through a single property.

For example previously you had to use cellRenderer for JavaScript Cell Renderer and cellRendererFramework for React, Angular and Vue Cell Renderers. Now the property cellRenderer is used for all types of Cell Renderers (JavaScript, React, Angular or Vue). The grid works out if you are using React, Angular or Vue.

All properties ending with the word 'Framework' are no longer needed.

Documentation Examples in TypeScript

All documentation examples are now available in TypeScript. When you are looking at the JavaScript documentation, in any example frame, please select the TypeScript item to view the source code in TypeScript as shown below:

As part of this work, we've done a rigorous review of API typing across the grid. The changes we made as part of this process will reduce the risk for bugs in your code due to incorrect typing.

Column Filtering

We've made enhancements to Column Filtering to improve the developer and user experience.

• Enriched filtering API parameters, adding more parameters to the Set Filter params valueGetter, and textCustomComparator
• Added a new "non-blank" values filter operation to all Simple Filters
• Improved accessibility support in Column Filter DOM elements

Accessibility Improvements

We are continuing to improve accessibility support to enable you to meet the requirements of users with accessibility needs.

Keyboard-only users can now navigate through and remove items in the Row Group Panel, and move Columns from the Columns Tool Panel to Row Groups, Values and Column Labels panels using a special Context Menu as shown below:

These enhancements are available by default and make any application you build with the grid accessible to keyboard users or screen reader users, helping you to support users with accessibility needs and pass accessibility support audits.

For additional information on accessibility support, please see our documentation.

Column Improvements

We've made a number of highly-requested improvements related to Columns:

• Auto-sizing a Column now includes the Group Column Header width
• You can now set the horizontal position of the Column (start, end, middle) when calling the grid ensureColumnVisible API method
• Added new default context menu option Copy with Group Headers to copy Cell value along with all of its associated Column Group Headers
• Export collapsed Column Groups as Grouped Columns in Excel

Sparklines Crosshair

The built-in Sparkline Charts help easily visualise any numeric data right inside the context of the grid. As part of AG Grid 27 we've added a Crosshair for Line and Area Sparklines and improved the Tooltip customisation by allowing you to render it at a custom offset from the mouse pointer as shown below:

We've also included a new documentation section illustrating how to build a progress bar with the sparkline.

Changes in Supported Environments

As we announced in an earlier blogpost, AG Grid 26 will be the last major release to support Internet Explorer 11, Polymer, Angular 7 and AngularJS. We're making this change to respond to the current popularity level of these frameworks and Microsoft's decision to end support for Internet Explorer 11 in June 2022.

AG Grid 27 doesn't support Polymer, Angular 7, AngularJS and Internet Explorer 11.

If you are using Polymer, Angular 7, AngularJS or need to support Internet Explorer 11 please use AG Grid 26, which will be a long-term support release. You'll still be able to report issues against AG Grid 26 and we will release new minor versions of AG Grid 26 to address these.

Summary

AG Grid 27 is a major step forward containing many improvements to developer productivity, user experience and accessibility support.

This is why we recommend reviewing the list of breaking changes and upgrading to AG Grid 27 as soon as you can, so you can deliver a better user experience.

As always, we’re keen to help you upgrade and to hear your feedback.

Happy coding!