chore(deps): update Slickgrid-React to v5.12.1

ghiscoding · Jan 25, 2025 · 229476a · 229476a
1 parent 4eccc88
commit 229476a
Show file tree

Hide file tree

Showing 5 changed files with 283 additions and 121 deletions.
diff --git a/bootstrap5-i18n-demo/package.json b/bootstrap5-i18n-demo/package.json
@@ -34,20 +34,20 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/composite-editor-component": "^5.12.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.12.0",
-    "@slickgrid-universal/excel-export": "^5.12.0",
-    "@slickgrid-universal/graphql": "^5.12.0",
-    "@slickgrid-universal/odata": "^5.12.0",
-    "@slickgrid-universal/rxjs-observable": "^5.12.0",
-    "@slickgrid-universal/text-export": "^5.12.0",
+    "@slickgrid-universal/composite-editor-component": "^5.12.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.12.1",
+    "@slickgrid-universal/excel-export": "^5.12.1",
+    "@slickgrid-universal/graphql": "^5.12.1",
+    "@slickgrid-universal/odata": "^5.12.1",
+    "@slickgrid-universal/rxjs-observable": "^5.12.1",
+    "@slickgrid-universal/text-export": "^5.12.1",
     "dompurify": "^3.2.3",
     "i18next": "^23.16.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.0",
     "regenerator-runtime": "^0.14.1",
-    "slickgrid-react": "^5.12.0"
+    "slickgrid-react": "^5.12.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.4.0",
@@ -60,7 +60,7 @@
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/moment": "^2.13.0",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.10.10",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/sortablejs": "^1.15.8",
@@ -70,14 +70,14 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "custom-event-polyfill": "^1.0.7",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^17.15.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
-    "i18next-http-backend": "^2.7.1",
+    "i18next-http-backend": "^2.7.3",
     "isomorphic-fetch": "^3.0.0",
     "react-router-dom": "^6.28.2",
     "rxjs": "^7.8.1",

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example28.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example28.tsx
@@ -143,6 +143,7 @@ export default class Example28 extends React.Component<Props, State> {
 
     const gridOptions: GridOption = {
       autoResize: {
+        autoHeight: false,
         container: '#demo-container',
         rightPadding: 10
       },
@@ -323,7 +324,7 @@ export default class Example28 extends React.Component<Props, State> {
       }));
 
       // scroll into the position, after insertion cycle, where the item was added
