React Data GridUpgrading to AG Grid 27

Full React rendering, Column Filtering Improvements, Sparklines Crosshair, Accessibility Support Improvements

What's New Copy Link

AG Grid 27.0 adds many new features - full React rendering, Column Filtering Improvements, Sparklines Crosshair and Accessibility Support Improvements.

Documentation Copy Link

See AG Grid 27.0 Documentation.

Breaking Changes Copy Link

Supported Environments Copy Link

AG Grid 27 does not support Polymer, Angular 7, AngularJS and Internet Explorer 11. If you are using Polymer, Angular 7, AngularJS or need to support Internet Explorer 11 please use AG Grid 26, which will be a long-term support release. You will still be able to report issues against AG Grid 26 and we will release new minor versions of AG Grid 26 to address these.

React Copy Link

• getReactContainerClasses() is no longer needed as React Portals are not used anymore.
• JavaScript Functional Components are no longer supported when using React. Instead, use either React Functional Components or JavaScript Class Components.

Server-Side Row Model Copy Link

• getRowNodeId() is now required when Row Selection is enabled in the Server-Side Row Model.

React / Angular / Vue Copy Link

• get{comp-name}Instance[s]() (e.g., getCellRendererInstances) is no longer needed. These methods now return the React / Angular / Vue component if one exists.

Clipboard Copy Link

• The following methods now accept parameterized objects:
  • copySelectedRowsToClipboard(params?: IClipboardCopyRowsParams)
  • copySelectedRangeToClipboard(params?: IClipboardCopyParams)
• Cell values copied exclusively from the same row are now pasted in the same row (previously, each copied value was pasted on a separate row). Cell values are now copied in the order they appear in the grid (previously, cell values were copied in the order of selection).

Integrated Charts Copy Link

• TypeScript users will need to replace the ChartType enum with the corresponding string literal. For example, ChartType.GroupedColumn should be changed to 'groupedColumn'.

Removal of Deprecated APIs Copy Link

Rendering Copy Link

• The following methods were previously deprecated and have now been removed:
  • gridApi.refreshView() - use gridApi.refreshCells() or gridApi.redrawRows() instead.
  • gridApi.refreshRows() - use gridApi.refreshCells() or gridApi.redrawRows() instead.
  • gridApi.rowDataChanged - use rowNode.setRowData(newData) to set value on a particular node, or redrawRows to refresh everything.
  • gridApi.refreshGroupRows() - use gridApi.refreshCells() instead. gridApi.refreshCells() now performs dirty checking and only refreshes cells that have changed, so it should not be necessary to only refresh the group rows.

Sorting Copy Link

• gridApi.setSortModel() and gridApi.getSortModel() were previously deprecated and have now been removed. Sort information is now part of Column State. Use columnApi.applyColumnState() and columnApi.getColumnState() instead.

Filters Copy Link

The following Filter Options / APIs were previously deprecated and have now been removed:

GridOptions

• floatingFilter - removed, use ColDef.floatingFilter instead.
• enableOldSetFilterModel - removed, use the current model structure for SetFilter instead.

GridApi

• isAdvancedFilterPresent() - removed, use isColumnFilterPresent() instead.
• getFilterApiForColDef() - removed, use getFilterInstance() instead.
• getFilterApi() - removed, use getFilterInstance() instead.

IFilterParams

• valueGetter() callback arguments have changed. They are no longer a solitary RowNode, but an object conforming to the ValueGetterFunc interface contract for consistency with other valueGetter parameters across the grid.

IFloatingFilterParams

• onFloatingFilterChanged() - removed, use parentFilterInstance() callback instead.

IProvidedFilterParams

• clearButton, resetButton, and applyButton - removed, use buttons instead.

IScalarFilterParams

• nullComparator and NullComparator - removed, use includeBlanksInEquals, includeBlanksInLessThan, and includeBlanksInGreaterThan instead.

Filter

• The Filter interface has been completely removed. Use IFilter instead.

ProvidedFilter

• onFilterChanged() - removed, use api.onFilterChanged() instead.

ISetFilterParams

• syncValuesLikeExcel - removed; this has been the default since deprecation in v22.0.0.
• selectAllOnMiniFilter - removed; this has been the default since deprecation in v22.0.0.
• suppressSyncValuesAfterDataChange - removed.
• suppressRemoveEntries - removed.
• newRowsAction has now been removed; the previous 'keep' setting is now the default.

SetFilter

• setLoading is now handled automatically.
• selectEverything() - removed, use setModel() instead.
• selectNothing() - removed, use setModel() instead.
• unselectValue() - removed, use setModel() instead.
• selectValue() - removed, use setModel() instead.
• isValueSelected() - removed, use getModel() instead.
• isEverythingSelected() - removed, use getModel() instead.
• isNothingSelected() - removed, use getModel() instead.
• getUniqueValueCount() - removed, use getValues() instead.
• getUniqueValue() - removed, use getValues() instead.

Deprecations Copy Link

This release includes the following deprecations:

Components Copy Link

• {comp-name}Framework (e.g., cellRendererFramework) is no longer required for assigning Custom Framework Components. Use {comp-name} (e.g., cellRenderer) instead. Likewise, the grid property frameworkComponents is deprecated; use the grid property components instead.

React Copy Link

• gridOptions.reactUi is no longer used as React UI is on by default.

Keyboard Navigation Copy Link

• gridOptions.suppressCellSelection is deprecated; use gridOptions.suppressCellFocus instead.
• The following interfaces have deprecated properties:
  • StartEditingCellParams { keyPress: number } use StartEditingCellParams { key: string } instead.
  • ICellEditorParams { keyPress: number } use ICellEditorParams { key: string } instead.
  • IRichCellEditorParams { keyPress: number } use IRichCellEditorParams { key: string } instead.
  • ILargeTextEditorParams { keyPress: number } use ILargeTextEditorParams { key: string } instead.
  • ISelectCellEditorParams { keyPress: number } use ISelectCellEditorParams { key: string } instead.
  • ITextCellEditorParams { keyPress: number } use ITextCellEditorParams { key: string } instead.
  • NavigateToNextCellParams { key: number } use NavigateToNextCellParams { key: string } instead.

Columns Copy Link

• gridApi.getOriginalColumnGroup() is deprecated; use gridApi.getProvidedColumnGroup() instead.

Filters Copy Link

• ITextFilterParams.textCustomComparator is deprecated; use ITextFilterParams.textMatcher instead.

Changes List Copy Link

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