Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit e41fe93

Browse files
ghiscodingghiscoding
committed
fix: RowSpan should work with Excel Export and merge cells
1 parent c4d499d commit e41fe93

File tree

5 files changed

+240
-91
lines changed

5 files changed

+240
-91
lines changed

‎package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@
5353
},
5454
"dependencies": {
5555
"@ngx-translate/core": "^15.0.0",
56-
"@slickgrid-universal/common": "~5.12.0",
57-
"@slickgrid-universal/custom-footer-component": "~5.12.0",
58-
"@slickgrid-universal/empty-warning-component": "~5.12.0",
56+
"@slickgrid-universal/common": "~5.12.1",
57+
"@slickgrid-universal/custom-footer-component": "~5.12.1",
58+
"@slickgrid-universal/empty-warning-component": "~5.12.1",
5959
"@slickgrid-universal/event-pub-sub": "~5.12.0",
60-
"@slickgrid-universal/pagination-component": "~5.12.0",
61-
"@slickgrid-universal/row-detail-view-plugin": "~5.12.0",
62-
"@slickgrid-universal/rxjs-observable": "~5.12.0",
60+
"@slickgrid-universal/pagination-component": "~5.12.1",
61+
"@slickgrid-universal/row-detail-view-plugin": "~5.12.1",
62+
"@slickgrid-universal/rxjs-observable": "~5.12.1",
6363
"dequal": "^2.0.3",
6464
"rxjs": "^7.8.1"
6565
},
@@ -92,12 +92,12 @@
9292
"@ngx-translate/http-loader": "^8.0.0",
9393
"@popperjs/core": "^2.11.8",
9494
"@release-it/conventional-changelog": "^10.0.0",
95-
"@slickgrid-universal/composite-editor-component": "~5.12.0",
96-
"@slickgrid-universal/custom-tooltip-plugin": "~5.12.0",
97-
"@slickgrid-universal/excel-export": "~5.12.0",
98-
"@slickgrid-universal/graphql": "~5.12.0",
99-
"@slickgrid-universal/odata": "~5.12.0",
100-
"@slickgrid-universal/text-export": "~5.12.0",
95+
"@slickgrid-universal/composite-editor-component": "~5.12.1",
96+
"@slickgrid-universal/custom-tooltip-plugin": "~5.12.1",
97+
"@slickgrid-universal/excel-export": "~5.12.1",
98+
"@slickgrid-universal/graphql": "~5.12.1",
99+
"@slickgrid-universal/odata": "~5.12.1",
100+
"@slickgrid-universal/text-export": "~5.12.1",
101101
"@types/fnando__sparkline": "^0.3.7",
102102
"@types/jest": "^29.5.14",
103103
"@types/node": "^22.10.10",

‎src/app/examples/grid43.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ <h2>
7676
>Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
7777
>
7878
</button>
79+
<button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" (click)="exportToExcel()">
80+
<i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
81+
</button>
7982

8083
<angular-slickgrid
8184
gridId="grid43"

