feat: add initialGroupBy to Draggable Grouping (#1800)

* feat: add `initialGroupBy` to Draggable Grouping

examples/vite-demo-vanilla-bundle/src/examples/example03.ts

@@ -384,6 +384,7 @@ export default class Example03 {
         onGroupChanged: (_e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => (this.draggableGroupingPlugin = extension),
         // groupIconCssClass: 'mdi mdi-drag-vertical',
+        initialGroupBy: ['duration'],
       },
       enableCheckboxSelector: true,
       enableRowSelection: true,

packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts

@@ -180,6 +180,11 @@ describe('Draggable Grouping Plugin', () => {
     expect(plugin.addonOptions).toEqual(addonOptions);
   });
 
+  it('should throw when pre-header is missing and not enabled', () => {
+    vi.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValueOnce(null as any);
+    expect(() => plugin.init(gridStub, addonOptions)).toThrow('[Slickgrid-Universal] Draggable Grouping requires the pre-header to be created and shown');
+  });
+
   it('should initialize the Draggable Grouping and expect optional "Toggle All" button text when provided to the plugin', () => {
     plugin.init(gridStub, { ...addonOptions, toggleAllButtonText: 'Toggle all Groups' });
 
@@ -512,6 +517,18 @@ describe('Draggable Grouping Plugin', () => {
           vi.clearAllMocks();
         });
 
+        it('should initialize the Draggable Grouping with initial groups when provided to the plugin', () => {
+          const setGroupedSpy = vi.spyOn(plugin, 'setDroppedGroups');
+          plugin.init(gridStub, { ...addonOptions, initialGroupBy: ['duration'] });
+          plugin.isInitialized = false;
+          vi.spyOn(gridStub, 'getHeaderColumn').mockReturnValue(mockHeaderColumnDiv1);
+          plugin.setupColumnReorder(gridStub, mockHeaderLeftDiv1, {}, setColumnsSpy, setColumnResizeSpy, mockColumns, getColumnIndexSpy, GRID_UID, triggerSpy);
+
+          const preHeaderElm = document.querySelector('.slick-preheader-panel') as HTMLDivElement;
+          expect(preHeaderElm).toBeTruthy();
+          expect(setGroupedSpy).toHaveBeenCalledWith(['duration']);
+        });
+
         it('should call sortable "update" from setupColumnDropbox and expect "updateGroupBy" to be called with a sort-group', () => {
           expect(plugin.dropboxElement).toEqual(dropzoneElm);
           expect(plugin.columnsGroupBy.length).toBeGreaterThan(0);

packages/common/src/extensions/slickDraggableGrouping.ts

@@ -55,6 +55,7 @@ export class SlickDraggableGrouping {
   protected _gridColumns: Column[] = [];
   protected _gridUid = '';
   protected _groupToggler?: HTMLDivElement;
+  protected _isInitialized = false;
   protected _reorderedColumns: Column[] = [];
   protected _sortableLeftInstance?: Sortable;
   protected _sortableRightInstance?: Sortable;
@@ -124,6 +125,10 @@ export class SlickDraggableGrouping {
     return this.grid.getContainerNode();
   }
 
+  set isInitialized(state: boolean) {
+    this._isInitialized = state;
+  }
+
   /** Initialize plugin. */
   init(grid: SlickGrid, groupingOptions?: DraggableGrouping): this {
     this._addonOptions = { ...this._defaults, ...groupingOptions };
@@ -132,6 +137,11 @@ export class SlickDraggableGrouping {
       this._gridUid = grid.getUID();
       this._gridColumns = grid.getColumns();
       this._dropzoneElm = grid.getTopHeaderPanel() || grid.getPreHeaderPanel();
+      if (!this._dropzoneElm) {
+        throw new Error(
+          '[Slickgrid-Universal] Draggable Grouping requires the pre-header to be created and shown for the plugin to work correctly (use `createPreHeaderPanel` and `showPreHeaderPanel`).'
+        );
+      }
       this._dropzoneElm.classList.add('slick-dropzone');
 
       // add PubSub instance to all SlickEvent
@@ -386,6 +396,12 @@ export class SlickDraggableGrouping {
       sortableOptions
     ) as Sortable;
 
+    // user can optionally provide initial groupBy columns
+    if (this._addonOptions.initialGroupBy && !this._isInitialized) {
+      this.setDroppedGroups(this._addonOptions.initialGroupBy);
+    }
+    this._isInitialized = true;
+
     return {
       sortableLeftInstance: this._sortableLeftInstance,
       sortableRightInstance: this._sortableRightInstance,

packages/common/src/interfaces/draggableGroupingOption.interface.ts

@@ -20,6 +20,9 @@ export interface DraggableGroupingOption {
   /** Defaults to False, should we show the Sorting icons on each group by element? */
   hideGroupSortIcons?: boolean;
 
+  /** optionally add an initial set of columns to group by */
+  initialGroupBy?: Array<string | GroupingGetterFunction>;
+
   /** an extra CSS class to add to the sort ascending icon (default undefined), if sortAscIconCssClass is undefined then slick-groupby-sort-asc-icon class will be added */
   sortAscIconCssClass?: string;
 

test/cypress/e2e/example03.cy.ts

@@ -23,6 +23,21 @@ describe('Example 03 - Draggable Grouping', () => {
       .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
   });
 
+  it('should initially be grouped by "Duration" when loading the grid', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '0');
+  });
+
+  it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
+    cy.get('[data-test="clear-grouping-btn"]').click();
+    cy.get('.grid3').find('.slick-group-toggle-all').should('be.hidden');
+
+    cy.get('.grid3')
+      .find('.slick-draggable-dropzone-placeholder')
+      .should('be.visible')
+      .should('have.text', 'Drop a column header here to group by the column');
+  });
+
   it('should have a draggable dropzone on top of the grid in the top-header section', () => {
     cy.get('.grid3').find('.slick-topheader-panel .slick-dropzone:visible').contains('Drop a column header here to group by the column');
   });