chore(deps): update Slickgrid-Universal to v10.7.0

Author: ghiscoding

package-lock.json

@@ -30,28 +30,28 @@
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@fnando/sparkline": "^0.3.10",
-    "@formkit/tempo": "^1.0.0",
-    "@slickgrid-universal/common": "^10.6.0",
-    "@slickgrid-universal/composite-editor-component": "^10.6.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^10.6.0",
-    "@slickgrid-universal/excel-export": "^10.6.0",
-    "@slickgrid-universal/graphql": "^10.6.0",
-    "@slickgrid-universal/odata": "^10.6.0",
-    "@slickgrid-universal/pdf-export": "^10.6.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^10.6.0",
-    "@slickgrid-universal/rxjs-observable": "^10.6.0",
-    "@slickgrid-universal/sql": "^10.6.0",
-    "@slickgrid-universal/text-export": "^10.6.0",
-    "@slickgrid-universal/vanilla-bundle": "^10.6.0",
-    "@slickgrid-universal/vanilla-force-bundle": "^10.6.0",
+    "@formkit/tempo": "^1.1.0",
+    "@slickgrid-universal/common": "^10.7.0",
+    "@slickgrid-universal/composite-editor-component": "^10.7.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^10.7.0",
+    "@slickgrid-universal/excel-export": "^10.7.0",
+    "@slickgrid-universal/graphql": "^10.7.0",
+    "@slickgrid-universal/odata": "^10.7.0",
+    "@slickgrid-universal/pdf-export": "^10.7.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^10.7.0",
+    "@slickgrid-universal/rxjs-observable": "^10.7.0",
+    "@slickgrid-universal/sql": "^10.7.0",
+    "@slickgrid-universal/text-export": "^10.7.0",
+    "@slickgrid-universal/vanilla-bundle": "^10.7.0",
+    "@slickgrid-universal/vanilla-force-bundle": "^10.7.0",
     "alien-signals": "^3.1.2",
     "bulma": "^1.0.4",
     "dompurify": "^3.4.2",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.6.2",
     "@types/webpack": "^5.28.5",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^14.0.0",
@@ -63,7 +63,7 @@
     "html-webpack-plugin": "5.6.7",
     "mini-css-extract-plugin": "^2.10.2",
     "sass": "^1.99.0",
-    "sass-loader": "^16.0.7",
+    "sass-loader": "^16.0.8",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",

package.json

@@ -10,13 +10,15 @@ import {
   type Column,
   type GridOption,
   type Grouping,
+  type OnFormattedDataCacheCompletedEventArgs,
   type SliderOption,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { PdfExportService } from '@slickgrid-universal/pdf-export';
 import { TextExportService } from '@slickgrid-universal/text-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options';
+import { showToast } from './utilities';
 import '../material-styles.scss';
 import './example02.scss';
 
@@ -65,6 +67,11 @@ export default class Example02 {
         console.log(`sort: ${window.performance.now() - this.sortStart} ms`); // use console for Cypress tests
       });
     });
+    this._bindingEventService.bind(
+      gridContainerElm,
+      'onformatteddatacachecompleted',
+      this.handleFormattedDataCacheCompleted.bind(this) as EventListener
+    );
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columns, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
 
     // you could group by duration on page load (must be AFTER the DataView is created, so after GridBundle)
