Migration to 9.x

Embracing ESM-only builds ⚡ (WIP)

This new release is focused around 2 things, we now ship ESM-only builds (in other words, CommonJS builds are fully dropped and only ESM will remain), this move should help decrease the production build size a little more (at the minimum, npm download size would be cut in half). The other big change is an internal one which is an organizational one, we're moving all framework wrappers directly into Slickgrid-Universal (Angular, Aurelia, React and Vue wrappers are now all located under the frameworks/ folder), this will help tremendously with the project maintenance (any new PR will now run for all frameworks all at once (catching bugs early), publishing a new version is becoming a single click execution for all frameworks all at once, and finally having a single codebase to test & troubleshoot any wrapper, etc... will be just so much easier to handle).

Major Changes - Quick Summary

• minimum requirements bump
  • Angular 19
  • Node v20.0+
• upgrade Vanilla-Calendar-Pro to v3 with flat config
• shorter attribute names
• now using clipboard API, used in ExcelCopyBuffer/ContextMenu/CellCopy, which might requires end user permissions

Note: if you come from an earlier version, please make sure to follow each migrations in their respected order (review previous migration guides)

Changes

Removed @deprecated code

1. colspanCallback was deprecated and removed, please use the globalItemMetadataProvider instead

gridOptions = {
- colspanCallback: this.renderDifferentColspan.bind(this),
+ dataView: { 
+   globalItemMetadataProvider: { 
+     getRowMetadata: this.renderDifferentColspan.bind(this) 
+   }
+ }
}

2. groupingService from AngularGridInstance was deprecate and removed, but I would be very surprised if anyone used it. Simply use headerGroupingService instead.

function angularGridReady(angularGrid: AngularGridInstance) {
  this.angularGrid = angularGrid;
-  angularGrid.groupingService.renderPreHeaderRowGroupingTitles();
+  angularGrid.headerGroupingService.renderPreHeaderRowGroupingTitles();
}

3. Row Detail changes

• itemDetail property is removed, just use item (there's no reason to keep duplicate props)
• parent property renamed to parentRef
• OnRowBackToViewportRangeArgs and OnRowOutOfViewportRangeArgs were equal, so it was merged into a new OnRowBackOrOutOfViewportRangeArgs interface

export class Component {
  gridOptions = {
    enableRowDetailView: true,
    rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
    rowDetailView: {
-     onAsyncResponse: (e, args) => console.log('before toggling row detail', args.itemDetail),
+     onAsyncResponse: (e, args) => console.log('before toggling row detail', args.item),
    },
  };

  // `parent` renamed as `parentRef`
  callParentMethod(model: any) {
-   this.parent!.someParentFunction(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
+   this.parentRef!.someParentFunction(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
  }
}

4. Draggable Grouping setDroppedGroups to load grid with initial Groups was deprecated and now removed, simply use initialGroupBy instead

this.gridOptions = {
  enableDraggableGrouping: true,
  // frozenColumn: 2,
  draggableGrouping: {
-   setDroppedGroups: () => ['duration', 'cost'],
+   initialGroupBy: ['duration', 'cost'],
  },
};

5. for Header Menu, we had 2 similar events onHeaderMenuHideColumns and onHideColumns that were doing the same thing, so onHeaderMenuHideColumns was dropped

- onHeaderMenuHideColumns
+ onHideColumns

Grid Options

rowTopOffsetRenderType default is changing from 'top' to 'transform' and the reason is because transform is known to have better styling perf, especially on large dataset, and that is also what Ag-Grid uses by default.

previous default	new default
rowTopOffsetRenderType: 'top'	rowTopOffsetRenderType: 'transform'

• if you are using Cypress to get the row X in the grid, which is what we do ourselves, then you will need to adjust your tests

Cypress before	Cypress after
cy.get([style="top: ${GRID_ROW_HEIGHT * 0}px;"])	cy.get([style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"])
	OR cy.get([data-row=0])

Please note that you will have to change the default to rowTopOffsetRenderType: 'top' when using either RowSpan and/or Row Detail features.

Shorter Attribute Names

We are changing the columnDefinitions and gridOptions attribute names to much simpler single world names. Basically, I'm not exactly sure why I chose the long name when I created the library, but going forward, I think it would be much simpler to use single name attributes (which can help slightly with build size)

<angular-slickgrid gridId="grid1"
-  [columnDefinitions]="columnDefinitions"
-  [gridOptions]="gridOptions"
+  [columns]="columnDefinitions"
+  [options]="gridOptions"
></angular-slickgrid>

Column Functionalities

Date Editor/Filter (flat config)

Vanilla-Calendar-Pro was upgraded to v3.0 and the main breaking change is that they migrated to flat config (instead of complex object config) and this mean that if you use any of their option, then you'll have to update them to be flat.

The biggest change that you will most probably have to update is the min/max date setting when using the 'today' shortcut as shown below:

import { type VanillaCalendarOption } from '@slickgrid-universal/common';

prepareGrid() {
  this.columnDefinitions = [{
    id: 'finish', field: 'finish', name: 'Finish',
    editor: {
      model: Editors.date,
-      editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
+      editorOptions: { displayDateMin: 'today' } as VanillaCalendarOption,
    }
  }];
}

Note

for a complete list of option changes, visit the Vanilla-Calendar-Pro migration page, which details every single options with their new option names.

Grid Functionalities

Services

The GridService has CRUD methods that were sometime returning a single item and other times an array of items and for that reason we had to rely on code like onItemAdded.subscribe(item => { const items = Array.isArray(item) ? item : [item] }. So for that reason, I decided to change the event names to plural and always return an array of items which is a lot more predictable.

• onItemAdded renamed to onItemsAdded
• onItemDeleted renamed to onItemsDeleted
• onItemUpdated renamed to onItemsUpdated
• onItemUpserted renamed to onItemsUpserted