JavaScript Data GridUpgrading to AG Grid 31

What's New Copy Link

See the release post for details of what's new in version 31.

Codemods Copy Link

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.

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 Copy Link

This release includes the following breaking changes:

Integrated Charts Copy Link

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 Copy Link

• 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 Copy Link

• 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 Copy Link

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 Copy Link

• 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 Copy Link

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 Copy Link

• 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 Copy Link

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 Copy Link

• 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 Copy Link

• 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 Copy Link

• 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 Copy Link

• 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 Copy Link

This release includes the following deprecations:

Creating AG Grid Copy Link

new agGrid.Grid(...) is deprecated. Use agGrid.createGrid API instead: const gridApi = agGrid.createGrid(...).

GridOptions Copy Link

• 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 Copy Link

IFilterParams.valueGetter - deprecated, use IFilterParams.getValue instead.

Column API Copy Link

Column API is now deprecated. Column API methods are now available in Grid API instead.

Grid API Copy Link

• 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 Copy Link

If you would like to see the full list of changes in this release, please see the Changelog.