React Data GridUpgrading to AG Grid 36

Calculated Columns, Show Values As, Automatic Column Generation, Accessibility Improvements, Theming Improvements.

What's New Copy Link

AG Grid 36.0 adds important new features – Calculated Columns, Show Values As, Automatic Column Generation, Accessibility Improvements, Theming Improvements, as described in the release post.

Breaking Changes Copy Link

Frameworks Copy Link

• The minimum TypeScript version is now 5.8.3 across all frameworks.

Packages Copy Link

• ag-grid-community and ag-grid-enterprise now have a dependency on the new AG Grid shared library ag-stack.

Integrated Charts Copy Link

• Refer to Upgrade to AG Charts 14 for behaviour and breaking changes.

Behaviour Changes Copy Link

Aggregation Copy Link

• Aggregation functions are now displayed in usage-frequency order (Sum, Average, Max, Min, Count, First, Last) instead of alphabetically.

Column Filters Copy Link

• When cellDataType='date' the Filter Model returns date-only values.

Column State Copy Link

• The value column order in the columns tool panel is now saved and reloaded as part of state. When loading grid state, pivot result value column header order remains the same, since the order is saved as part of state.

Modules Copy Link

• The ValidationModule is no longer included in the AllCommunityModule and AllEnterpriseModule bundles, keeping production bundles smaller by default. Without it, console messages are reduced to an error code and a documentation link. To restore the full development-time diagnostics, call enableDevValidations() before any grid is created:

  import { enableDevValidations } from 'ag-grid-community';
  
  if (process.env.NODE_ENV !== 'production') {
      enableDevValidations();
  }

• The Client-Side Row Model is now part of the grid core. A grid renders the client-side model without registering ClientSideRowModelModule explicitly, so registering no modules no longer reports an error.

Overlay Copy Link

• The DOM element for the overlay is now rendered as a sibling of the grid viewport DOM element, rather than as its child.

Rendering Copy Link

• The default for the suppressContentVisibilityAuto grid option has changed from false to true, due to reports of rare issues with this feature in some apps. If your app has many grids active at once, but most are off the screen so the user can't see them, consider passing false for performance purposes.

Scrolling Copy Link

• The Pagination Panel and Status Bar now use horizontal scroll overflow when space is constrained.

Tooltips Copy Link

• Grouped rows now use tooltip properties inherited from the underlying grouped column colDef, including tooltipField, tooltipValueGetter, and tooltipComponent. autoGroupColumnDef tooltip properties now apply to leaf rows only.

Styling Changes Copy Link

DOM Structure Copy Link

The grid now uses a single container to permit both vertical and horizontal scrolling natively in the browser. Previously the header, body and pinned columns were placed in separate containers with scrolling synchronised using JavaScript, which led to visible lag on more complex grids or slower computers. As a result, the 9+ previous containers have been replaced with a single container and some of the grid's class names relating to high-level layout and scrolling containers have changed.

Most applications will be unaffected. If your application targets these containers, the following may need updating:

• CSS-based themes built against the separate pinned column / pinned row containers.
• Themes referencing the sticky row containers.
• Any references to CSS selectors of the old pinned containers.
• Any assumptions about the DOM structure of pinned containers.
• Pre-recorded tests may fail depending on how they are written.

See the DOM structure migration reference at the end of this guide for the full list of changed class names and their replacements.

Theme and RTL Class Placement Copy Link

• Every location where grid elements are inserted into application-owned DOM now has a consistent structure: application-div > div.ag-theme-x > div.ag-ltr > div.ag-some-component. The components .ag-root-wrapper, .ag-dnd-ghost, .ag-popup, .ag-popup-child, .ag-tool-panel-external and .ag-advanced-filter previously had theme and/or RTL classes set directly on them; these classes are now set on a parent. Application CSS such as .ag-root-wrapper.ag-rtl { ... } will need updating to the new structure: .ag-rtl .ag-root-wrapper { ... }.

Fonts Copy Link

• The fontWeight theme parameter now defaults to 400 instead of inheriting whatever font weight was set on the containing page. To inherit the page's font weight, set fontWeight: 'inherit'.

Pagination Panel Copy Link

• Previously the height of the pagination panel defaulted to the row height. It now has a default height based on the height of picker fields to ensure correct padding regardless of the size of your picker fields. Use paginationPanelHeight and pickerFieldHeight to override these heights.

Theme Parameter Changes Copy Link

• Picker fields now respect the borderRadius theme parameter instead of the hard-coded 5px.

Theming API Copy Link

• To allow apps to minimise bundle size, createTheme() no longer bundles styles for buttons and the column drop component. They have been removed and can be re-added if required using createTheme().withPart(buttonStyleQuartz).withPart(columnDropStyleBordered).

Removal of Deprecated APIs Copy Link

There are no deprecated API removals in AG Grid version 36.0.

Deprecations Copy Link

There are no deprecations in AG Grid version 36.0.

DOM structure migration reference Copy Link

Impact summary: there has been significant change in the containers that hold rows and cells and handle scrolling and column pinning. If your application only styles visible grid components like cells, buttons, filters and so forth, there is likely no change. If your application styles containers, or uses containers to select specific cells to style, it is likely to need an update.

Detection Copy Link

Search the codebase for the following class names, either in CSS code or in JS APIs like document.querySelector('...'):

Mitigation Copy Link

The class-name changes fall into three categories, depending on whether a direct replacement is available:

Changes List Copy Link

See the full list of changes in the AG Grid 36.0 changelog.