--- title: "Upgrading to AG Grid 31" framework: vue version: "36.1.0" --- # Upgrading to AG Grid 31 ## What's New See the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-31/) for details of what's new in version 31. ## Codemods Follow these steps to upgrade your project's AG Grid version to `31.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 `31.0.0`. 3. Open a terminal and navigate to your project's root folder. 4. Run the `migrate` command of version `31.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=31.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. ## Breaking Changes This release includes the following breaking changes: ### Integrated Charts The `solar` and `pastel` integrated chart themes have been removed. Any saved chart models will be migrated to the new `polychroma` and `sheets` themes respectively. If you're using themeOverrides, see charts migration page as the structure and naming of options have changed. If you are using Standalone Charts, please see changes to charts in the [AG Charts Migration Guide](https://www.ag-grid.com/charts/react/upgrade-to-ag-charts-9/). ### ColumnDefs - Grid columns are now sortable and resizable by default. Also, the grid animates rows by default. In order to avoid this, please set `defaultColDef.resizable = false`, `defaultColDef.sortable = false` and `gridOptions.animateRows = false`. - When not providing column definitions or setting `columnDefs = undefined`, a loading overlay will be displayed until column definitions are set. To go back to the earlier behaviour of showing a grid without any columns, please set `columnDefs = []`. - Setting `columnDefs` to `null`/`undefined` via a call to `api.setColumnDefs` or via a state variable no longer clears the columns shown in the grid. Instead, set `columnDefs` to `[]` to clear the columns shown in the grid. - `useValueFormatterForExport` is now true by default. This means that cell values are formatted using the column's valueFormatter when exporting data from the grid. This applies to CSV and Excel export, as well as clipboard operations and the fill handle. ### GridOptions - Javascript - Mutating `gridOptions` after the grid has been created will no longer be picked up by the grid. Instead use `api.setGridOption` (`property`, `newValue`) to update grid options. - Validation is now run when `gridOptions` are updated, meaning warnings may appear in console when changing grid options if an invalid configuration is reached. - `serverSideStoreType` - removed, use `suppressServerSideInfiniteScroll` instead. When false, Partial Store is used. When true, Full Store is used. - `serverSideSortingAlwaysResets` - removed, use `serverSideSortAllLevels` instead. - `serverSideFilteringAlwaysResets` - removed, use `serverSideOnlyRefreshFilteredGroups` instead. - `processSecondaryColDef` - removed, use `processPivotResultColDef` instead. - `processSecondaryColGroupDef` - removed, use `processPivotResultColGroupDef` instead. - `getServerSideStoreParams` - removed, use `getServerSideGroupLevelParams` instead. - `onRowDataChanged`: no longer fired, use `onRowDataUpdated` instead. - `getRowId` is now an initial property and can no longer be updated. - `rememberGroupStateWhenNewData` - removed. Provide getRowId to maintain group state when row data updated instead (see [Updating Row Data](https://www.ag-grid.com/vue-data-grid/data-update-row-data/)). ### Column Layout The total width of the pinned column sections (left and right) will be limited to the width of the grid - 50px. This ensures the unpinned columns area is always visible. If total width of the pinned column sections (left and right) exceeds the limit, the grid will automatically unpin columns from the pinned sections to make the unpinned columns visible again. To customise which columns get unpinned or to prevent automatic unpinning, see [Resizing Pinned Sections](https://www.ag-grid.com/vue-data-grid/column-pinning/#resizing-pinned-sections). ### Column Filters - `IServerSideGetRowsRequest.filterModel` can now be of type AdvancedFilterModel | null if Advanced Filter is enabled, or FilterModel otherwise (for Column Filters). - Added new localisation keys for the Date Filter - `lessThan` is now `before`, and `greaterThan` is now `after`. Please provide translations for these 2 new keys in your localized dictionaries to display your translation instead of the English strings for "before" and "after". ### Row Data Setting `rowData` to `null`/`undefined` via a call to `api.setRowData` or via a state variable no longer clears the rows shown in the grid. Instead, set `rowData` to `[]` to clear the rows shown in the grid. ### Row Grouping - Group values will no longer be typeless, and will be inferred from the first row when they were created. - When using row grouping with `groupDisplayType=singleColumn` (which is the default behaviour) and displaying checkboxes in the auto-group column, checkboxes in leaf rows are only displayed if `autoGroupColumnDef` provides a field or a valueGetter to show values in leaf row cells. If you'd like to show checkboxes in the group columns for leaf rows, provide a field or valueGetter in the `autoGroupColumnDef`. ### Pagination When showing the pagination controls, the page size selector is shown by default. You can prevent this by setting `paginationPageSizeSelector=false`. ### Sever-Side Row Model - `ServerSideGroupLevelParams.storeType` - removed, use `suppressInfiniteScroll` instead. When false, Partial Store is used. When true, Full Store is used. - `IsApplyServerSideTransactionParams.storeInfo` - removed, use `IsApplyServerSideTransactionParams.groupLevelInfo` instead. - `LoadSuccessParams.storeInfo` - removed, use `LoadSuccessParams.groupLevelInfo` instead. - `IServerSideGetRowsParams.successCallback` - removed, use `success` method with `LoadSuccessParams` params instead. - `IServerSideGetRowsParams.failCallback` - removed, use `fail` instead. - interface `ServerSideStoreParams` - removed, use `ServerSideGroupLevelParams` instead. - interface `GetServerSideStoreParamsParams` - removed, use `GetServerSideGroupLevelParamsParams` instead. - interface `RefreshStoreParams` - removed, use `RefreshServerSideParams` instead. - interface `ServerSideGroupState` - removed, use `ServerSideGroupLevelState` instead. ### Export - `ExcelExportParams` no longer have the following options (removed without replacement due to removing support for export as XML): - `exportMode` - `suppressTextAsCDATA` - `columnGroups`: groups are exported by default. - `skipGroups` - removed, use `skipRowGroups` instead. - `skipHeader` - removed, use `skipColumnHeaders` instead. - `customFooter` - removed, use `appendContent` instead. - `customHeader` - removed, use `prependContent` instead. - interface `RangeSelection` - removed, use `CellRange` instead. - interface `AddRangeSelectionParams` - removed, use `CellRangeParams` instead. ### Column API - `getAllColumns` - removed, use `api.getColumns` instead. - `getPrimaryColumns` - removed, use `api.getColumns` instead. - `getSecondaryColumns` - removed, use `api.getPivotResultColumns` instead. - `setSecondaryColumns` - removed, use `api.setPivotResultColumns` instead. - `getSecondaryPivotColumn` - removed, use `api.getPivotResultColumn` instead. ### Grid API - `refreshServerSideStore` - removed, use `refreshServerSide` instead. - `getServerSideStoreState` - removed, use `getServerSideGroupLevelState` instead. - `setProcessSecondaryColDef` - removed, use `api.setGridOption`(`processPivotResultColDef`, `newValue`) instead. - `setProcessSecondaryColGroupDef` - removed, use `api.setGridOption`(`setProcessPivotResultColGroupDef`, `newValue`) instead. - `setGetServerSideStoreParams` - removed, use `api.setGridOption`(`getServerSideGroupLevelParams`, `newValue`) instead. ## Deprecations This release includes the following deprecations: ### Creating AG Grid `new agGrid.Grid(...)` is deprecated. Use `agGrid.createGrid` API instead: `const gridApi = agGrid.createGrid(...)`. ### GridOptions - When using `agGrid.createGrid` API, `gridOptions.api` is deprecated. Use the grid API reference that is returned by `agGrid.createGrid(...)` instead. - `advancedFilterModel` - deprecated, use `initialState.filter.advancedFilterModel` instead. - `suppressAsyncEvents` and synchronous event handling is deprecated. Please update your events to be handled asynchronously. ### Column Filters `IFilterParams.valueGetter` - deprecated, use `IFilterParams.getValue` instead. ### Column API Column API is now deprecated. Column API methods are now available in [Grid API](https://www.ag-grid.com/vue-data-grid/grid-api/) instead. ### Grid API - `setGetRowId` is now deprecated because `getRowId` can no longer be updated (listed as a breaking change above). - The Grid API methods listed below have been deprecated. Please use Grid API methods `setGridOption` and `updateGridOptions` to set properties instead as described in [Updating Grid Options](https://www.ag-grid.com/vue-data-grid/grid-interface/#updating-grid-options). - `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` - `setGetRowClass` - `setIsFullWidthRow` - `setIsRowSelectable` - `setIsRowMaster` - `setPostSortRows` - `setGetDocument` - `setGetContextMenuItems` - `setGetMainMenuItems` - `setProcessCellForClipboard` - `setSendToClipboard` - `setProcessCellFromClipboard` - `setProcessPivotResultColDef` - `setProcessPivotResultColGroupDef` - `setPostProcessPopup` - `setInitialGroupOrderComparator` - `setGetChartToolbarItems` - `setPaginationNumberFormatter` - `setGetServerSideGroupLevelParams` - `setIsServerSideGroupOpenByDefault` - `setIsApplyServerSideTransaction` - `setIsServerSideGroup` - `setGetServerSideGroupKey` - `setGetRowStyle` - `setGetRowHeight` ## Changes List If you would like to see the full list of changes in this release, please see the [Changelog](https://www.ag-grid.com/changelog/?fixVersion=31.0.0).