Vue Data GridUpgrading to AG Grid 33

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-beta.20241221.1523",
+    "ag-grid-community": "33.0.1-beta.20241221.1523",
}

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-beta.20241221.1523",
+    "ag-grid-enterprise": "33.0.1-beta.20241221.1523",
}

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-beta.20241221.1523",
+   "ag-charts-enterprise": "11.0.3-beta.20241219",
}

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)
]);

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

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)

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.

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.