--- title: "Upgrading to AG Grid 31.1" framework: react version: "36.1.0" --- # Upgrading to AG Grid 31.1 ## What's New See the [release post](https://www.ag-grid.com/blog/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/react-data-grid/codemods/) documentation for more details. ## Migrating Custom Components to Use reactiveCustomComponents Option Custom components can now be created more easily by setting `reactiveCustomComponents`. Custom components built in an imperative way (without setting `reactiveCustomComponents`) may need to be rebuilt in order to work with the setting enabled. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the `reactiveCustomComponents` option will be `true` by default, and custom components built in an imperative way will still be supported as an optional behaviour. Please note that enabling this setting affects all custom components and you cannot use a mix of reactive custom components and imperative custom components in the same grid instance. ## Custom Cell Editor Components - `getValue` is no longer used. The component will be passed `value` as a prop with the latest value (and `initialValue` with the value when editing started). When the value is updated in the UI, the component should call the prop `onValueChange` with the updated value. - Any other date methods defined via `useImperativeHandle` should now be defined as callbacks, and passed to the new hook `useGridCellEditor`. These are all optional; the hook is only needed if the callbacks are required. - If using `api.getCellEditorInstances`, the instance returned will now be a wrapper. To get the React custom cell editor component, use the helper function `getInstance` with the returned wrapper instance. See [Accessing Cell Editor Instances](https://www.ag-grid.com/react-data-grid/cell-editors/). See [Implementing a Cell Editor Component](https://www.ag-grid.com/react-data-grid/cell-editors/) for examples and more details on the interfaces. ## Custom Date Components - `getDate` and `setDate` are no longer used. The component will be passed `date` as a prop with the latest date. When the date is updated in the UI, the component should call the prop `onDateChange` with the updated date (instead of calling the prop `onDateChanged` when the date changes). - Any other editing methods defined via `useImperativeHandle` should now be defined as callbacks, and passed to the new hook `useGridDate`. These are all optional; the hook is only needed if the callbacks are required. See [Implementing a Date Component](https://www.ag-grid.com/react-data-grid/filter-date/) for examples and more details on the interfaces. ## Custom Filter Components - `isFilterActive` method is no longer used. If the model is `null`, the filter is treated as inactive. - `getModel` and `setModel` are no longer used. The component will be passed `model` as a prop with the latest model. When the filter is updated in the UI, the component should call the prop `onModelChange` with the updated model (instead of calling the prop `filterChangedCallback` when the model changes). - The `filterModifiedCallback` prop is replaced with the prop `onUiChange`. - Any other filter methods defined via `useImperativeHandle` should now be defined as callbacks, and passed to the new hook `useGridFilter`. `doesFilterPass` is a mandatory callback; all others are optional. - If using `api.getColumnFilterInstance` (or `api.getFilterInstance`, which has been deprecated by `api.getColumnFilterInstance`), the instance returned will now be a wrapper. To get the React custom filter component, use the helper function `getInstance` with the returned wrapper instance. See [Accessing the Component Instance](https://www.ag-grid.com/react-data-grid/component-filter/#accessing-the-component-instance). See [Implementing a Filter Component](https://www.ag-grid.com/react-data-grid/component-filter/#implementing-a-filter-component) for examples and more details on the interfaces. ## Custom Floating Filter Components - `onParentModelChanged` is no longer used. The component will be passed `model` as a prop with the latest model. When the filter is updated in the UI, the component should call the prop `onModelChange` with the updated model (instead of calling the prop `parentFilterInstance` and setting the updated value directly on the parent filter instance when the model changes). - Any other filter methods defined via `useImperativeHandle` should now be defined as callbacks, and passed to the new hook `useGridFloatingFilter`. These are all optional; the hook is only needed if the callbacks are required. See [Implementing a Floating Filter Component](https://www.ag-grid.com/react-data-grid/component-floating-filter/#implementing-a-floating-filter-component) for examples and more details on the interfaces. ## Custom Status Bar Panel Components - If using `api.getStatusPanel`, the instance returned will now be a wrapper. To get the React custom status bar panel component, use the helper function `getInstance` with the returned wrapper instance. See [Accessing Status Bar Panel Instances](https://www.ag-grid.com/react-data-grid/status-bar/). ## Deprecations This release includes the following deprecations: ### React - `AgReactUiProps` - deprecated, use `AgGridReactProps` instead. - `AgGridReactProps.disableStaticMarkup`, `AgGridReactProps.legacyComponentRendering` - deprecated, as they are no longer used. The following React custom component interfaces are deprecated along with their methods: - `getReactContainerStyle` and `getReactContainerClasses` - deprecated, apply styling directly to the CSS class `.ag-react-container` if needed. - `IHeaderGroupReactComp` - deprecated, use `IHeaderGroup` instead. - `IHeaderReactComp` - deprecated, use `IHeader` instead. - `IDateReactComp` - deprecated, use `IDate` instead. - `IFilterReactComp` - deprecated, use `IFilter` instead. - `IFloatingFilterReactComp` - deprecated, use `IFloatingFilter` instead. - `ICellRendererReactComp` - deprecated, use `ICellRenderer` instead. - `ICellEditorReactComp` - deprecated, use `ICellEditor` instead. - `ILoadingCellRendererReactComp` - deprecated, no interface needed. - `ILoadingOverlayReactComp` - deprecated, use `ILoadingOverlay` instead. - `INoRowsOverlayReactComp` - deprecated, use `INoRowsOverlay` instead. - `IStatusPanelReactComp` - deprecated, use `IStatusPanel` instead. - `IToolPanelReactComp` - deprecated, use `IToolPanel` instead. - `ITooltipReactComp` - deprecated, no interface needed. ### 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/react-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`.