fix(common): Tree Data should work without initial sort

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

@@ -244,10 +244,10 @@ export default class Example05 {
 
         // you can optionally sort by a different column and/or sort direction
         // this is the recommend approach, unless you are 100% that your original array is already sorted (in most cases it's not)
-        initialSort: {
-          columnId: 'title',
-          direction: 'ASC'
-        },
+        // initialSort: {
+        //   columnId: 'title',
+        //   direction: 'ASC'
+        // },
         // we can also add a custom Formatter just for the title text portion
         titleFormatter: (_row, _cell, value, _def, dataContext) => {
           let titleResult = '';

examples/vite-demo-vanilla-bundle/src/examples/example29.html

@@ -32,3 +32,10 @@ <h6 class="title is-6 italic content">
     </div>
   </div>
 </div>
+
+<div class="column is-half">
+  <hr class="my-4" />
+</div>
+
+<div class="grid29-2">
+</div>

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

@@ -8,9 +8,13 @@ import { BindingEventService } from '@slickgrid-universal/binding';
 export default class Example29 {
   private _bindingEventService: BindingEventService;
   gridOptions1!: GridOption;
+  gridOptions2!: GridOption;
   columnDefinitions1!: Column[];
+  columnDefinitions2!: Column[];
   dataset1!: any[];
+  dataset2!: any[];
   sgb1!: SlickVanillaGridBundle;
+  sgb2!: SlickVanillaGridBundle;
   dragHelper;
   dragRows: number[];
   dragMode = '';
@@ -22,11 +26,14 @@ export default class Example29 {
   attached() {
     this.defineGrids();
     const gridContainer1Elm = document.querySelector(`.grid29-1`) as HTMLDivElement;
+    const gridContainer2Elm = document.querySelector(`.grid29-2`) as HTMLDivElement;
 
     // mock some data (different in each dataset)
     this.dataset1 = this.mockData(1);
+    this.dataset2 = this.mockData(2);
 
     this.sgb1 = new Slicker.GridBundle(gridContainer1Elm, this.columnDefinitions1, { ...ExampleGridOptions, ...this.gridOptions1 }, this.dataset1);
+    this.sgb2 = new Slicker.GridBundle(gridContainer2Elm, this.columnDefinitions2, { ...ExampleGridOptions, ...this.gridOptions2 }, this.dataset2);
 
     // bind any of the grid events
     this._bindingEventService.bind(gridContainer1Elm, 'ondraginit', this.handleOnDragInit.bind(this) as EventListener);
@@ -37,6 +44,7 @@ export default class Example29 {
 
   dispose() {
     this.sgb1?.dispose();
+    this.sgb2?.dispose();
   }
 
   isBrowserDarkModeEnabled() {
@@ -73,6 +81,11 @@ export default class Example29 {
         // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
       },
     };
+
+    // copy the same Grid Options and Column Definitions to 2nd grid
+    // but also add Pagination in this grid
+    this.columnDefinitions2 = this.columnDefinitions1;
+    this.gridOptions2 = { ...this.gridOptions1 };
   }
 
   mockData(gridNo: 1 | 2) {

packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts

@@ -2188,11 +2188,11 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
         expect(treeConvertAndSortSpy).toHaveBeenCalled();
       });
 
-      it('should change flat dataset and expect "convertFlatParentChildToTreeDataset" being called (without sorting) and other methods as well', () => {
+      it('should change flat dataset and expect "convertFlatParentChildToTreeDatasetAndSort" being called even without an initial sort defined', () => {
         const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', parentId: 0 }];
         const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }];
         const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set');
-        const treeConvertSpy = jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDataset').mockReturnValue(mockHierarchical as any[]);
+        const treeConvertAndSortSpy = jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] });
         const refreshTreeSpy = jest.spyOn(filterServiceStub, 'refreshTreeDataFilters');
 
         component.gridOptions = {
@@ -2205,7 +2205,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
 
         expect(hierarchicalSpy).toHaveBeenCalledWith(mockHierarchical);
         expect(refreshTreeSpy).toHaveBeenCalled();
-        expect(treeConvertSpy).toHaveBeenCalled();
+        expect(treeConvertAndSortSpy).toHaveBeenCalled();
       });
 
       it('should change hierarchical dataset and expect processTreeDataInitialSort being called with other methods', (done) => {

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -1495,17 +1495,11 @@ export class SlickVanillaGridBundle<TData = any> {
       sortedDatasetResult = this.treeDataService.sortHierarchicalDataset(this.datasetHierarchical);
       flatDatasetOutput = sortedDatasetResult.flat;
     } else if (Array.isArray(flatDatasetInput) && flatDatasetInput.length > 0) {
-      if (this.gridOptions?.treeDataOptions?.initialSort) {
-        // else we need to first convert the flat dataset to a hierarchical dataset and then sort
-        sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columnDefinitions || [], this.gridOptions);
-        this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
-        flatDatasetOutput = sortedDatasetResult.flat;
-      } else {
-        // else we assume that the user provided an array that is already sorted (user's responsability)
-        // and so we can simply convert the array to a tree structure and we're done, no need to sort
-        this.sharedService.hierarchicalDataset = this.treeDataService.convertFlatParentChildToTreeDataset(flatDatasetInput, this.gridOptions);
-        flatDatasetOutput = flatDatasetInput || [];
-      }
+      // we need to first convert the flat dataset to a hierarchical dataset and then sort it
+      // we'll also add props, by mutation, required by the TreeDataService on the flat array like `__hasChildren`, `parentId` and anything else to work properly
+      sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columnDefinitions || [], this.gridOptions);
+      this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
+      flatDatasetOutput = sortedDatasetResult.flat;
     }
 
     // if we add/remove item(s) from the dataset, we need to also refresh our tree data filters