What's New in AG Grid 34.1

AG Grid 34.1 adds important features focused on improving developer productivity, simplifying testing, and increasing layout & styling control:

1. Tree Data with Master Detail - Support parent and leaf nodes as master rows in Tree Data with Master/Detail.
2. Test IDs - Locate specific elements in the grid to perform assertions of actions.
3. Grid Context in Integrated Charts Formatters - Access the grid API and context via formatter params.
4. Compact Column Headers - Hide excess padding when using collapsed column groups.
5. Accessibility Improvements - General improvements to accessibility for cell editing and column menus.

Tree Data with Master Detail

Master / Detail grids now support Tree Data, and both leaf nodes and parents can be master rows.

This feature works out of the box and does not require any configuration - just provide the grid with valid tree data and enable the treeData & masterDetail grid options:

<AgGridReact
  treeData={true}
  masterDetail={true}
/>

This feature helps users to explore nested data, making complex structures easier to understand and navigate:

Test IDs

The introduction of Test IDs allows you to locate specific elements in the grid, such as cells or checkboxes, so that you can then perform assertions or actions on those elements.

Test IDs are enabled by calling the setupAgTestIds function, which automatically attaches a test ID attribute to many of the interactive elements in the grid. The default test ID attribute (data-testid) can be configured via the testIdAttribute option:

if(process.env.NODE_ENV !== "production"){
    // Setup custom test IDs for all instances of AG Grid that are created after this call.
    setupAgTestIds({ testIdAttribute: 'data-customAttr' });
}

// Find Test ID
const cellTestId = agTestIdFor.cell(rowId, colId);

While users don't interact with this feature directly, it helps you write more robust tests, resulting in faster and more stable releases.

Compact Column Headers

Column Header padding, which is automatically applied when using column groups, can now be hidden to ensure header rows have an appropriate amount of padding when a column with a deeper tree is hidden.

To hide padding for column headers, set the hidePaddedHeaderRows Grid Option to true:

<AgGridReact
  hidePaddedHeaderRows={true}
/>

By removing unnecessary padding, users benefit from a more streamlined grid that uses header space efficiently:

Grid Context in Integrated Charts Formatters

The Integrated Charts formatter now includes access to the grid API and context, allowing consistent data formatting without duplicating logic. For example, you can use the grid API to look up a valueFormatter from a column within the grid, and use it to format the chart elements, ensuring values are formatted consistently.

The context and api are both available in the context property of the formatter parameters:

chartThemeOverrides: {
  common: {
    formatter: (params) => {
      // Access context from params
      const { context } = params;
      // Access Grid API via context, to get column
      const column = colId ? context.api.getColumn(colId) : null;
      // Access Value Formatter from Grid column
      const valueFormatter = colDef.valueFormatter;
      // Apply Grid Value Formatter to Chart Element
      return valueFormatter(params.value);
    },
  },
},

Much like Testing IDs, users don't directly benefit from this change, however, by helping to reduce code duplication in your application, users will benefit from faster and more stable releases.

The image below demonstrates an integrated chart using the columns value formatter to format tooltip values.

Accessibility Improvements

As part of our ongoing work on accessibility support this release contains improvements to both cell editing and the column menu. This continued work allows us to deliver more intuitive and comprehensive keyboard navigation and screen reader support.

Summary

AG Grid 34.1 introduces tree data support for master/detail grids as well as valuable improvements to testing, integrated charts and accessibility. With no breaking changes, upgrading from 33.x is straightforward.

As always, we're here to help you upgrade, and we're keen to hear your feedback. Enterprise customers can contact us via Zendesk; Alternatively, please submit a GitHub issue.

Next Steps

New to AG Grid? Get started in minutes, for free:

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

Happy coding!