What's New
See the release post for details of what's new in version 32.
Codemods
Follow these steps to upgrade your project's AG Grid version to 32.0.0
:
Locate your project's
package.json
and note the version of AG Grid that you are currently using.Update any AG Grid dependencies listed in the
package.json
to version32.0.0
.Open a terminal and navigate to your project's root folder.
Run the
migrate
command of version32.0
of the AG Grid codemod runner, where$FROM_VERSION
refers to your project's existing AG Grid version:npx @ag-grid-devtools/cli@32.0 migrate --from=$FROM_VERSION
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 runner will check the state of your project to ensure that you don't lose any work. If you would rather see a diff of the changes instead of applying them, pass the --dry-run
argument.
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.
Upgrading React Class-Based Components
In order to enable class-based React components when reactiveCustomComponents
is set, follow the guide for Migrating to Use reactiveCustomComponents. However, instead of using the hooks to register the callbacks, you will need to use the custom context (same for all component types). For example, for filters:
static contextType = CustomComponentContext;
componentDidMount() {
this.context.setMethods({
doesFilterPass: params => this.doesFilterPass(params)
});
}
Deprecations
This release includes the following deprecations:
Column Options
dndSource
and dndSourceOnRowDrag
are reinstated (no longer deprecated).
Events
The following interfaces are deprecated and replaced with the equivalent interface suffixed with Event:
ChartCreated
, useChartCreatedEvent
instead.ChartRangeSelectionChanged
deprecated, useChartRangeSelectionChangedEvent
instead.ChartOptionsChanged
deprecated, useChartOptionsChangedEvent
instead.ChartDestroyed
deprecated, useChartDestroyedEvent
instead.AsyncTransactionsFlushed
deprecated, useAsyncTransactionsFlushedEvent
instead.
GridOptions
suppressLoadingOverlay
is deprecated, setting loading=false
to disable overlay.
Grid API
showLoadingOverlay
is deprecated, setting loading=true
to enable overlay.
Breaking Changes
Build Output
The TSConfig target has been set to ES2020.
Column API
Column API is now removed. API methods previously available via Column API are now available in Grid API instead.
Column Menu
The new (flat) format column menu is now enabled by default. The legacy tabbed column menu can be enabled via columnMenu = 'legacy'
.
Compatibility
The minimum version of TypeScript you can use with AG Grid is now 5.1.
Custom Components
reactiveCustomComponents
now defaults to true. If your React custom components have been declared imperatively, you can continue using them by setting reactiveCustomComponents
to false. Please plan to migrate to the new React custom component format as the imperative behaviour was deprecated in v31.1. See Migrating to Use reactiveCustomComponents.
Events
The floating property has been removed from CellFocusedEvent
. Use rowPinned
instead.
GridOptions
suppressParentsInRowNode
removed without replacement.enterMovesDown
removed, useenterNavigatesVertically
instead.enterMovesDownAfterEdit
removed, useenterNavigatesVerticallyAfterEdit
instead.excludeHiddenColumnsFromQuickFilter
removed, useincludeHiddenColumnsInQuickFilter
instead.suppressAggAtRootLevel
removed, usealwaysAggregateAtRootLevel
instead.serverSideFilterAllLevels
removed, useserverSideOnlyRefreshFilteredGroups
instead.enableChartToolPanelsButton
removed, usesuppressChartToolPanelsButton
instead.functionsPassive
removed without replacement.onColumnRowGroupChangeRequest
removed without replacement.onColumnPivotChangeRequest
removed without replacement.onColumnValueChangeRequest
removed without replacement.onColumnAggFuncChangeRequest
removed without replacement.
Grid API
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
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, thegetChartToolbarItems
grid option now uses the typeChartToolbarMenuItemOptions
instead ofChartMenuOptions
. TheChartMenuOptions
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
ChangeDetectionStategyType
removed without replacement.ICellRendererParams.rowIndex
removed, usedICellRendererParams.node.rowIndex
instead.Column
,ColumnGroup
andProvidedColumnGroup
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 ofColumn | ProvidedColumnGroup
. TheIHeaderColumn
interfaces has been removed in favour ofColumn | ColumnGroup
. If previously usinginstanceof
to differentiate, it is now possible to check theisColumn
property, which can be used as a type differentiator.
Keyboard Navigation
- 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
Localisation key autosizeThiscolumn
has been renamed to autosizeThisColumn
Row IDs
getRowId
callback is now called to set row ids for pinned rows.
Skeleton Loaders
Skeleton loaders of different widths are shown across rows.
Text Wrapping
Header and grid cells text wrapping uses word-break:'break-word'
mode instead of 'normal'
. This can be overridden via CSS.