AG Grid 33 is a key major version which enables significant bundle size reduction via modularization. It also fully commits to the new theming API as default, adds new features across the grid together with improvements in developer experience, accessibility and performance:
1. Bundle Size Reduction via Modularization
2. Context Menu Async Items
3. Customization of Default Column Header Content
4. Theming API Improvements
5. Native Support for Vue 3 Composition API
Please note that AG Grid 33 has breaking changes from AG Grid 32.X. We're providing Codemods to help you upgrade by automating the migration process as much as possible.
Please review the migration guide when planning to update to this version.
Bundle Size Reduction
AG Grid 33 modularizes the grid which allows you to import only the modules you need for the features you're using. This enables a significant reduction in bundle size which will vary between 20-40% depending on the features you're using.
This significant improvement required changes in the way the grid is imported on a page, which are covered in the migration guide.
We're providing a module selector to help you find the modules you need and generates the necessary import code. This way you can start using the new modules and benefit from the bundle size reduction and improved loading times for AG Grid.
See this documented here and illustrated below:
Context Menu Async Items
AG Grid 33 allows providing menu items for the context menu asynchronously. This allows to make the context menu items dynamically populated by querying a remote service. For example, a call to a remote service can find out what actions a user is entitled to perform and provide the appropriate context menu items.
Please see this documented here.
Customization of Default Header Content
AG Grid 33 allows to provide custom column header and group column header content to quickly set the appearance of column headers. This enables the customization of cell content while using the built-in default column header and group column header features such as a filter buttons, column menu button, etc.
See this documented here and shown below in the Age and Gold column headers:
Theming API
AG Grid 33 fully commits to the Theming API which was introduced in v32.3 and makes it the default theming method. This enables the dynamic manipulation of themes at runtime, full integration of themes built using the Theme Builder and easy customization via theme parameters and theme parts.
This makes theming your grids a lot easier and allows you to easily adjust themes on a granular level at runtime depending the grid cell content.
Please the migration process to the Theming API documented here.
Native Support for Vue 3 Composition API
AG Grid 33 provides native support for Vue 3 Composition API. This allows you to use AG Grid and Vue 3 with confidence and to integrate the rich capabilities offered by the Composition API directly in AG Grid.
Summary
AG Grid 33 is a key major version - it modularizes the grid to enable a reduction in bundle size, adds end-user features and improvements in developer experience, accessibility and quality.
We suggest reviewing the migration guide when planning to upgrade and seeing the full list of changes in our Changelog.
As always, we’re keen to help you upgrade and to hear your feedback.
Happy coding!