Search

React Data GridUpgrading to AG Grid 31

What's New

See the release post 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@31.0 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.

Breaking Changes

This release includes the following breaking changes:

React

  • AgGridReactFire is no longer exported from ag-grid-react. You should use AgGridReact instead.

  • The loading overlay is now displayed for all row models if column definitions are not provided when the grid is initialised. The rows will also not be created and rendered until the column definitions are provided.

  • Validation is now run when gridOptions are updated, meaning warnings may appear in console when changing grid options if an invalid configuration is reached.

  • Auto-generated group row IDs when using Client-Side Row Model now have a different format (but the same prefix).

    rowDataUpdated event is only fired for the Client-Side Row Model (per the existing documentation)."

  • Legacy React Rendering, enabled via suppressReactUi property is deprecated since v28 and is now removed.

    AG Grid now only renders via React components as has been the default since v28.

  • rowDataChangeDetectionStrategy - removed. identity / reference equals always used.

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.

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 behavior 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).

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.

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 behavior) 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 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.

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