chore: upgrade to React-Slickgrid v11.0 Beta 0

react-fluent-ui/package.json

@@ -20,22 +20,22 @@
   "dependencies": {
     "@fluentui/react-components": "^9.74.9",
     "@fluentui/react-icons": "^2.0.343",
-    "@slickgrid-universal/common": "^10.11.3",
-    "@slickgrid-universal/composite-editor-component": "^10.11.3",
-    "@slickgrid-universal/custom-tooltip-plugin": "^10.11.3",
+    "@slickgrid-universal/common": "^11.0.0-beta.0",
+    "@slickgrid-universal/composite-editor-component": "^11.0.0-beta.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^11.0.0-beta.0",
     "@slickgrid-universal/event-pub-sub": "^10.10.0",
-    "@slickgrid-universal/excel-export": "^10.11.3",
-    "@slickgrid-universal/pdf-export": "^10.11.3",
-    "@slickgrid-universal/react-row-detail-plugin": "^10.11.3",
-    "@slickgrid-universal/row-detail-view-plugin": "^10.11.3",
-    "@slickgrid-universal/rxjs-observable": "^10.11.3",
-    "@slickgrid-universal/sql": "^10.11.3",
-    "@slickgrid-universal/text-export": "^10.11.3",
-    "dompurify": "^3.4.16",
+    "@slickgrid-universal/excel-export": "^11.0.0-beta.0",
+    "@slickgrid-universal/pdf-export": "^11.0.0-beta.0",
+    "@slickgrid-universal/react-row-detail-plugin": "^11.0.0-beta.0",
+    "@slickgrid-universal/row-detail-plugin": "^11.0.0-beta.0",
+    "@slickgrid-universal/rxjs-observable": "^11.0.0-beta.0",
+    "@slickgrid-universal/sql": "^11.0.0-beta.0",
+    "@slickgrid-universal/text-export": "^11.0.0-beta.0",
+    "dompurify": "^3.4.17",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router": "^8.4.0",
-    "slickgrid-react": "^10.11.3"
+    "slickgrid-react": "^11.0.0-beta.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.6.0",
@@ -51,7 +51,7 @@
     "rxjs": "^7.8.2",
     "sass": "^1.105.1",
     "typescript": "^6.0.3",
-    "vite": "^8.3.3",
+    "vite": "^8.3.5",
     "vite-tsconfig-paths": "^6.1.1"
   },
   "overrides": {

react-fluent-ui/src/examples/slickgrid/Example01.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@fluentui/react-components';
 import { useState } from 'react';
 import { Formatters, SlickgridReact, type Column, type GridOption, type SlickgridReactInstance } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 
 const NB_ITEMS = 995;
 
@@ -31,7 +30,7 @@ const Example1: React.FC = () => {
     gridWidth: 800,
     enableAutoResize: false,
     enableSorting: true,
-    ...baseFluentGridOption,
+    iconSet: 'fluent',
   };
 
   // copy the same Grid Options and Column Definitions to 2nd grid
@@ -47,7 +46,7 @@ const Example1: React.FC = () => {
       pageSizes: [5, 10, 20, 25, 50],
       pageSize: 5,
     },
-    ...baseFluentGridOption,
+    iconSet: 'fluent',
   };
 
   function isBrowserDarkModeEnabled() {

react-fluent-ui/src/examples/slickgrid/Example02.tsx

@@ -9,7 +9,6 @@ import {
   type OnEventArgs,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 
 const Example02: React.FC = () => {
   const [columns, setColumns] = useState<Column[]>([]);
@@ -127,7 +126,7 @@ const Example02: React.FC = () => {
           dataContextIds: [1, 2, 6, 7], // (recommended) select by your data object IDs
         },
       },
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     setColumns(columns);

react-fluent-ui/src/examples/slickgrid/Example03.tsx

@@ -16,7 +16,6 @@ import {
   type Grouping,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 
 const Example03: React.FC = () => {
   const [columns, setColumns] = useState<Column[]>([]);
@@ -256,7 +255,7 @@ const Example03: React.FC = () => {
       // enableTextExport: true,
       // enablePdfExport: true,
       // enableExcelExport: true,
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     setColumns(columns);

react-fluent-ui/src/examples/slickgrid/Example04.tsx

@@ -3,7 +3,6 @@ import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { ReactRowDetailView } from '@slickgrid-universal/react-row-detail-plugin';
 import React, { useEffect, useRef, useState } from 'react';
 import { Editors, Filters, Formatters, SlickgridReact, type Column, type GridOption, type SlickgridReactInstance } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import { ExampleDetailPreload } from './Example-detail-preload.js';
 import Example04DetailView from './Example04-detail-view.js';
 
@@ -161,15 +160,13 @@ const Example04: React.FC = () => {
       },
       enableFiltering: true,
       enableRowDetailView: true,
-      // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line
       darkMode,
       datasetIdPropertyName: 'rowId',
       preRegisterExternalExtensions: (pubSubService) => {
         const rowDetail = new ReactRowDetailView(pubSubService as EventPubSubService);
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item) => simulateServerAsyncCall(item),
         loadOnce: true,
         singleRowExpand: false,
@@ -188,7 +185,7 @@ const Example04: React.FC = () => {
       selectionOptions: {
         selectActiveRow: true,
       },
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
   }
 

react-fluent-ui/src/examples/slickgrid/Example05.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@fluentui/react-components';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Editors,
@@ -11,20 +12,16 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import './example05.scss'; // provide custom CSS/SASS styling
-
-import { Button } from '@fluentui/react-components';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import { showToast } from './utilities.js';
 
 const Example05: React.FC = () => {
   const [columns, setColumns] = useState<Column[]>([]);
   const [dataset] = useState<any[]>(getData());
   const [gridOptions, setGridOptions] = useState<GridOption | undefined>(undefined);
   const [darkModeGrid, setDarkModeGrid] = useState(false);
-  const [frozenColumnCount, setFrozenColumnCount] = useState(2);
-  const [frozenRowCount, setFrozenRowCount] = useState(3);
-  const [isFrozenBottom, setIsFrozenBottom] = useState(false);
+  const [pinnedColumnCount, setPinnedColumnCount] = useState(2);
+  const [pinnedRowCount, setPinnedRowCount] = useState(3);
+  const [isPinnedBottom, setIsPinnedBottom] = useState(false);
 
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
   const slickEventHandler = new SlickEventHandler();
@@ -41,8 +38,7 @@ const Example05: React.FC = () => {
   function reactGridReady(reactGrid: SlickgridReactInstance) {
     reactGridRef.current = reactGrid;
 
-    // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
-    // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
+    // With a pinned grid, the entire row is highlighted through its shared row regions.
     // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
     slickEventHandler.subscribe(reactGridRef.current?.slickGrid.onMouseEnter, (event) => highlightRow(event, true));
     slickEventHandler.subscribe(reactGridRef.current?.slickGrid.onMouseLeave, (event) => highlightRow(event, false));
@@ -253,14 +249,10 @@ const Example05: React.FC = () => {
       editable: true,
       autoEdit: true,
       enableExcelCopyBuffer: true,
-      frozenColumn: 2,
-      frozenRow: 3,
-      // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
+      pinning: { columns: { left: 2 }, rows: { top: [0, 1, 2] } },
 
-      // show both Frozen Columns in HeaderMenu & GridMenu, these are opt-in commands so they're disabled by default
-      gridMenu: { hideClearFrozenColumnsCommand: false },
-      headerMenu: { hideFreezeColumnsCommand: false },
-      ...baseFluentGridOption,
+      // show both single-column and bulk pinning commands in HeaderMenu & GridMenu; these are opt-in commands
+      iconSet: 'fluent',
     };
 
     setColumns(columns);
@@ -290,26 +282,26 @@ const Example05: React.FC = () => {
   }
 
   /** change dynamically, through slickgrid "setOptions()" the number of pinned columns */
-  function changeFrozenColumnCount(e: React.FormEvent<HTMLInputElement>) {
-    const frozenColumn = +((e.target as HTMLInputElement)?.value ?? 0);
-    setFrozenColumnCount(frozenColumn);
+  function changePinnedColumnCount(e: React.FormEvent<HTMLInputElement>) {
+    const pinnedColumn = +((e.target as HTMLInputElement)?.value ?? 0);
+    setPinnedColumnCount(pinnedColumn);
   }
 
-  function updateFrozenColumnCount() {
+  function updatePinnedColumnCount() {
     reactGridRef.current?.slickGrid?.setOptions({
-      frozenColumn: frozenColumnCount,
+      pinning: { columns: { left: pinnedColumnCount } },
     });
   }
 
   /** change dynamically, through slickgrid "setOptions()" the number of pinned rows */
-  function changeFrozenRowCount(e: React.FormEvent<HTMLInputElement>) {
-    const frozenRow = +((e.target as HTMLInputElement)?.value ?? 0);
-    setFrozenRowCount(frozenRow);
+  function changePinnedRowCount(e: React.FormEvent<HTMLInputElement>) {
+    const pinnedRow = +((e.target as HTMLInputElement)?.value ?? 0);
+    setPinnedRowCount(pinnedRow);
   }
 
-  function updateFrozenRowCount() {
+  function updatePinnedRowCount() {
     reactGridRef.current?.slickGrid?.setOptions({
-      frozenRow: frozenRowCount,
+      pinning: { rows: { top: Array.from({ length: Math.max(0, pinnedRowCount) }, (_value, index) => index) } },
     });
   }
 
@@ -330,8 +322,8 @@ const Example05: React.FC = () => {
     showToast(args.validationResults.msg, 'danger');
   }
 
-  function setFrozenColumns(frozenCols: number) {
-    reactGridRef.current?.slickGrid.setOptions({ frozenColumn: frozenCols });
+  function setPinnedColumns(pinnedCols: number) {
+    reactGridRef.current?.slickGrid.setOptions({ pinning: { columns: { left: pinnedCols } } });
     const updatedGridOptions = reactGridRef.current?.slickGrid.getOptions();
     setGridOptions(updatedGridOptions);
   }
@@ -348,44 +340,46 @@ const Example05: React.FC = () => {
   }
 
   /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
-  function toggleFrozenBottomRows() {
+  function togglePinnedBottomRows() {
     reactGridRef.current?.slickGrid.setOptions({
-      frozenBottom: !isFrozenBottom,
+      pinning: { rows: { top: isPinnedBottom ? [0, 1, 2] : [], bottom: isPinnedBottom ? [] : [0, 1, 2] } },
     });
 
-    const newIsFrozenBottom = !isFrozenBottom;
-    setIsFrozenBottom(newIsFrozenBottom);
+    const newIsPinnedBottom = !isPinnedBottom;
+    setIsPinnedBottom(newIsPinnedBottom);
   }
 
   return !gridOptions ? (
     ''
   ) : (
     <div id="demo-container" className="container-fluid">
-      <h2>Example 5: Pinned (frozen) Columns/Rows</h2>
+      <h2>Example 5: Pinned Columns/Rows</h2>
 
       <div className="row">
         <div className="col-sm-12">
           <span>
             <label htmlFor="">Pinned Rows: </label>
             <input
               type="number"
+              min="-1"
               style={{ height: '24px', width: '55px' }}
-              defaultValue={frozenRowCount}
-              onInput={($event) => changeFrozenRowCount($event)}
+              defaultValue={pinnedRowCount}
+              onInput={($event) => changePinnedRowCount($event)}
             />
-            <Button className="mx-1" onClick={() => updateFrozenRowCount()}>
+            <Button className="mx-1" onClick={() => updatePinnedRowCount()}>
               Set
             </Button>
           </span>
           <span style={{ marginLeft: '10px' }}>
             <label htmlFor="">Pinned Columns: </label>
             <input
               type="number"
+              min="-1"
               style={{ height: '24px', width: '55px' }}
-              defaultValue={frozenColumnCount}
-              onInput={($event) => changeFrozenColumnCount($event)}
+              defaultValue={pinnedColumnCount}
+              onInput={($event) => changePinnedColumnCount($event)}
             />
-            <Button className="mx-1" onClick={() => updateFrozenColumnCount()}>
+            <Button className="mx-1" onClick={() => updatePinnedColumnCount()}>
               Set
             </Button>
           </span>
@@ -398,17 +392,17 @@ const Example05: React.FC = () => {
             <i className="fi fi-dark-theme"></i>
             <span className="ms-1">Toggle Dark Mode</span>
           </Button>
-          <Button className="btn-icon mx-1" onClick={() => setFrozenColumns(-1)} data-test="remove-frozen-column-button">
-            <i className="fi fi-dismiss"></i> Remove Frozen Columns
+          <Button className="btn-icon mx-1" onClick={() => setPinnedColumns(-1)} data-test="remove-pinned-column-button">
+            <i className="fi fi-dismiss"></i> Remove Pinned Columns
           </Button>
-          <Button className="btn-icon" onClick={() => setFrozenColumns(2)} data-test="set-3frozen-columns">
-            <i className="fi fi-pin"></i> Set 3 Frozen Columns
+          <Button className="btn-icon" onClick={() => setPinnedColumns(2)} data-test="set-3pinned-columns">
+            <i className="fi fi-pin"></i> Set 3 Pinned Columns
           </Button>
           <span style={{ marginLeft: '15px' }}>
-            <Button className="btn-icon" onClick={() => toggleFrozenBottomRows()}>
+            <Button className="btn-icon" onClick={() => togglePinnedBottomRows()}>
               <i className="fi fi-split-horizontal"></i> Toggle Pinned Rows
             </Button>
-            <span style={{ fontWeight: 'bold' }}>: {isFrozenBottom ? 'Bottom' : 'Top'}</span>
+            <span style={{ fontWeight: 'bold' }}>: {isPinnedBottom ? 'Bottom' : 'Top'}</span>
           </span>
         </div>
       </div>

react-fluent-ui/src/examples/slickgrid/Example06.tsx

@@ -13,7 +13,6 @@ import {
 import './example06.scss'; // provide custom CSS/SASS styling
 
 import { Button } from '@fluentui/react-components';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 
 const NB_ITEMS = 500;
 
@@ -139,7 +138,7 @@ const Example06: React.FC = () => {
       enableExcelExport: true,
       excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
       externalResources: [new ExcelExportService()],
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     setColumns(columns);

react-fluent-ui/src/examples/slickgrid/Example07.tsx

@@ -15,7 +15,6 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import './example07.scss';
 
 const NB_ROWS = 200;
@@ -284,7 +283,7 @@ const Example07: React.FC = () => {
       enableCellNavigation: true,
       enableFiltering: true,
       cellHighlightCssClass: 'changed',
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     columnsRef.current = columns;

react-fluent-ui/src/examples/slickgrid/Example08.tsx

@@ -18,7 +18,6 @@ import {
   type SlickgridReactInstance,
   type SlickGroupTotals,
 } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import './example08.scss';
 
 interface GroceryItem {
@@ -356,7 +355,7 @@ const Example08: React.FC = () => {
           sheet.data.push([{ value: customTitle, metadata: { style: excelFormat.id } }]);
         },
       },
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     setColumns(columns);

react-fluent-ui/src/examples/slickgrid/Example09.tsx

@@ -11,7 +11,6 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import { showToast } from './utilities.js';
 import './example09.scss'; // provide custom CSS/SASS styling
 
@@ -174,7 +173,7 @@ const Example09: React.FC = () => {
           }, serverWaitDelayRef.current);
         },
       },
-      ...baseFluentGridOption,
+      iconSet: 'fluent',
     };
 
     setColumns(columns);