Search

Vue Data GridUpgrading to AG Grid 33

Reductions in bundle size, updated theming, column header content customization.

What's New

AG Grid 33 significantly reduces bundle size via modularization and enhances functionality, theming and accessibility as described in the release post. These major improvements require certain breaking changes as listed below.

Please use the codemods to start your migration, then review the changes to modules and themes.

AG Grid 33 is aimed at addressing long-standing community feedback around bundle size and theming. Naturally, given the significance of these changes, this release 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.

Changes to Modules / Packages

Version 33 introduces a major change to how modules work to allow for smaller bundle sizes. Previously AG Grid supported two approaches - modules and packages. These have now been merged together to allow for simpler configuration and greater optimisation of bundle size.

Migrating from AG Grid Community

To match the existing behaviour simply register the AllCommunityModule bundle via the ModuleRegistry before any grid is created. This module contains all the features that were previously included as part of ag-grid-community.

Most users will want to set {theme: "legacy"} if not already using the new Theming Api, see Theming for more details. 

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"});

Migrating from AG Grid Enterprise

To match the existing behaviour simply register the AllEnterpriseModule bundle via the ModuleRegistry alongside your LicenseManager.

If you are using Integrated Charts or Sparklines, see the migration steps below.

Most users will want to set {theme: "legacy"} if not already using the new Theming Api, see Theming for more details. 

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"});

Migrating from AG Grid Modules

@ag-grid-community/** / @ag-grid-enterprise/**

In v33 there is no longer a requirement for separate NPM feature modules to achieve tree shaking. This means we can simply export all the modules from either ag-grid-community or ag-grid-enterprise as follows:

  • @ag-grid-community/vue3 is replaced with ag-grid-vue3
  • @ag-grid-community/** packages are replaced with ag-grid-community

    • Apart from @ag-grid-community/locale which remains unchanged.

  • @ag-grid-enterprise/** packages are replaced with ag-grid-enterprise.

Here is an example of a typical package.json diff for the migration:

AG Grid Community

"dependencies": {
-    "@ag-grid-community/vue3": "^32.3.0",
-    "@ag-grid-community/client-side-row-model": "^32.3.0",
-    "@ag-grid-community/csv-export": "^32.3.0",
+    "ag-grid-vue3": "33.0.1",
+    "ag-grid-community": "33.0.1",
}

AG Grid Enterprise

"dependencies": {
-    "@ag-grid-community/vue3": "^32.3.0",
-    "@ag-grid-community/client-side-row-model": "^32.3.0",
-    "@ag-grid-community/csv-export": "^32.3.0",
-    "@ag-grid-enterprise/clipboard": "^32.3.0",
-    "@ag-grid-enterprise/master-detail": "^32.3.0",
-    "@ag-grid-enterprise/row-grouping": "^32.3.0",
+    "ag-grid-vue3": "33.0.1",
+    "ag-grid-enterprise": "33.0.1",
}

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@33.0 migrate --from=$FROM_VERSION

Validation Module

To help identify missing modules and configuration issues at development time, we recommend including the ValidationModule in your development build. This will provide helpful details on missing modules for a particular feature. This is provided as a separate module so that it can be excluded from production builds saving even more bundle size. It is included in the AllCommunityModule.

Changes to Existing Modules

The following changes have been made to the existing modules to ensure that each feature 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.

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

Optimizing Bundle Size

To take full advantage of the new modules you may wish to use the Module Selector to work out which modules you require for a give set of features.

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

"dependencies": {
"ag-grid-enterprise": "33.0.1",
+   "ag-charts-enterprise": "11.0.3-beta.20250126",
}

Then pass the AgChartsEnterpriseModule to the AllEnterpriseModule to activate the charting features. 

import { AllEnterpriseModule, LicenseManager, ModuleRegistry } from 'ag-grid-enterprise';
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

LicenseManager.setLicenseKey('your License Key');
ModuleRegistry.registerModules([
AllEnterpriseModule.with(AgChartsEnterpriseModule)
]);

If you are using AG Grid Modules, then both the IntegratedChartsModule and SparklinesModule also require the AG Charts module to be registered when they are used. 

import { IntegratedChartsModule, SparklinesModule, LicenseManager, ModuleRegistry } from 'ag-grid-enterprise';
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

LicenseManager.setLicenseKey('your License Key');
ModuleRegistry.registerModules([
IntegratedChartsModule.with(AgChartsEnterpriseModule),
SparklinesModule.with(AgChartsEnterpriseModule)
]);

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. However, this is not a requirement to upgrade to v33.

Continue with Legacy Themes

If you want to upgrade to v33 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. Enterprise users can define this alongside their license key. 

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:

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

  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: 

    npx @ag-grid-devtools/cli@33.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

The full list of breaking changes across all features for v33.

Breaking Changes

This release includes the following breaking changes:

Changes To Modules / Packages

Changes outline above in the Changes to Modules / Packages section

Integrated Charts / Sparklines

Changes outline above in the Integrated Charts / Sparklines section

Vue Minimum Version

The minimum Vue version supported is now Vue 3.5. Please upgrade to Vue 3.5 or later to use this AG Grid version.

Property Value Coercion

For non-TS users or users who use TS but avoid type validation there's changes in property value coercion: For boolean values provided as strings, “false” is no longer converted to false any more - all string values are truthy.

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

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.