‎src/app/examples/grid43.component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
99
})
1010
export class Grid43Component implements OnInit {
1111
columnDefinitions: Column[] = [];
12+
excelExportService = new ExcelExportService();
1213
angularGrid!: AngularGridInstance;
1314
gridOptions!: GridOption;
1415
dataset: any[] = [];
@@ -152,7 +153,7 @@ export class Grid43Component implements OnInit {
152153
enableColumnReorder: true,
153154
enableCellRowSpan: true,
154155
enableExcelExport: true,
155-
externalResources: [new ExcelExportService()],
156+
externalResources: [this.excelExportService],
156157
enableExcelCopyBuffer: true,
157158
autoEdit: true,
158159
editable: false,
@@ -171,6 +172,10 @@ export class Grid43Component implements OnInit {
171172
};
172173
}
173174

175+
exportToExcel() {
176+
this.excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
177+
}
178+
174179
navigateDown() {
175180
this.angularGrid?.slickGrid?.navigateDown();
176181
}

‎src/app/examples/grid44.component.ts

Lines changed: 160 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
2+
import { ExcelExportService } from '@slickgrid-universal/excel-export';
23
import { AngularGridInstance, Column, Formatter, GridOption, type ItemMetadata } from './../modules/angular-slickgrid';
34

4-
const rowCellValueFormatter: Formatter = (row, cell, value) => {
5-
return `<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
6-
};
5+
const rowCellValueFormatter: Formatter = (row, cell, value) =>
6+
`<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
7+
const rowCellValueExportFormatter: Formatter = (_row, _cell, value) => value.toFixed(2);
78

89
@Component({
910
styleUrls: ['grid44.component.scss'],
@@ -75,60 +76,198 @@ export class Grid44Component implements OnInit {
7576
defineGrid() {
7677
this.columnDefinitions = [
7778
{ id: 'title', name: 'Title', field: 'title', minWidth: 80 },
78-
{ id: 'revenueGrowth', name: 'Revenue Growth', field: 'revenueGrowth', formatter: rowCellValueFormatter, minWidth: 120 },
79+
{
80+
id: 'revenueGrowth',
81+
name: 'Revenue Growth',
82+
field: 'revenueGrowth',
83+
exportCustomFormatter: rowCellValueExportFormatter,
84+
formatter: rowCellValueFormatter,
85+
type: 'number',
86+
minWidth: 120,
87+
},
7988
{
8089
id: 'pricingPolicy',
8190
name: 'Pricing Policy',
8291
field: 'pricingPolicy',
8392
minWidth: 110,
8493
sortable: true,
94+
exportCustomFormatter: rowCellValueExportFormatter,
95+
formatter: rowCellValueFormatter,
96+
type: 'number',
97+
},
98+
{
99+
id: 'policyIndex',
100+
name: 'Policy Index',
101+
field: 'policyIndex',
102+
minWidth: 100,
103+
exportCustomFormatter: rowCellValueExportFormatter,
104+
formatter: rowCellValueFormatter,
105+
type: 'number',
106+
},
107+
{
108+
id: 'expenseControl',
109+
name: 'Expense Control',
110+
field: 'expenseControl',
111+
minWidth: 110,
112+
exportCustomFormatter: rowCellValueExportFormatter,
113+
formatter: rowCellValueFormatter,
114+
type: 'number',
115+
},
116+
{
117+
id: 'excessCash',
118+
name: 'Excess Cash',
119+
field: 'excessCash',
120+
minWidth: 100,
121+
exportCustomFormatter: rowCellValueExportFormatter,
85122
formatter: rowCellValueFormatter,
123+
type: 'number',
124+
},
125+
{
126+
id: 'netTradeCycle',
127+
name: 'Net Trade Cycle',
128+
field: 'netTradeCycle',
129+
minWidth: 110,
130+
exportCustomFormatter: rowCellValueExportFormatter,
131+
formatter: rowCellValueFormatter,
132+
type: 'number',
133+
},
134+
{
135+
id: 'costCapital',
136+
name: 'Cost of Capital',
137+
field: 'costCapital',
138+
minWidth: 100,
139+
exportCustomFormatter: rowCellValueExportFormatter,
140+
formatter: rowCellValueFormatter,
141+
type: 'number',
142+
},
143+
{
144+
id: 'revenueGrowth2',
145+
name: 'Revenue Growth',
146+
field: 'revenueGrowth2',
147+
exportCustomFormatter: rowCellValueExportFormatter,
148+
formatter: rowCellValueFormatter,
149+
type: 'number',
150+
minWidth: 120,
86151
},
87-
{ id: 'policyIndex', name: 'Policy Index', field: 'policyIndex', minWidth: 100, formatter: rowCellValueFormatter },
88-
{ id: 'expenseControl', name: 'Expense Control', field: 'expenseControl', minWidth: 110, formatter: rowCellValueFormatter },
89-
{ id: 'excessCash', name: 'Excess Cash', field: 'excessCash', minWidth: 100, formatter: rowCellValueFormatter },
90-
{ id: 'netTradeCycle', name: 'Net Trade Cycle', field: 'netTradeCycle', minWidth: 110, formatter: rowCellValueFormatter },
91-
{ id: 'costCapital', name: 'Cost of Capital', field: 'costCapital', minWidth: 100, formatter: rowCellValueFormatter },
92-
{ id: 'revenueGrowth2', name: 'Revenue Growth', field: 'revenueGrowth2', formatter: rowCellValueFormatter, minWidth: 120 },
93152
{
94153
id: 'pricingPolicy2',
95154
name: 'Pricing Policy',
96155
field: 'pricingPolicy2',
97156
minWidth: 110,
98157
sortable: true,
158+
exportCustomFormatter: rowCellValueExportFormatter,
159+
formatter: rowCellValueFormatter,
160+
type: 'number',
161+
},
162+
{
163+
id: 'policyIndex2',
164+
name: 'Policy Index',
165+
field: 'policyIndex2',
166+
minWidth: 100,
167+
exportCustomFormatter: rowCellValueExportFormatter,
99168
formatter: rowCellValueFormatter,
169+
type: 'number',
100170
},
101-
{ id: 'policyIndex2', name: 'Policy Index', field: 'policyIndex2', minWidth: 100, formatter: rowCellValueFormatter },
102171
{
103172
id: 'expenseControl2',
104173
name: 'Expense Control',
105174
field: 'expenseControl2',
106175
minWidth: 110,
176+
exportCustomFormatter: rowCellValueExportFormatter,
107177
formatter: rowCellValueFormatter,
178+
type: 'number',
179+
},
180+
{
181+
id: 'excessCash2',
182+
name: 'Excess Cash',
183+
field: 'excessCash2',
184+
minWidth: 100,
185+
exportCustomFormatter: rowCellValueExportFormatter,
186+
formatter: rowCellValueFormatter,
187+
type: 'number',
188+
},
189+
{
190+
id: 'netTradeCycle2',
191+
name: 'Net Trade Cycle',
192+
field: 'netTradeCycle2',
193+
minWidth: 110,
194+
exportCustomFormatter: rowCellValueExportFormatter,
195+
formatter: rowCellValueFormatter,
196+
type: 'number',
197+
},
198+
{
199+
id: 'costCapital2',
200+
name: 'Cost of Capital',
201+
field: 'costCapital2',
202+
minWidth: 100,
203+
exportCustomFormatter: rowCellValueExportFormatter,
204+
formatter: rowCellValueFormatter,
205+
type: 'number',
206+
},
207+
{
208+
id: 'revenueGrowth3',
209+
name: 'Revenue Growth',
210+
field: 'revenueGrowth3',
211+
exportCustomFormatter: rowCellValueExportFormatter,
212+
formatter: rowCellValueFormatter,
213+
type: 'number',
214+
minWidth: 120,
108215
},
109-
{ id: 'excessCash2', name: 'Excess Cash', field: 'excessCash2', minWidth: 100, formatter: rowCellValueFormatter },
110-
{ id: 'netTradeCycle2', name: 'Net Trade Cycle', field: 'netTradeCycle2', minWidth: 110, formatter: rowCellValueFormatter },
111-
{ id: 'costCapital2', name: 'Cost of Capital', field: 'costCapital2', minWidth: 100, formatter: rowCellValueFormatter },
112-
{ id: 'revenueGrowth3', name: 'Revenue Growth', field: 'revenueGrowth3', formatter: rowCellValueFormatter, minWidth: 120 },
113216
{
114217
id: 'pricingPolicy3',
115218
name: 'Pricing Policy',
116219
field: 'pricingPolicy3',
117220
minWidth: 110,
118221
sortable: true,
222+
exportCustomFormatter: rowCellValueExportFormatter,
119223
formatter: rowCellValueFormatter,
224+
type: 'number',
225+
},
226+
{
227+
id: 'policyIndex3',
228+
name: 'Policy Index',
229+
field: 'policyIndex3',
230+
minWidth: 100,
231+
exportCustomFormatter: rowCellValueExportFormatter,
232+
formatter: rowCellValueFormatter,
233+
type: 'number',
120234
},
121-
{ id: 'policyIndex3', name: 'Policy Index', field: 'policyIndex3', minWidth: 100, formatter: rowCellValueFormatter },
122235
{
123236
id: 'expenseControl3',
124237
name: 'Expense Control',
125238
field: 'expenseControl3',
126239
minWidth: 110,
240+
exportCustomFormatter: rowCellValueExportFormatter,
241+
formatter: rowCellValueFormatter,
242+
type: 'number',
243+
},
244+
{
245+
id: 'excessCash3',
246+
name: 'Excess Cash',
247+
field: 'excessCash3',
248+
minWidth: 100,
249+
exportCustomFormatter: rowCellValueExportFormatter,
250+
formatter: rowCellValueFormatter,
251+
type: 'number',
252+
},
253+
{
254+
id: 'netTradeCycle3',
255+
name: 'Net Trade Cycle',
256+
field: 'netTradeCycle3',
257+
minWidth: 110,
258+
exportCustomFormatter: rowCellValueExportFormatter,
259+
formatter: rowCellValueFormatter,
260+
type: 'number',
261+
},
262+
{
263+
id: 'costCapital3',
264+
name: 'Cost of Capital',
265+
field: 'costCapital3',
266+
minWidth: 100,
267+
exportCustomFormatter: rowCellValueExportFormatter,
127268
formatter: rowCellValueFormatter,
269+
type: 'number',
128270
},
129-
{ id: 'excessCash3', name: 'Excess Cash', field: 'excessCash3', minWidth: 100, formatter: rowCellValueFormatter },
130-
{ id: 'netTradeCycle3', name: 'Net Trade Cycle', field: 'netTradeCycle3', minWidth: 110, formatter: rowCellValueFormatter },
131-
{ id: 'costCapital3', name: 'Cost of Capital', field: 'costCapital3', minWidth: 100, formatter: rowCellValueFormatter },
132271
];
133272

134273
this.gridOptions = {
@@ -143,6 +282,8 @@ export class Grid44Component implements OnInit {
143282
getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
144283
},
145284
},
285+
enableExcelExport: true,
286+
externalResources: [new ExcelExportService()],
146287
rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
147288
};
148289
}

0 commit comments

Comments
 (0)