fix: RowSpan should work with Excel Export and merge cells

ghiscoding · Jan 25, 2025 · e41fe93 · e41fe93
1 parent c4d499d
commit e41fe93
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@slickgrid-universal/common": "~5.12.0",
-    "@slickgrid-universal/custom-footer-component": "~5.12.0",
-    "@slickgrid-universal/empty-warning-component": "~5.12.0",
+    "@slickgrid-universal/common": "~5.12.1",
+    "@slickgrid-universal/custom-footer-component": "~5.12.1",
+    "@slickgrid-universal/empty-warning-component": "~5.12.1",
     "@slickgrid-universal/event-pub-sub": "~5.12.0",
-    "@slickgrid-universal/pagination-component": "~5.12.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.12.0",
-    "@slickgrid-universal/rxjs-observable": "~5.12.0",
+    "@slickgrid-universal/pagination-component": "~5.12.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.12.1",
+    "@slickgrid-universal/rxjs-observable": "~5.12.1",
     "dequal": "^2.0.3",
     "rxjs": "^7.8.1"
   },
@@ -92,12 +92,12 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
-    "@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/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/text-export": "~5.12.1",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.10",

diff --git a/src/app/examples/grid43.component.html b/src/app/examples/grid43.component.html
@@ -76,6 +76,9 @@ <h2>
       >Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
     >
   </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" (click)="exportToExcel()">
+    <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
+  </button>
 
   <angular-slickgrid
     gridId="grid43"

diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts
@@ -9,6 +9,7 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
 })
 export class Grid43Component implements OnInit {
   columnDefinitions: Column[] = [];
+  excelExportService = new ExcelExportService();
   angularGrid!: AngularGridInstance;
   gridOptions!: GridOption;
   dataset: any[] = [];
@@ -152,7 +153,7 @@ export class Grid43Component implements OnInit {
       enableColumnReorder: true,
       enableCellRowSpan: true,
       enableExcelExport: true,
-      externalResources: [new ExcelExportService()],
+      externalResources: [this.excelExportService],
       enableExcelCopyBuffer: true,
       autoEdit: true,
       editable: false,
@@ -171,6 +172,10 @@ export class Grid43Component implements OnInit {
     };
   }
 
+  exportToExcel() {
+    this.excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
+  }
+
   navigateDown() {
     this.angularGrid?.slickGrid?.navigateDown();
   }

diff --git a/src/app/examples/grid44.component.ts b/src/app/examples/grid44.component.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { AngularGridInstance, Column, Formatter, GridOption, type ItemMetadata } from './../modules/angular-slickgrid';
 
-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);
 
 @Component({
   styleUrls: ['grid44.component.scss'],
@@ -75,60 +76,198 @@ export class Grid44Component implements OnInit {
   defineGrid() {
     this.columnDefinitions = [
       { 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: 'policyIndex2', name: 'Policy Index', field: 'policyIndex2', minWidth: 100, formatter: rowCellValueFormatter },
       {
         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: '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: 'policyIndex3', name: 'Policy Index', field: 'policyIndex3', minWidth: 100, formatter: rowCellValueFormatter },
       {
         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: '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 },
     ];
 
     this.gridOptions = {
@@ -143,6 +282,8 @@ export class Grid44Component implements OnInit {
           getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
         },
       },
+      enableExcelExport: true,
+      externalResources: [new ExcelExportService()],
       rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
     };
   }