--- title: "Upgrading to AG Grid 33.0" framework: react version: "36.1.0" --- # Upgrading to AG Grid 33.0 Reductions in bundle size, updated theming, column header content customisation. ## What's New AG Grid 33.0 significantly reduces bundle size via modularization and enhances functionality, theming and accessibility as described in the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-33/). These major improvements require certain breaking changes as listed below. Please use the [codemods](#codemods) to start your migration, then review the changes to [modules](#changes-to-modules--packages) and [themes](#theming). > **Note** > > AG Grid 33.0 is aimed at addressing long-standing community feedback around bundle size and theming. Naturally, given the significance of these changes, AG Grid 33.0 has introduced more breaking changes than usual. We recognise that not all users can immediately benefit from these improvements. > > Therefore we are launching Long-Term Support (LTS) versions of AG Grid (v32-lts) and AG Charts (v10-lts), ensuring you can continue receiving bug fixes without upgrading to the latest major release. We will proactively identify necessary fixes, but please feel free to report any issues you encounter against our LTS versions. ## Documentation [See AG Grid 33.0 Documentation](https://www.ag-grid.com/archive/33.0.4/documentation) ## Changes to Modules / Packages Version 33.0 introduces a major change in how feature modules are set up to reduce the bundle size. Previously there were two separate ways to include AG Grid in your project - via AG Grid Modules or AG Grid Packages. These have now been unified to simplify configuration whilst also introducing more fine-grained modules to reduce bundle size. To take full advantage of the new modules, use the [Module Selector](https://www.ag-grid.com/react-data-grid/modules/) to work out which modules you require for the AG Grid features you need. ## Migrating from Modules npm packages: `@ag-grid-community/**` / `@ag-grid-enterprise/**` In previous versions separate npm packages were required to achieve tree shaking of grid features to reduce the bundle size. The improvements made in version 33.0 remove the need for separate npm packages to achieve tree shaking. As a result all feature modules have been collapsed into either `ag-grid-community` or `ag-grid-enterprise` and all `@ag-grid-community/**` and `@ag-grid-enterprise/**` npm packages are removed as of version 33.0. The changes can be summarised as follows: - `@ag-grid-community/react` is replaced with `ag-grid-react` - All individual `@ag-grid-community/**` packages are replaced by a single tree-shakable package `ag-grid-community` - Exception - the `@ag-grid-community/locale` package remains unchanged. - All individual `@ag-grid-enterprise/**` packages are replaced by a single tree-shakable package `ag-grid-enterprise`. Here is an example of a typical package.json diff for the migration: **AG Grid Community** ```diff "dependencies": { - "@ag-grid-community/react": "^32.3.0", - "@ag-grid-community/client-side-row-model": "^32.3.0", - "@ag-grid-community/csv-export": "^32.3.0", + "ag-grid-react": "33.0.4", + "ag-grid-community": "33.0.4", } ``` **AG Grid Enterprise** ```diff "dependencies": { - "@ag-grid-community/react": "^32.3.0", - "@ag-grid-community/client-side-row-model": "^32.3.0", - "@ag-grid-enterprise/master-detail": "^32.3.0", - "@ag-grid-enterprise/row-grouping": "^32.3.0", + "ag-grid-react": "33.0.4", + "ag-grid-enterprise": "33.0.4", } ``` The codemod for version 33.0 will automatically update all your import paths and module registration to ensure backwards compatibility. > **Note** > > After updating your package.json file, we recommend using the Codmod to assist your migration as it will update all your applications import paths and module registration to ensure backwards compatibility. > > `npx @ag-grid-devtools/cli@latest migrate --from=$FROM_VERSION --to=33.0` ### Changes to Existing Modules The following changes have been made to the existing modules to ensure that each module only includes the minimal code required for that feature: - `ColumnsToolPanelModule` - no longer imports the `RowGroupingModule` - `ExcelExportModule` - no longer imports the `CsvExportModule` - `MenuModule` - split into `ColumnMenuModule` for the Column Menu, and `ContextMenuModule` for the Context Menu - `RangeSelectionModule` - replaced with `CellSelectionModule` - `RowGroupingModule` - split into several modules - `RowGroupingModule` - Row Grouping only - `TreeDataModule` - Tree Data - `PivotModule` - Pivoting - `RowGroupingPanelModule` - Row Grouping Panel / Pivot Panel - `GroupFilterModule` - Group Filter - `GridChartsModule` - replaced with `IntegratedChartsModule` and requires AG Charts module to be registered - `SparklinesModule` - requires AG Charts module to be registered > **Note** > > The codemod will include the new modules to match the existing behaviour of v32 module dependencies. For example, if you were importing the ExcelExportModule in v32 then the codemod will automatically include the CsvExportModule in v33. ### Validation Module To help identify configuration issues we strongly recommend enabling validation in your development build. This validates your configuration and provides extended error diagnosis to help you resolve issues quickly. Call `enableDevValidations()` once, before any grid is created: ```js // via process.env.NODE_ENV if (process.env.NODE_ENV !== 'production') { enableDevValidations(); } ``` This is equivalent to registering the `ValidationModule` directly, for example `ModuleRegistry.registerModules([ValidationModule])`. Keep validation out of your production build to avoid increasing bundle size unnecessarily. In v33 the `AllCommunityModule` / `AllEnterpriseModule` bundles included the `ValidationModule` by default; from v36 onwards it is excluded and must be enabled explicitly — see [Upgrading to AG Grid 36](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-36/#behaviour-changes). ## Migrating from Packages npm packages: `ag-grid-community` / `ag-grid-enterprise` / `ag-grid-charts-enterprise` If you are currently using AG Grid packages, which did not support tree shaking, then you can match the existing behaviour by registering either `AllCommunityModule` or `AllEnterpriseModule` via the ModuleRegistry before any grid is created. > **Warning** > > Using the `AllCommunityModule` / `AllEnterpriseModule` will prevent tree shaking. In v33 these bundles also included the `ValidationModule`, which should only be used in your development build; from v36 onwards it is excluded. In order to reduce the bundle size, use the [Module Selector](https://www.ag-grid.com/react-data-grid/modules/) to only register the modules you require instead of all modules. Most users will also want to set `{ theme: "legacy" }` if not already using the new Theming Api. See [Theming](#theming) for more details. **AG Grid Community** ```js import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community'; // Register all community features ModuleRegistry.registerModules([AllCommunityModule]); // Mark all grids as using legacy themes provideGlobalGridOptions({ theme: "legacy"}); ``` **AG Grid Enterprise** ```js import { ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community'; import { AllEnterpriseModule, LicenseManager } from 'ag-grid-enterprise'; LicenseManager.setLicenseKey('your License Key'); // Register all enterprise features ModuleRegistry.registerModules([AllEnterpriseModule]); // Mark all grids as using legacy themes provideGlobalGridOptions({ theme: "legacy"}); ``` ## Integrated Charts / Sparklines AG Grid Enterprise no longer includes AG Charts as part of its distribution to avoid bloating the bundle size. If you are using either Integrated Charts or Sparklines, you must now explicitly include either the community / enterprise [AG Charts](https://www.ag-grid.com/charts/) library as a dependency. ### Integrated Charts / Sparklines Migration Steps For an application using Integrated Charts / Sparklines via the `AllEnterpriseModule` bundle with the Enterprise version of AG Charts first add `ag-charts-enterprise` to your package.json dependencies. ```diff "dependencies": { "ag-grid-enterprise": "33.0.4", + "ag-charts-enterprise": "~11.0.0", } ``` Then pass the `AgChartsEnterpriseModule` to the `AllEnterpriseModule` to activate the charting features. ```js import { AllEnterpriseModule, LicenseManager, ModuleRegistry } from 'ag-grid-enterprise'; import { AgChartsEnterpriseModule } from 'ag-charts-enterprise'; ModuleRegistry.registerModules([ AllEnterpriseModule.with(AgChartsEnterpriseModule) ]); LicenseManager.setLicenseKey('your License Key'); ``` If you are using AG Grid Modules instead of `AllCommunityModule` or `AllEnterpriseModule`, then both the `IntegratedChartsModule` and `SparklinesModule` also require the AG Charts module to be registered when they are used. ```js import { IntegratedChartsModule, SparklinesModule, LicenseManager, ModuleRegistry } from 'ag-grid-enterprise'; import { AgChartsEnterpriseModule } from 'ag-charts-enterprise'; ModuleRegistry.registerModules([ IntegratedChartsModule.with(AgChartsEnterpriseModule), SparklinesModule.with(AgChartsEnterpriseModule) ]); LicenseManager.setLicenseKey('your License Key'); ``` ## Theming The new and improved Theming API is now the default theming method for AG Grid. If you wish to migrate to the Theming Api see the [Theming API Migration Guide](https://www.ag-grid.com/react-data-grid/theming-migration/). However, this is not a requirement to upgrade to version 33.0. ### Continue with Legacy Themes If you want to upgrade to version 33.0 without immediately adopting the Theming API, you can opt back in to the v32 style of themes by setting the grid option `theme: "legacy"`. You can then continue to use legacy themes. If you have multiple grids you can mark them all as using legacy themes via a [Global Grid Option](https://www.ag-grid.com/react-data-grid/grid-interface/#global-grid-options). Enterprise users can define this alongside their licence key. ```js import { provideGlobalGridOptions } from 'ag-grid-community'; // Mark all grids as using legacy themes provideGlobalGridOptions({ theme: "legacy" }); ``` ## Codemods Follow these steps to upgrade your project's AG Grid version to 33.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 as outline above to version 33.0 3. Open a terminal and navigate to your project's root folder 4. Run the `migrate` command of version `33.0` of the AG Grid codemod runner, where `$FROM_VERSION` refers to your project's existing AG Grid version: ```bash npx @ag-grid-devtools/cli@latest migrate --from=$FROM_VERSION --to=33.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. > **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. ## Breaking Changes The full list of breaking changes across all features for version 33.0. **Breaking Changes:** AG Grid version 33.0 includes the following breaking changes: ### Changes To Modules / Packages Changes outline above in the [Changes to Modules / Packages section](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/#changes-to-modules--packages). ### Integrated Charts / Sparklines Changes outline above in the [Integrated Charts / Sparklines section](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/#integrated-charts--sparklines) ### Property Value Coercion For non-TS users or users who use TS but avoid type validation there's changes in property value coercion: ### React - `AgReactUiProps` removed, please use `AgGridReactProps` instead. - `AgGridReactProps`: - `disableStaticMarkup` no longer used. - `legacyComponentRendering` no longer used. - `AgReactComponent`: - `getReactContainerStyle` removed, apply styling directly to `ag-react-container` if needed. - `getReactContainerClasses` removed, apply styling directly to `ag-react-container` if needed. - `IHeaderGroupReactComp` removed, please use `IHeaderGroup` instead. - `IHeaderReactComp` removed, please use `IHeader` instead. - `IDateReactComp` removed, please use `IDate` instead. - `IFilterReactComp` removed, please use `IFilter` instead. - `IFloatingFilterReactComp` removed, please use `IFloatingFilter` instead. - `ICellRendererReactComp` removed, please use `ICellRenderer` instead. - `ICellEditorReactComp` removed, please use `ICellEditor` instead. - `ILoadingCellRendererReactComp` removed, no interface required. - `ILoadingOverlayReactComp` removed, please use `ILoadingOverlay` instead. - `INoRowsOverlayReactComp` removed, please use `INoRowsOverlay` instead. - `IStatusPanelReactComp` removed, please use `IStatusPanel` instead. - `IToolPanelReactComp` removed, please use `IToolPanel` instead. - `ITooltipReactComp` removed, no interface required. ### Server-side Rendering AG Grid no longer patches global properties that are not present in a Server environment, i.e HTMLElement and others. If possible you should avoid rendering AG Grid on the server as this is not supported. ### Stricter Types The following properties are now strictly typed to only their valid values instead of `string`: - gridOptions - `chartMenuItems` / `getMainMenuItems` / `getContextMenuItems` - columnDefs - `mainMenuItems` / `contextMenuItems` ### Column Menu The column property is now optional in the callback to get column menu items (in the grid option `getMainMenuItems` or `colDef.mainMenuItems`). `column` will be null when a column group header or empty column space is right-clicked on. A new property `columnGroup` will be provided when a column group header is right-clicked on. ### Row Drop Zone `api.getRowDropZoneParams()` returns undefined if the `RowDragModule` is not registered. ### Server-side Row Model Server-side Row Model full store (activated by `suppressServerSideInfiniteScroll` property) is now removed. Please use the standard server-side row model functionality as documented. ### Column State Column state properties in the column definition are no longer parsed to number/boolean. Provide the correct types instead of strings. ### Grid State Grid state `colId ag-Grid-ControlsColumn` is now named `ag-Grid-SelectionColumn`. Restoring grid state with the old `colId` will have no effect. ### Integrated Charts `navigator` is removed from `ChartFormatPanelGroup`. Navigator setting is now part of the Integrated Charts Advanced Settings. ### Sparklines - `type: 'column'` - removed, use `type: 'bar'` and `direction: 'vertical'` instead. - `tooltip.renderer` no longer returns tooltip font colour and opacity - use CSS instead. - `tooltip.xOffset / tooltip.yOffset` - removed, use CSS instead. - `tooltip.container` - removed, AG Charts now handles this. - `marker.formatter` - removed, use `marker.itemStyler` instead. - `sparklineOptions.[line, area, bar, column]` to apply styles - removed, use `sparklineOptions` properties instead. - `highlightStyle` now follows the AG Charts options - for more customisation options use an `itemStyler` instead. - `sparklineOptions.valueAxisDomain` - removed, use `sparklineOptions.min/max` instead. - `sparklineOptions.paddingInner / sparklineOptions.paddingOuter` - removed, use `sparklineOptions.axis.paddingInner / sparklineOptions.axis.paddingOuter` instead. - `sparklineOptions.container` - removed. - `sparklineOptions.label.placement` - updated to use [AG Charts Label Placement](https://www.ag-grid.com/charts/javascript/bar-series/#reference-AgBarSeriesOptions-label-placement). Instead of `insideBase`, `center`, `insideEnd` and `outsideEnd`, please use `inside-center`, `inside-start`, `inside-end` or `outside-end` ### Custom Icons Setting any of the custom icons listed below will have the provided custom icon only apply in the specific use case its name indicates, instead of all cases as before. To have the custom icon apply to additional cases, set the additional icon keys pointing to the same custom icon. See list of icons changed: - `smallDown` (deprecated): - `advancedFilterBuilderSelect` for Advanced Filter Builder dropdown - `selectOpen` for Select cell editor and dropdowns (e.g., Integrated Charts menu) - `richSelectOpen` for Rich Select cell editor - `smallLeft` (deprecated): - `panelDelimiterRtl` for Row Group Panel / Pivot Panel - `subMenuOpenRtl` for sub-menus - `smallRight` (deprecated): - `panelDelimiter` for Row Group Panel / Pivot Panel - `subMenuOpen` for sub-menus - `previous`: - `previous` for pagination - `chartsThemePrevious` for Integrated Charts theme picker - `next`: - `next` for pagination - `chartsThemeNext` for Integrated Charts theme picker - `cancel`: - `cancel` for column drag pills - `richSelectRemove` for Rich Select cell editor pills - `menu`: - `menu` for button to launch the legacy column menu - `legacyMenu` for legacy column menu tab header - `menuAlt`: - `menuAlt` for new column menu - `chartsMenu` for Integrated Charts menu - `columns`: - `columns` for the column menu/column chooser - `columnsToolPanel` for the Columns Tool Panel tab icon - `filter`: - `filter` for buttons that open the filter (header/menu) - `filtersToolPanel` for the Filters Tool Panel tab icon - `filterActive` for displaying the filter is active (header with legacy column menu, Filters Tool Panel item) - `filterTab` for the filter tab of the legacy tabbed column menu - `save`: - `save` for the export menu - `chartsDownload` for Integrated Charts download - `columnSelectClosed`: - `columnSelectClosed` for the Columns Tool Panel/Column Chooser/column tab in the legacy tabbed column menu - `accordionClosed` for accordions (Filters Tool Panel, Integrated Charts tool panels) - `columnSelectOpen`: - `columnSelectOpen` for the Columns Tool Panel/Column Chooser/column tab in the legacy tabbed column menu - `accordionOpen` for accordions (Filters Tool Panel, Integrated Charts tool panels) - `columnSelectIndeterminate`: - `columnSelectIndeterminate` for the Columns Tool Panel/Column Chooser/column tab in the legacy tabbed column menu - `accordionIndeterminate` for accordions (Filters Tool Panel, Integrated Charts tool panels) ## Behaviour Changes There are no behaviour changes in AG Grid version 33.0 ## Removal of Deprecated APIs The following APIs have been deprecated since at least v31 and have now been removed. **Removed Deprecated APIs:** ### Grid API - `new Grid()` - removed, use `createGrid` instead. - `api` - no longer mutated onto the provided `gridOptions` for Javascript users. - First argument of `selectAll` and `deselectAll` grid API methods is now the selection mode, the event source is now the second argument. Both are optional. - `getFirstDisplayedRow` - removed, use `getFirstDisplayedRowIndex` instead. - `getLastDisplayedRow` - removed, use `getLastDisplayedRowIndex` instead. - `getModel()` - removed, use the appropriate grid API methods instead. - `getValue` - removed, use `getCellValue` instead. - `showColumnMenuAfterButtonClick` - removed, use `IHeaderParams.showColumnMenu` within a header component, or `api.showColumnMenu` elsewhere. - `showColumnMenuAfterMouseClick` - removed, use `IHeaderParams.showColumnMenuAfterMouseClick` within a header component, or `api.showColumnMenu` elsewhere. - `autoSizeColumn(key)` - removed, please use `autoSizeColumns([colKey])` instead. - `setColumnWidths(key, newWidth)` - removed, please use `{ setColumnWidths([{ key: newWidth }]) }` instead. - `moveColumn(key, toIndex)` - removed, please use `moveColumns([key], toIndex)` instead. - `addAggFunc(key, func)` - removed, please use `{ addAggFuncs({ key: func }) }` instead. - `removeValueColumn(colKey)` - removed, please use `removeValueColumns([colKey])` instead. - `addValueColumn(colKey)` - removed, please use `addValueColumns([colKey])` instead. - `removeRowGroupColumn(colKey)` - removed, please use `removeRowGroupColumns([colKey])` instead. - `addRowGroupColumn(colKey)` - removed, please use `addRowGroupColumns([colKey])` instead. - `removePivotColumn(colKey)` - removed, please use `removePivotColumns([colKey])` instead. - `addPivotColumn(colKey)` - removed, please use `addPivotColumns([colKey])` instead. - `setColumnVisible(key, visible)` - removed, please use `setColumnsVisible([key], visible)` instead. - `setColumnPinned(key, pinned)` - removed, please use `setColumnsPinned([key], pinned)` instead. - To get/set individual filter models, use `getColumnFilterModel` or `setColumnFilterModel` instead. ### Grid Options - `suppressServerSideInfiniteScroll` - removed without replacement. - Interface `getServerSideGroupLevelParams` - `suppressInfiniteScroll` property removed without replacement. - `advancedFilterModel` - removed, please use `initialState.filter.advancedFilterModel` instead. - `suppressAsyncEvents` - removed, Events should be handled asynchronously. - `cellFlashDelay` - removed, please use `cellFlashDuration` instead. - `cellFadeDelay` - removed, please use `cellFadeDuration` instead. - `enableCellChangeFlash` - removed, set `enableCellChangeFlash` in the `ColDef` or `defaultColDef` for all columns. - `suppressGroupMaintainValueType` - removed. - `groupIncludeFooter` - removed, please use `groupTotalRow` instead. - `groupIncludeTotalFooter` - removed, please use `grandTotalRow` instead. - `serverSideSortOnServer` - removed. - `serverSideFilterOnServer` - removed. - `tabToNextCell` returning `null` - removed. - `tabToNextHeader` returning `null` - removed. ### ColDef - `suppressCellFlash` - removed, please use `enableCellChangeFlash: false` in the `ColDef`. - `columnsMenuParams` - removed, please use `columnChooserParams` instead. - `suppressMenu` - removed, please use `suppressHeaderMenuButton` instead. ### Floating Filters Floating filters provided via the `colDef.filter` values `text`, `number`, `date`, `set`, `multi`, and `group` no longer work. Use the values `agTextColumnFilter`, `agNumberColumnFilter`, `agDateColumnFilter`, `agSetColumnFilter`, `agMultiColumnFilter`, and `agGroupColumnFilter` instead. ### Interfaces - `RowDragEvent` interface: `vDirection` property is now typed as `'up' | 'down' | null`. - `IFloatingFilterParams`: `suppressFilterButton` - removed, please use `colDef.suppressFloatingFilterButton` instead. - `ITextFilterParams`: `textCustomComparator` - removed, please use `textMatcher` instead. - `IFloatingFilter`: `onParamsUpdated` - removed, please use `refresh` instead. - `IFilterParams`: `valueGetter` - removed, please use `getValue` instead. - `IDate`: `onParamsUpdated` - removed, please use `refresh` instead. - `IGroupCellRendererParams`: `footerValueGetter` - removed, please use `totalValueGetter` instead. - `FlashCellsParams`: - `flashDelay` - removed, please use `flashDuration` instead. - `fadeDelay` - removed, please use `fadeDuration` instead. - `ToolPanelColumnCompParams`: `ToolPanelColumnCompParams` - removed, please use `IToolPanelColumnCompParams` instead. - `ExcelAlignment`: Legacy property `verticalText` - removed. - `ExcelFont`: Legacy property `charSet` - removed. - `ExcelStyle`: Legacy property `name` - removed. ## Deprecations **Deprecations:** ### Modules - `ModuleRegistry.register(module)` - deprecated, use `ModuleRegistry.registerModules([module])` instead. - `MenuModule` - deprecated, use `ColumnMenuModule` for the Column Menu and/or `ContextMenuModule` for the Context Menu instead. - `RangeSelectionModule` - deprecated, use `CellSelectionModule` instead. ### Column Object - `Column.isHovered()` - deprecated, use `api.isColumnHovered(column)` instead. ### Grid API - `deselectAllFiltered` - deprecated, use `deselectAll('filtered')` instead. - `deselectAllOnCurrentPage` - deprecated, use `deselectAll('currentPage')` instead. - `selectAllFiltered` - deprecated, use `selectAll('filtered')` instead. - `selectAllOnCurrentPage` - deprecated, use `selectAll('currentPage')` instead. ### Grid Options - `cellRendererParams.checkbox` - deprecated, use `rowSelection.checkboxLocation = "autoGroupColumn"` instead. - `gridOptions.sortingOrder` - deprecated, use `defaultColDef.sortingOrder` instead. - `gridOptions.unSortIcon` - deprecated, use `defaultColDef.unSortIcon` instead. - `groupRemoveLowestSingleChildren` - deprecated, use `groupHideParentOfSingleChild: 'leafGroupsOnly'` instead. - `groupRemoveSingleChildren` - deprecated, use `groupHideParentOfSingleChild: true` instead. - `suppressMakeColumnVisibleAfterUnGroup` - deprecated, use `suppressGroupChangesColumnVisibility: "suppressShowOnUngroup"` instead. - `suppressPropertyNamesCheck` - deprecated without replacement. Previously used for adding user properties in `gridOptions` and `columnDefs`. Now, use the `context` property in both for storing arbitrary metadata. - `suppressRowGroupHidesColumns` - deprecated, use `suppressGroupChangesColumnVisibility: "suppressHideOnGroup"` instead. - When setting both `suppressMakeColumnVisibleAfterUnGroup` and `suppressRowGroupHidesColumns` to `true`, use `suppressGroupChangesColumnVisibility: true` instead. ### Row Node - `childIndex` - deprecated, use `rowNode.parent?.childrenAfterSort?.findIndex(r => r === rowNode)` instead. - `firstChild` - deprecated, use `rowNode.parent?.childrenAfterSort?.[0] === rowNode` instead. - `lastChild` - deprecated, use `!!rowNode.parent?.childrenAfterSort && (rowNode.parent.childrenAfterSort[rowNode.parent.childrenAfterSort.length - 1] === rowNode)` instead. ### Row Node Events - `childIndexChanged` - deprecated, use the global `modelUpdated` event to determine when row children have changed. - `firstChildChanged` - deprecated, use the global `modelUpdated` event to determine when row children have changed. - `lastChildChanged` - deprecated, use the global `modelUpdated` event to determine when row children have changed. ### Theming Custom Icons - `smallDown` - deprecated, use: - `advancedFilterBuilderSelect` for Advanced Filter Builder dropdown. - `selectOpen` for Select cell editor and dropdowns (e.g., Integrated Charts menu). - `richSelectOpen` for Rich Select cell editor. - `smallLeft` - deprecated, use: - `panelDelimiterRtl` for Row Group Panel / Pivot Panel. - `subMenuOpenRtl` for sub-menus. - `smallRight` - deprecated, use: - `panelDelimiter` for Row Group Panel / Pivot Panel. - `subMenuOpen` for sub-menus. ## Changes List [See the full changelog for v33.0.0](https://www.ag-grid.com/changelog/?fixVersion=33.0.0)