feat: upgrade to Slickgrid-Universal v10.2.0

Author: ghiscoding

package-lock.json

@@ -31,26 +31,26 @@
     "@faker-js/faker": "^10.3.0",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^1.0.0",
-    "@slickgrid-universal/common": "^10.1.1",
-    "@slickgrid-universal/composite-editor-component": "^10.1.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "^10.1.1",
-    "@slickgrid-universal/excel-export": "^10.1.1",
-    "@slickgrid-universal/graphql": "^10.1.1",
-    "@slickgrid-universal/odata": "^10.1.1",
-    "@slickgrid-universal/pdf-export": "^10.1.1",
-    "@slickgrid-universal/row-detail-view-plugin": "^10.1.1",
-    "@slickgrid-universal/rxjs-observable": "^10.1.1",
-    "@slickgrid-universal/text-export": "^10.1.1",
-    "@slickgrid-universal/vanilla-bundle": "^10.1.1",
-    "@slickgrid-universal/vanilla-force-bundle": "^10.1.1",
+    "@slickgrid-universal/common": "^10.2.0",
+    "@slickgrid-universal/composite-editor-component": "^10.2.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^10.2.0",
+    "@slickgrid-universal/excel-export": "^10.2.0",
+    "@slickgrid-universal/graphql": "^10.2.0",
+    "@slickgrid-universal/odata": "^10.2.0",
+    "@slickgrid-universal/pdf-export": "^10.2.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^10.2.0",
+    "@slickgrid-universal/rxjs-observable": "^10.2.0",
+    "@slickgrid-universal/text-export": "^10.2.0",
+    "@slickgrid-universal/vanilla-bundle": "^10.2.0",
+    "@slickgrid-universal/vanilla-force-bundle": "^10.2.0",
     "alien-signals": "^3.1.2",
     "bulma": "^1.0.4",
-    "dompurify": "^3.3.2",
+    "dompurify": "^3.3.3",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/node": "^25.3.5",
+    "@types/node": "^25.5.0",
     "@types/webpack": "^5.28.5",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^14.0.0",
@@ -60,14 +60,14 @@
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "5.6.6",
-    "mini-css-extract-plugin": "^2.10.0",
-    "sass": "^1.97.3",
+    "mini-css-extract-plugin": "^2.10.1",
+    "sass": "^1.98.0",
     "sass-loader": "^16.0.7",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.105.4",
-    "webpack-cli": "^6.0.1",
+    "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.2.3"
   },
   "browserslist": [

package.json

@@ -249,6 +249,7 @@ export default class Example05 {
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
+      enableCellNavigation: true,
       enableExcelExport: true,
       textExportOptions: { exportWithFormatter: true },
       excelExportOptions: { exportWithFormatter: true },

src/examples/example05.ts

@@ -143,6 +143,7 @@ export default class Example06 {
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
+      enableCellNavigation: true,
       enableExcelExport: true,
       excelExportOptions: {
         exportWithFormatter: true,

src/examples/example06.ts

@@ -186,6 +186,9 @@ export default class Example32 {
           },
         },
       },
+      gridMenu: {
+        hideColumnPickerSection: true,
+      },
       rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
     };
   }

src/examples/example32.ts

@@ -43,6 +43,7 @@ <h5 class="title is-5">
         <span id="selectionRange1"></span>
       </span>
     </h5>
+    <button class="button is-small mb-3" onclick.trigger="gridFocus()">Grid Focus</button>
   </div>
 </div>
 <div class="grid37-1"></div>

src/examples/example37.html

@@ -18,6 +18,10 @@ export default class Example37 {
   sgb1!: SlickVanillaGridBundle;
   sgb2!: SlickVanillaGridBundle;
 
+  gridFocus() {
+    this.sgb1.slickGrid?.focus();
+  }
+
   attached() {
     this._eventHandler = new SlickEventHandler();
 

src/examples/example37.ts

@@ -17,6 +17,8 @@ import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanil
 import { ExampleGridOptions } from './example-grid-options';
 import './example40.scss';
 
+const NB_ITEMS = 4000;
+
 interface ReportItem {
   id: number;
   title: string;
@@ -42,7 +44,7 @@ export default class Example40 {
 
   attached() {
     this.initializeGrid();
-    this.dataset = this.loadData(2000);
+    this.dataset = this.loadData(NB_ITEMS);
     const gridContainerElm = document.querySelector(`.grid40`) as HTMLDivElement;
 
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columns, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);