--- title: "Upgrading to AG Grid 32" framework: vue version: "36.1.0" --- # Upgrading to AG Grid 32 ## What's New See the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-32/) 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`: 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. > **Note** > > 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](https://www.ag-grid.com/vue-data-grid/codemods/) documentation for more details. ## 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`, use `ChartCreatedEvent` instead. - `ChartRangeSelectionChanged` deprecated, use `ChartRangeSelectionChangedEvent` instead. - `ChartOptionsChanged` deprecated, use `ChartOptionsChangedEvent` instead. - `ChartDestroyed` deprecated, use `ChartDestroyedEvent` instead. - `AsyncTransactionsFlushed` deprecated, use `AsyncTransactionsFlushedEvent` 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'`. If providing a column header component template (`colDef.headerComponentParams.template`), this now requires an `eFilterButton` element. ### Compatibility The minimum version of TypeScript you can use with AG Grid is now 5.1. ### Events The floating property has been removed from `CellFocusedEvent`. Use `rowPinned` instead. ### GridOptions - `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 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](https://www.ag-grid.com/charts/javascript/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 - `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 - 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. ### Vue - Vue 2 is no longer supported. Please upgrade to Vue 3. - Storing the grid API in a `ref` is no longer supported. It must instead be stored in a `shallowRef`. - `auto-params-refresh` / `autoParamsRefresh` removed.