JavaScript Data GridUpgrading to AG Grid 32

What's New Copy Link

See the release post for details of what's new in version 32.

Codemods Copy Link

Follow these steps to upgrade your project's AG Grid version to 32.0.0:

1. Locate your project's package.json and note the version of AG Grid that you are currently using.

2. Update any AG Grid dependencies listed in the package.json to version 32.0.0.

3. Open a terminal and navigate to your project's root folder.

4. Run the migrate command of version 32.0 of the AG Grid codemod runner, where $FROM_VERSION refers to your project's existing AG Grid version:

   npx @ag-grid-devtools/cli@latest migrate --from=$FROM_VERSION --to=32.0
   

   This will update your project's source files to prepare for the new release.

   By default the Codemod runner will locate all source files within the current directory. For projects with more specific requirements, pass a list of input files to the migrate command, or specify the --help argument to see more fine-grained usage instructions.

The codemod only transforms source files that make use of deprecated features, so if you aren't currently making use of any of those APIs your source code will be unaffected by the codemod.

See the Codemods documentation for more details.

Deprecations Copy Link

This release includes the following deprecations:

Column Options Copy Link

dndSource and dndSourceOnRowDrag are reinstated (no longer deprecated).

Events Copy Link

The following interfaces are deprecated and replaced with the equivalent interface suffixed with Event:

• ChartCreated, use ChartCreatedEvent instead.

• ChartRangeSelectionChanged deprecated, use ChartRangeSelectionChangedEvent instead.

• ChartOptionsChanged deprecated, use ChartOptionsChangedEvent instead.

• ChartDestroyed deprecated, use ChartDestroyedEvent instead.

• AsyncTransactionsFlushed deprecated, use AsyncTransactionsFlushedEvent instead.

GridOptions Copy Link

suppressLoadingOverlay is deprecated, setting loading=false to disable overlay.

Grid API Copy Link

showLoadingOverlay is deprecated, setting loading=true to enable overlay.

Breaking Changes Copy Link

Build Output Copy Link

The TSConfig target has been set to ES2020.

Column API Copy Link

Column API is now removed. API methods previously available via Column API are now available in Grid API instead.

Column Menu Copy Link

The new (flat) format column menu is now enabled by default. The legacy tabbed column menu can be enabled via columnMenu = 'legacy'. If providing a column header component template (colDef.headerComponentParams.template), this now requires an eFilterButton element.

Compatibility Copy Link

The minimum version of TypeScript you can use with AG Grid is now 5.1.

Events Copy Link

The floating property has been removed from CellFocusedEvent. Use rowPinned instead.

GridOptions Copy Link

• suppressParentsInRowNode removed without replacement.
• enterMovesDown removed, use enterNavigatesVertically instead.
• enterMovesDownAfterEdit removed, use enterNavigatesVerticallyAfterEdit instead.
• excludeHiddenColumnsFromQuickFilter removed, use includeHiddenColumnsInQuickFilter instead.
• suppressAggAtRootLevel removed, use alwaysAggregateAtRootLevel instead.
• serverSideFilterAllLevels removed, use serverSideOnlyRefreshFilteredGroups instead.
• enableChartToolPanelsButton removed, use suppressChartToolPanelsButton instead.
• functionsPassive removed without replacement.
• onColumnRowGroupChangeRequest removed without replacement.
• onColumnPivotChangeRequest removed without replacement.
• onColumnValueChangeRequest removed without replacement.
• onColumnAggFuncChangeRequest removed without replacement.

Grid API Copy Link

The Grid API methods listed below have been removed. Please use Grid API methods setGridOption and updateGridOptions to set properties instead.

