Search

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

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.

See Implementing a Cell Editor Component 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 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.

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

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