@@ -216,18 +223,8 @@ export default class Example02 {
         groupTotalsExcelExportOptions: {
           style: {
             alignment: { horizontal: 'center' },
-            font: {
-              bold: true,
-              color: 'FF005289',
-              underline: 'single',
-              fontName: 'Consolas',
-              size: 10,
-            },
-            fill: {
-              type: 'pattern',
-              patternType: 'solid',
-              fgColor: 'FFE6F2F6',
-            },
+            font: { bold: true, color: 'FF005289', underline: 'single', fontName: 'Consolas', size: 10 },
+            fill: { type: 'pattern', patternType: 'solid', fgColor: 'FFE6F2F6' },
             border: {
               top: { color: 'FFa500ff', style: 'thick' },
               left: { color: 'FFa500ff', style: 'medium' },
@@ -280,9 +277,13 @@ export default class Example02 {
       enablePdfExport: true,
       enableFiltering: true,
       enableGrouping: true,
+      enableFormattedDataCache: false, // enable it when you have a large dataset (e.g. we'll enable it when loading over 10K)
       columnPicker: {
         onColumnsChanged: (e, args) => console.log(e, args),
       },
+      groupItemMetadataOption: {
+        toggleOnNodeTitle: true, // enable toggle of group by clicking on the toggle icon or its title (not just the toggle icon)
+      },
       enableExcelExport: true,
       excelExportOptions: {
         filename: 'my-export',
@@ -298,18 +299,9 @@ export default class Example02 {
         customExcelHeader: (workbook, sheet) => {
           const excelFormat = workbook.getStyleSheet().createFormat({
             // every color is prefixed with FF, then regular HTML color
-            font: {
-              size: 18,
-              fontName: 'Calibri',
-              bold: true,
-              color: 'FFFFFFFF',
-            },
+            font: { size: 18, fontName: 'Calibri', bold: true, color: 'FFFFFFFF' },
             alignment: { wrapText: true, horizontal: 'center' },
-            fill: {
-              type: 'pattern',
-              patternType: 'solid',
-              fgColor: 'FF203764',
-            },
+            fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF203764' },
           });
           sheet.setRowInstructions(0, { height: 50 }); // change height of row 0
 
@@ -370,6 +362,7 @@ export default class Example02 {
       };
     }
     if (this.sgb) {
+      this.sgb.slickGrid?.setOptions({ enableFormattedDataCache: rowCount > 10000 });
       this.sgb.dataset = tmpArray;
     }
     return tmpArray;
@@ -388,10 +381,7 @@ export default class Example02 {
   }
 
   exportToExcel() {
-    this.excelExportService.exportToExcel({
-      filename: 'export',
-      format: 'xlsx',
-    });
+    this.excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
   }
 
   exportToPdf() {
@@ -412,7 +402,7 @@ export default class Example02 {
     this.sgb?.slickGrid?.invalidate(); // invalidate all rows and re-render
   }
 
-  groupByDurationOrderByCount(aggregateCollapsed) {
+  groupByDurationOrderByCount(aggregateCollapsed: boolean) {
     this.sgb?.slickGrid?.setSortColumns([]);
     this.sgb?.dataView?.setGrouping({
       getter: 'duration',
@@ -484,4 +474,14 @@ export default class Example02 {
     ] as Grouping[]);
     this.sgb?.slickGrid?.invalidate(); // invalidate all rows and re-render
   }
+
+  handleFormattedDataCacheCompleted(e: CustomEvent<{ args: OnFormattedDataCacheCompletedEventArgs }>) {
+    const args = e.detail.args;
+    showToast(
+      `Formatted Data Cache completed: ${args.totalRows} rows, ${args.totalFormattedCells} cells in ${args.durationMs} ms`,
+      'info',
+      5000
+    );
+    console.log('onFormattedDataCacheCompleted', e, args);
+  }
 }

src/examples/example02.ts

@@ -13,6 +13,7 @@ import {
   type GridOption,
   type Grouping,
   type GroupingGetterFunction,
+  type OnFormattedDataCacheCompletedEventArgs,
   type SlickDraggableGrouping,
   type VanillaCalendarOption,
 } from '@slickgrid-universal/common';
@@ -65,6 +66,11 @@ export default class Example03 {
     this._bindingEventService.bind(gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this));
     this._bindingEventService.bind(gridContainerElm, 'onvalidationerror', this.handleValidationError.bind(this));
     this._bindingEventService.bind(gridContainerElm, 'onitemsdeleted', this.handleItemsDeleted.bind(this));
+    this._bindingEventService.bind(
+      gridContainerElm,
+      'onformatteddatacachecompleted',
+      this.handleFormattedDataCacheCompleted.bind(this) as EventListener
+    );
     this._bindingEventService.bind(
       gridContainerElm,
       ['onbeforeexporttoexcel', 'onbeforeexporttopdf'],
@@ -342,6 +348,7 @@ export default class Example03 {
       dataView: {
         useCSPSafeFilter: true,
       },
+      enableFormattedDataCache: false, // enable it when you have a large dataset (e.g. we'll enable it when loading over 10K)
       headerMenu: {
         hideFreezeColumnsCommand: false,
       },
@@ -430,12 +437,12 @@ export default class Example03 {
     };
   }
 
-  loadData(count: number) {
+  loadData(rowCount: number) {
     // mock data
     const tmpArray: any[] = [];
     const currentYear = new Date().getFullYear();
 
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < rowCount; i++) {
       const randomFinishYear = new Date().getFullYear() - 3 + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago
       const randomMonth = Math.floor(Math.random() * 10);
       const randomDay = Math.floor(Math.random() * 29);
@@ -458,6 +465,7 @@ export default class Example03 {
       // }
     }
     if (this.sgb) {
+      this.sgb.slickGrid?.setOptions({ enableFormattedDataCache: rowCount > 10000 });
       this.sgb.dataset = tmpArray;
     }
     // const item = this.sgb.dataView?.getItemById<ReportItem & { myAction: string; }>(0);
@@ -590,6 +598,16 @@ export default class Example03 {
     console.log('item deleted with id:', itemId);
   }
 
+  handleFormattedDataCacheCompleted(e: CustomEvent<{ args: OnFormattedDataCacheCompletedEventArgs }>) {
+    const args = e.detail.args;
+    showToast(
+      `Formatted Data Cache completed: ${args.totalRows} rows, ${args.totalFormattedCells} cells in ${args.durationMs} ms`,
+      'info',
+      5000
+    );
+    console.log('onFormattedDataCacheCompleted', e, args);
+  }
+
   executeCommand(_e, args) {
     // const columnDef = args.column;
     const command = args.command;

src/examples/example03.ts

@@ -273,6 +273,7 @@ export default class Example05 {
       enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
       treeDataOptions: {
         columnId: 'title',
+        toggleOnNodeTitle: true, // enable toggle of tree by clicking on the toggle icon or its title (not just the toggle icon)
         parentPropName: 'parentId',
         // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
         levelPropName: 'treeLevel',

src/examples/example05.ts

@@ -262,16 +262,17 @@ export default class Example06 {
     value = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     const spacer = `<span class="display-inline-block width-${15 * treeLevel}px"></span>`;
     const indentSpacer = addWhiteSpaces(5 * treeLevel);
+    const spanValue = `<span class="slick-tree-title">${value}</span>`;
 
     if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) {
       const folderPrefix = `<i class="mdi font-22px ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></i>`;
       if (dataContext.__collapsed) {
-        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle collapsed" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${value}`;
+        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle collapsed" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${spanValue}`;
       } else {
-        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle expanded" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${value}`;
+        return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle expanded" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${spanValue}`;
       }
     } else {
-      return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle" level="${treeLevel}"></span>${prefix} ${value}`;
+      return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle" level="${treeLevel}"></span>${prefix} ${spanValue}`;
     }
   };
 

src/examples/example06.ts

@@ -402,8 +402,14 @@ export default class Example07 {
         disableRowSelection: true,
         cancelEditOnDrag: true,
         hideRowMoveShadow: false,
-        onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
-        onMoveRows: this.onMoveRows.bind(this),
+        // you can provide your own `onBeforeMoveRows` and/or `onMoveRows` implementation
+        // or use the default implementation, however the default won't work with Tree Data
+        // onBeforeMoveRows: () => {},
+        // onMoveRows: () => {},
+        onAfterMoveRows: (_e, args) => {
+          // update dataset for the ms-select list to be updated
+          this.dataset = args.updatedItems;
+        },
 
         // you can also override the usability of the rows, for example make every 2nd row the only moveable rows,
         // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
@@ -559,71 +565,6 @@ export default class Example07 {
     return collection.sort((item1, item2) => item1.value - item2.value);
   }
 
-  onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
-    for (const rowIdx of data.rows) {
-      // no point in moving before or after itself
-      if (
-        rowIdx === data.insertBefore ||
-        (rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== this.sgb.dataView?.getItemCount())
-      ) {
-        e.stopPropagation();
-        return false;
-      }
-    }
-    return true;
-  }
-
-  onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) {
-    // rows and insertBefore references,
-    // note that these references are assuming that the dataset isn't filtered at all
-    // which is not always the case so we will recalcualte them and we won't use these reference afterward
-    const rows = args.rows as number[];
-    const insertBefore = args.insertBefore;
-    const extractedRows: any[] = [];
-
-    // when moving rows, we need to cancel any sorting that might happen
-    // we can do this by providing an undefined sort comparer
-    // which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
-    this.sgb.dataView?.sort(undefined as any, true);
-
-    // the dataset might be filtered/sorted,
-    // so we need to get the same dataset as the one that the SlickGrid DataView uses
-    const tmpDataset = this.sgb.dataView?.getItems() as any[];
-    const filteredItems = this.sgb.dataView?.getFilteredItems() as any[];
-
-    const itemOnRight = this.sgb.dataView?.getItem(insertBefore);
-    const insertBeforeFilteredIdx = (
-      itemOnRight ? this.sgb.dataView?.getIdxById(itemOnRight.id) : this.sgb.dataView?.getItemCount()
-    ) as number;
-
-    const filteredRowItems: any[] = [];
-    rows.forEach((row) => filteredRowItems.push(filteredItems[row] as any));
-    const filteredRows = filteredRowItems.map((item) => this.sgb.dataView?.getIdxById(item.id)) as number[];
-
-    const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
-    const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
-
-    // convert into a final new dataset that has the new order
-    // we need to resort with
-    rows.sort((a: number, b: number) => a - b);
-    for (const filteredRow of filteredRows) {
-      extractedRows.push(tmpDataset[filteredRow as number]);
-    }
-    filteredRows.reverse();
-    for (const row of filteredRows) {
-      if (row < insertBeforeFilteredIdx) {
-        left.splice(row, 1);
-      } else {
-        right.splice(row - insertBeforeFilteredIdx, 1);
-      }
-    }
-
-    // final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
-    const finalDataset = left.concat(extractedRows.concat(right));
-    this.dataset = finalDataset;
-    this.sgb.dataset = this.dataset; // update dataset and re-render the grid
-  }
-
   handleOnCellChange(event) {
     console.log('onCellChanged', event.detail, event.detail.args.item.start);
   }