What's New in AG Grid 35.3

AG Grid 35.3 adds a new quick access toolbar, cell notes, grand total rows for the server-side row model, and a range of performance improvements and quality enhancements.

Key features

1. Quick Access Toolbar - Add commonly used actions and custom controls to a configurable toolbar for faster grid interactions.
2. Cell Notes - Attach notes to cells for annotations, comments, and collaborative workflows.
3. Grand Total Row for Server-Side Row Model - Display overall totals alongside grouped server-side data.
4. Performance Improvements - Optimisations across core grid operations for faster rendering and interaction.
5. Quality Improvements - Stability, usability, and improvements across grid features.

Quick access toolbar

The new quick access toolbar provides a flexible way to surface commonly used actions and custom controls directly above the grid. This makes frequently used functionality easier to discover and reduces the need for external controls.

The toolbar supports built-in controls as well as custom actions, allowing applications to tailor the experience to specific workflows.

To configure a toolbar, use the toolbar.items Grid Option. You can pass through a default option, such as agFindToolbarItem and agQuickFilterToolbarItem, or an object that provides a custom type, label and onClick action:

const gridOptions: GridOptions = {
  toolbar: {
    items: [
      'columns',
      'filters',
      'density',
      {
        type: 'button',
        label: 'Export',
        onClick: () => exportData(),
      },
    ],
  },

  /* Other grid options... */
};

Visit the toolbar docs for more information.

Cell notes

Cell notes allow users to attach annotations and contextual information directly to grid cells. This is useful for review workflows, collaboration, auditing, and data quality tracking.

Notes can be added, viewed, and updated independently of the cell value itself, enabling users to provide additional context without modifying the underlying data.

To enable cell notes, provide a notesDataSource and set the cellNotes property to true on the relevant columns:

const columnDefs: ColDef[] = [
  {
    field: 'status',
    cellNotes: true,
  },
];

Visit the cell notes docs for more information.

Grand total row for server-side row model

AG Grid 35.3 adds support for grand total rows when using the server-side row model. This allows applications to display overall totals alongside grouped and aggregated server-side datasets.

Grand total rows help users quickly understand overall metrics without requiring separate summary components or additional backend queries.

To enable a grand total row, set grandTotalRow to one of top or bottom:

const gridOptions: GridOptions = {
  rowModelType: 'serverSide',
  grandTotalRow: 'bottom',

  /* Other grid options... */
};

Visit the server-side row model docs for more information.

Performance & Quality improvements

In addition to the new features, this release also improves rendering performance across the board:

• More efficient retrieval of columns and cell values.
• Flat grid rendering is now faster and has a reduced community bundle size.
• Master-detail grids with many expanded detail rows render more efficiently.
• Cell formula evaluation is faster.

Alongside performance improvements, we've also made improvements spanning: React rendering, row grouping, server-side data loading, cell editing, pivot mode, column sizing, filtering, accessibility, and integrated charts.

Together, these changes improve reliability, consistency, and performance across a wide range of grid configurations.

Summary

AG Grid 35.3 focuses on improving usability, collaboration workflows, and handling aggregated data. This release:

• Introduces a configurable quick access toolbar for common actions
• Adds cell notes for annotations and collaborative workflows
• Enables grand total rows for the server-side row model
• Improves performance across grid operations
• Includes a range of quality and stability improvements

See the Release Notes for details or the Changelog for a full list of changes.

As always, we welcome feedback. Enterprise customers can contact us via Zendesk; alternatively, please submit a GitHub issue or complete our contact form.

Next steps

New to AG Grid? Get started in minutes, for free, with your favourite framework:

Considering AG Grid Enterprise? Request a free 30-day trial licence to test your application in production and get direct access to our support team.

Happy coding!