Search

Vue Data GridUpgrading to AG Grid 31.1

What's New

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

Codemods

Follow these steps to upgrade your project's AG Grid version to 31.1.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 your project's package.json to version 31.1.0.

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

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

    npx @ag-grid-devtools/cli@31.1 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:

GridOptions

  • gridOptions.cellFlashDelay - deprecated, use gridOptions.cellFlashDuration instead.
  • gridOptions.cellFadeDelay - deprecated, use gridOptions.cellFadeDuration instead.
  • colDef.floatingFilterComponentParams.suppressFilterButton - deprecated, use colDef.suppressFloatingFilterButton instead.
  • suppressServerSideInfiniteScroll - deprecated without replacement.
  • serverSideSortOnServer - deprecated without replacement.
  • serverSideFilterOnServer - deprecated without replacement.

Column Filters

  • api.getFilterInstance - deprecated, use api.getColumnFilterInstance instead. To get/set individual filter models, use api.getColumnFilterModel or api.setColumnFilterModel instead.

Column API

  • suppressMenu - deprecated, use suppressHeaderMenuButton instead.
  • columnsMenuParams - deprecated, use columnChooserParams instead.
  • column.getMenuTabs - deprecated, use columns.getColDef.menuTabs ?? defaultValues instead.

Grid API

  • getModel - deprecated, use grid API methods listed in Accessing Data.
  • getModel().getRow(index) - deprecated, use api.getDisplayedRowAtIndex(index) instead.
  • getModel().getRowNode(id) - deprecated, use api.getRowNode(id) instead.
  • getModel().getRowCount() - deprecated, use api.getDisplayedRowCount() instead.
  • getModel().isEmpty() - deprecated, use !!api.getDisplayedRowCount() instead.
  • getModel().forEachNode() - deprecated, use api.forEachNode() instead.
  • getFirstDisplayedRow - deprecated, use api.getFirstDisplayedRowIndex instead.
  • getLastDisplayedRow - deprecated, use api.getLastDisplayedRowIndex instead.
  • flashCells, flashDelay and fadeDelay params are deprecated in favor of flashDuration and fadeDuration params.
  • showColumnMenuAfterButtonClick - deprecated, use IHeaderParams.showColumnMenu within a header component, or api.showColumnMenu elsewhere.
  • showColumnMenuAfterMouseClick - deprecated, use IHeaderParams.showColumnMenuAfterMouseClick within a header component, or api.showColumnMenu elsewhere.
  • removeRowGroupColumn - deprecated, use removeRowGroupColumns providing the single string input param in an array instead.
  • addRowGroupColumn - deprecated, use addRowGroupColumns providing the single string input param in an array instead.
  • setColumnPinned - deprecated, use setColumnsPinned providing the single string input param in an array instead.
  • removePivotColumn - deprecated, use removePivotColumns providing the single string input param in an array instead.
  • addPivotColumn - deprecated, use addPivotColumns providing the single string input param in an array instead.
  • addAggFunc - deprecated, use addAggFuncs providing the single string input param in an array instead.
  • removeValueColumn - deprecated, use removeValueColumns providing the single string input param in an array instead.
  • addValueColumn - deprecated, use addValueColumns providing the single string input param in an array instead.
  • autoSizeColumn - deprecated, use autoSizeColumns providing the single string input param in an array instead.
  • moveColumn - deprecated, use moveColumns providing the single string input param in an array instead.
  • setColumnWidth - deprecated, use setColumnWidths providing the single string input param in an array instead.
  • setColumnVisible - deprecated, use setColumnsVisible providing the single string input param in an array instead.

Custom Components

  • When implementing a custom date component, IDate.onParamsUpdated has been deprecated in favour of IDate.refresh.
  • When implementing a custom floating filter component, IFloatingFilter.onParamsUpdated has been deprecated in favour of IFloatingFilter.refresh.