---
title: "Upgrading to AG Grid 31.1"
framework: vue
version: "36.1.0"
---

# Upgrading to AG Grid 31.1

## What's New

See the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-31-1/) 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@latest migrate --from=$FROM_VERSION --to=31.1
   ```

   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:

### 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](https://www.ag-grid.com/vue-data-grid/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`.