• setPivotMode
• setPinnedTopRowData
• setPinnedBottomRowData
• setPopupParent
• setSuppressModelUpdateAfterUpdateTransaction
• setDataTypeDefinitions
• setPagination
• paginationSetPageSize
• setSideBar
• setSuppressClipboardPaste
• setGroupRemoveSingleChildren
• setGroupRemoveLowestSingleChildren
• setGroupDisplayType
• setGroupIncludeFooter
• setGroupIncludeTotalFooter
• setRowClass
• setDeltaSort
• setSuppressRowDrag
• setSuppressMoveWhenRowDragging
• setSuppressRowClickSelection
• setEnableAdvancedFilter
• setIncludeHiddenColumnsInAdvancedFilter
• setAdvancedFilterParent
• setAdvancedFilterBuilderParams
• setQuickFilter
• setExcludeHiddenColumnsFromQuickFilter
• setIncludeHiddenColumnsInQuickFilter
• setQuickFilterParser
• setQuickFilterMatcher
• setAlwaysShowHorizontalScroll
• setAlwaysShowVerticalScroll
• setFunctionsReadOnly
• setColumnDefs
• setAutoGroupColumnDef
• setDefaultColDef
• setColumnTypes
• setTreeData
• setServerSideDatasource
• setCacheBlockSize
• setDatasource
• setViewportDatasource
• setRowData
• setEnableCellTextSelection
• setHeaderHeight
• setDomLayout
• setFillHandleDirection
• setGroupHeaderHeight
• setFloatingFiltersHeight
• setPivotHeaderHeight
• setPivotGroupHeaderHeight
• setAnimateRows
• setIsExternalFilterPresent
• setDoesExternalFilterPass
• setNavigateToNextCell
• setTabToNextCell
• setTabToNextHeader
• setNavigateToNextHeader
• setRowGroupPanelShow
• setGetGroupRowAgg
• setGetBusinessKeyForNode
• setGetChildCount
• setProcessRowPostCreate
• setGetRowId
• setGetRowClass
• setIsFullWidthRow
• setIsRowSelectable
• setIsRowMaster
• setPostSortRows
• setGetDocument
• setGetContextMenuItems
• setGetMainMenuItems
• setProcessCellForClipboard
• setSendToClipboard
• setProcessCellFromClipboard
• setProcessPivotResultColDef
• setProcessPivotResultColGroupDef
• setPostProcessPopup
• setInitialGroupOrderComparator
• setGetChartToolbarItems
• setPaginationNumberFormatter
• setGetServerSideGroupLevelParams
• setIsServerSideGroupOpenByDefault
• setIsApplyServerSideTransaction
• setIsServerSideGroup
• setGetServerSideGroupKey
• setGetRowStyle
• setGetRowHeight

Integrated Charts Copy Link

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

• The Integrated Charts Tool Panels button has been replaced with the new Chart Menu, from which the Chart Tool Panels can be launched (via the "Edit Chart" menu item).

• The grid option suppressChartToolPanelsButton and the legacy hamburger menu for Integrated Charts have been removed and replaced with the new Chart Menu. As a result, the getChartToolbarItems grid option now uses the type ChartToolbarMenuItemOptions instead of ChartMenuOptions. The ChartMenuOptions type has been removed.

• Double click to edit has been removed for Integrated Chart titles. Titles can now be edited via the Chart Tool Panels.

Interfaces Copy Link

• ChangeDetectionStategyType removed without replacement.
• ICellRendererParams.rowIndex removed, used ICellRendererParams.node.rowIndex instead.
• Column, ColumnGroup and ProvidedColumnGroup are now interfaces instead of classes. Some public methods that were part of the internal grid API were previously exposed on the classes, but are not exposed on the interfaces.
• The IProvidedColumn interface has been removed in favour of Column | ProvidedColumnGroup. The IHeaderColumn interfaces has been removed in favour of Column | ColumnGroup. If previously using instanceof to differentiate, it is now possible to check the isColumn property, which can be used as a type differentiator.

Keyboard Navigation Copy Link

• Pressing the ⇥ Tab key when focusing on a set filter list item or a column's tool panel list item takes focus out of the list. Navigating inside the list is possible with ↑/↓ Arrow keys.
• The column menu is now opened by the ⌥ Alt+↓ keyboard combination, with the column filter opened by ^ Ctrl+↵ Enter.

Localisation Copy Link

Localisation key autosizeThiscolumn has been renamed to autosizeThisColumn

Row IDs Copy Link

getRowId callback is now called to set row ids for pinned rows.

Skeleton Loaders Copy Link

Skeleton loaders of different widths are shown across rows.

Text Wrapping Copy Link

Header and grid cells text wrapping uses word-break:'break-word' mode instead of 'normal'. This can be overridden via CSS.