Search

Vue Data GridUpgrading to AG Grid 32

What's New Copy

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

Codemods Copy

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@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.

Deprecations Copy

This release includes the following deprecations:

Column Options Copy

dndSource and dndSourceOnRowDrag are reinstated (no longer deprecated).

Events Copy

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

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

Grid API Copy

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

Breaking Changes Copy

Build Output Copy

The TSConfig target has been set to ES2020.

Column API Copy

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

Column Menu Copy

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

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

Events Copy

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

GridOptions Copy

  • 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

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

  • 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

  • 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

  • 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

Localisation key autosizeThiscolumn has been renamed to autosizeThisColumn

Row IDs Copy

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

Skeleton Loaders Copy

Skeleton loaders of different widths are shown across rows.

Text Wrapping Copy

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

Vue Copy

  • 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.