-      setTimeout(() => {
+      window.setTimeout(() => {
         const rowIndex = this.reactGrid.dataView.getRowById(popFolderItem.id) as number;
         this.reactGrid.slickGrid.scrollRowIntoView(rowIndex + 3);
       }, 10);
@@ -435,8 +436,8 @@ export default class Example28 extends React.Component<Props, State> {
         <div className="row">
           <div className="col-md-7">
             <button onClick={() => this.addNewFile()} data-test="add-item-btn" className="btn btn-xs btn-icon btn-primary mx-1">
-              <span className="mdi mdi-shape-square-plus me-1"></span>
-              <span>Add New Pop Song</span>
+              <span className="mdi mdi-shape-square-plus me-1 text-white"></span>
+              <span className="text-white">Add New Pop Song</span>
             </button>
             <button onClick={() => this.deleteFile()} data-test="remove-item-btn" className="btn btn-outline-secondary btn-xs btn-icon" disabled={this.state.isRemoveLastInsertedPopSongDisabled}>
               <span className="mdi mdi-minus me-1"></span>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example43.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example43.tsx
@@ -16,6 +16,7 @@ export default function Example43() {
   const [isEditable, setIsEditable] = useState<boolean>(false);
   const [showSubTitle, setShowSubTitle] = useState(false);
   const [dataset] = useState(loadData());
+  const excelExportService = new ExcelExportService();
   const metadata: Record<number, ItemMetadata> = {
     // 10001: Davolio
     0: {
@@ -141,7 +142,7 @@ export default function Example43() {
     enableColumnReorder: true,
     enableCellRowSpan: true,
     enableExcelExport: true,
-    externalResources: [new ExcelExportService()],
+    externalResources: [excelExportService],
     enableExcelCopyBuffer: true,
     autoEdit: true,
     editable: false,
@@ -159,6 +160,10 @@ export default function Example43() {
     rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
   };
 
+  function exportToExcel() {
+    excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
+  }
+
   function navigateDown() {
     reactGrid?.slickGrid?.navigateDown();
   }
@@ -479,6 +484,9 @@ export default function Example43() {
         <span className="mdi mdi-pencil-outline"></span>
         <span>Toggle Editing: <span id="isEditable" className="text-italic">{isEditable + ''}</span></span>
       </button>
+      <button className="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" onClick={() => exportToExcel()}>
+        <i className="mdi mdi-file-excel-outline text-success"></i> Export to Excel
+      </button>
 
       <SlickgridReact gridId="grid43"
         columnDefinitions={columnDefinitions}

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example44.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example44.tsx
@@ -1,3 +1,4 @@
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import {
   type Column,
   type Formatter,
@@ -62,55 +63,205 @@ export default function Example44() {
     loadData(500);
   }, []);
 
-  const rowCellValueFormatter: Formatter = (row, cell, value) => {
-    return `<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
-  };
+  const rowCellValueFormatter: Formatter = (row, cell, value) =>
+    `<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
+  const rowCellValueExportFormatter: Formatter = (_row, _cell, value) => value.toFixed(2);
 
   // the columns field property is type-safe, try to add a different string not representing one of DataItems properties
   const columnDefinitions: Column[] = [
     { id: 'title', name: 'Title', field: 'title', minWidth: 80 },
-    { id: 'revenueGrowth', name: 'Revenue Growth', field: 'revenueGrowth', formatter: rowCellValueFormatter, minWidth: 120 },
+    {
+      id: 'revenueGrowth',
+      name: 'Revenue Growth',
+      field: 'revenueGrowth',
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+      minWidth: 120,
+    },
     {
       id: 'pricingPolicy',
       name: 'Pricing Policy',
       field: 'pricingPolicy',
       minWidth: 110,
       sortable: true,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'policyIndex',
+      name: 'Policy Index',
+      field: 'policyIndex',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'expenseControl',
+      name: 'Expense Control',
+      field: 'expenseControl',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'excessCash',
+      name: 'Excess Cash',
+      field: 'excessCash',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
       formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'netTradeCycle',
+      name: 'Net Trade Cycle',
+      field: 'netTradeCycle',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'costCapital',
+      name: 'Cost of Capital',
+      field: 'costCapital',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'revenueGrowth2',
+      name: 'Revenue Growth',
+      field: 'revenueGrowth2',
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+      minWidth: 120,
     },
-    { id: 'policyIndex', name: 'Policy Index', field: 'policyIndex', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'expenseControl', name: 'Expense Control', field: 'expenseControl', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'excessCash', name: 'Excess Cash', field: 'excessCash', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'netTradeCycle', name: 'Net Trade Cycle', field: 'netTradeCycle', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'costCapital', name: 'Cost of Capital', field: 'costCapital', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'revenueGrowth2', name: 'Revenue Growth', field: 'revenueGrowth2', formatter: rowCellValueFormatter, minWidth: 120 },
     {
       id: 'pricingPolicy2',
       name: 'Pricing Policy',
       field: 'pricingPolicy2',
       minWidth: 110,
       sortable: true,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'policyIndex2',
+      name: 'Policy Index',
+      field: 'policyIndex2',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'expenseControl2',
+      name: 'Expense Control',
+      field: 'expenseControl2',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
       formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'excessCash2',
+      name: 'Excess Cash',
+      field: 'excessCash2',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'netTradeCycle2',
+      name: 'Net Trade Cycle',
+      field: 'netTradeCycle2',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'costCapital2',
+      name: 'Cost of Capital',
+      field: 'costCapital2',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'revenueGrowth3',
+      name: 'Revenue Growth',
+      field: 'revenueGrowth3',
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+      minWidth: 120,
     },
-    { id: 'policyIndex2', name: 'Policy Index', field: 'policyIndex2', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'expenseControl2', name: 'Expense Control', field: 'expenseControl2', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'excessCash2', name: 'Excess Cash', field: 'excessCash2', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'netTradeCycle2', name: 'Net Trade Cycle', field: 'netTradeCycle2', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'costCapital2', name: 'Cost of Capital', field: 'costCapital2', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'revenueGrowth3', name: 'Revenue Growth', field: 'revenueGrowth3', formatter: rowCellValueFormatter, minWidth: 120 },
     {
       id: 'pricingPolicy3',
       name: 'Pricing Policy',
       field: 'pricingPolicy3',
       minWidth: 110,
       sortable: true,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'policyIndex3',
+      name: 'Policy Index',
+      field: 'policyIndex3',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'expenseControl3',
+      name: 'Expense Control',
+      field: 'expenseControl3',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'excessCash3',
+      name: 'Excess Cash',
+      field: 'excessCash3',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'netTradeCycle3',
+      name: 'Net Trade Cycle',
+      field: 'netTradeCycle3',
+      minWidth: 110,
+      exportCustomFormatter: rowCellValueExportFormatter,
+      formatter: rowCellValueFormatter,
+      type: 'number',
+    },
+    {
+      id: 'costCapital3',
+      name: 'Cost of Capital',
+      field: 'costCapital3',
+      minWidth: 100,
+      exportCustomFormatter: rowCellValueExportFormatter,
       formatter: rowCellValueFormatter,
+      type: 'number',
     },
-    { id: 'policyIndex3', name: 'Policy Index', field: 'policyIndex3', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'expenseControl3', name: 'Expense Control', field: 'expenseControl3', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'excessCash3', name: 'Excess Cash', field: 'excessCash3', minWidth: 100, formatter: rowCellValueFormatter },
-    { id: 'netTradeCycle3', name: 'Net Trade Cycle', field: 'netTradeCycle3', minWidth: 110, formatter: rowCellValueFormatter },
-    { id: 'costCapital3', name: 'Cost of Capital', field: 'costCapital3', minWidth: 100, formatter: rowCellValueFormatter },
   ];
 
   const gridOptions: GridOption = {
@@ -125,6 +276,8 @@ export default function Example44() {
         getRowMetadata: (item: any, row: any) => renderDifferentColspan(item, row),
       },
     },
+    enableExcelExport: true,
+    externalResources: [new ExcelExportService()],
     rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
   };