Search

Vue Data GridUpgrading to AG Grid 32

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:

  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

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