Skip to content

Commit ac879b3

Browse files
ghiscodingghiscoding
committed
chore: use HTML code for table directly instead of utils for loop
1 parent 2ddfcdd commit ac879b3

File tree

5 files changed

+119
-78
lines changed

5 files changed

+119
-78
lines changed

‎packages/demo/src/examples/demoUtils.ts‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎packages/demo/src/examples/example01.html‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ <h2 class="bd-title">
66
<span class="float-end links">
77
Code <span class="fa fa-link"></span>
88
<span class="small">
9-
<a target="_blank" href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example01.html"
10-
>html</a
11-
>
9+
<a target="_blank"
10+
href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example01.html">html</a>
1211
|
13-
<a target="_blank" href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example01.ts">ts</a>
12+
<a target="_blank"
13+
href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example01.ts">ts</a>
1414
</span>
1515
</span>
1616
</h2>
@@ -24,7 +24,49 @@ <h2 class="bd-title">
2424
</div>
2525

2626
<div class="row">
27-
<div class="table-container col-sm-8"></div>
27+
<div class="table-container col-sm-8">
28+
<table class="table">
29+
<thead>
30+
<tr>
31+
<th scope="col">Artist</th>
32+
<th scope="col">Album</th>
33+
<th scope="col">Price</th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<tr>
38+
<td>Buckethead</td>
39+
<td>Albino Slug</td>
40+
<td>8.99</td>
41+
</tr>
42+
<tr>
43+
<td>Buckethead</td>
44+
<td>Electric Tears</td>
45+
<td>13.99</td>
46+
</tr>
47+
<tr>
48+
<td>Buckethead</td>
49+
<td>Colma</td>
50+
<td>11.34</td>
51+
</tr>
52+
<tr>
53+
<td>Crystal Method</td>
54+
<td>Vegas</td>
55+
<td>10.54</td>
56+
</tr>
57+
<tr>
58+
<td>Crystal Method</td>
59+
<td>Tweekend</td>
60+
<td>10.64</td>
61+
</tr>
62+
<tr>
63+
<td>Crystal Method</td>
64+
<td>Divided By Night</td>
65+
<td>8.99</td>
66+
</tr>
67+
</tbody>
68+
</table>
69+
</div>
2870
</div>
2971
</div>
30-
</div>
72+
</div>

‎packages/demo/src/examples/example01.ts‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
import { Workbook, downloadExcelFile } from 'excel-builder-vanilla';
22

3-
import { buildHtmlTable } from './demoUtils';
43
import './example01.scss';
54

65
export default class Example {
76
exportBtnElm!: HTMLButtonElement;
8-
originalData = [
9-
['Artist', 'Album', 'Price'],
10-
['Buckethead', 'Albino Slug', 8.99],
11-
['Buckethead', 'Electric Tears', 13.99],
12-
['Buckethead', 'Colma', 11.34],
13-
['Crystal Method', 'Vegas', 10.54],
14-
['Crystal Method', 'Tweekend', 10.64],
15-
['Crystal Method', 'Divided By Night', 8.99],
16-
];
177

188
mount() {
19-
const tableContainerElm = document.querySelector('.table-container') as HTMLDivElement;
20-
tableContainerElm.appendChild(buildHtmlTable(this.originalData));
21-
229
this.exportBtnElm = document.querySelector('#export') as HTMLButtonElement;
2310
this.exportBtnElm.addEventListener('click', this.startProcess.bind(this));
2411
}
@@ -29,9 +16,18 @@ export default class Example {
2916
}
3017

3118
startProcess() {
19+
const originalData = [
20+
['Artist', 'Album', 'Price'],
21+
['Buckethead', 'Albino Slug', 8.99],
22+
['Buckethead', 'Electric Tears', 13.99],
23+
['Buckethead', 'Colma', 11.34],
24+
['Crystal Method', 'Vegas', 10.54],
25+
['Crystal Method', 'Tweekend', 10.64],
26+
['Crystal Method', 'Divided By Night', 8.99],
27+
];
3228
const artistWorkbook = new Workbook();
3329
const albumList = artistWorkbook.createWorksheet({ name: 'Artists' });
34-
albumList.setData(this.originalData);
30+
albumList.setData(originalData);
3531
artistWorkbook.addWorksheet(albumList);
3632

3733
downloadExcelFile(artistWorkbook, 'Artist WB.xlsx');

‎packages/demo/src/examples/example03.html‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ <h2 class="bd-title">
66
<span class="float-end links">
77
Code <span class="fa fa-link"></span>
88
<span class="small">
9-
<a target="_blank" href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example03.html"
10-
>html</a
11-
>
9+
<a target="_blank"
10+
href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example03.html">html</a>
1211
|
13-
<a target="_blank" href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example03.ts">ts</a>
12+
<a target="_blank"
13+
href="https://github.com/ghiscoding/excel-builder-vanilla/blob/main/packages/demo/src/examples/example03.ts">ts</a>
1414
</span>
1515
</span>
1616
</h2>
1717
<div class="demo-subtitle">
18-
Set different row options via <code>setRowInstructions()</code> method. For example, we changed the row height of the first row and
19-
change the text style to italic.
18+
Set different row options via <code>setRowInstructions()</code> method. For example, we changed the row height
19+
of the first row and change the text style to italic.
2020
</div>
2121
</div>
2222
</div>
@@ -27,7 +27,49 @@ <h2 class="bd-title">
2727
</div>
2828

2929
<div class="row">
30-
<div class="table-container col-sm-8"></div>
30+
<div class="table-container col-sm-8">
31+
<table class="table">
32+
<thead>
33+
<tr>
34+
<th scope="col">Artist</th>
35+
<th scope="col">Album</th>
36+
<th scope="col">Price</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr>
41+
<td>Buckethead</td>
42+
<td>Albino Slug</td>
43+
<td>8.99</td>
44+
</tr>
45+
<tr>
46+
<td>Buckethead</td>
47+
<td>Electric Tears</td>
48+
<td>13.99</td>
49+
</tr>
50+
<tr>
51+
<td>Buckethead</td>
52+
<td>Colma</td>
53+
<td>11.34</td>
54+
</tr>
55+
<tr>
56+
<td>Crystal Method</td>
57+
<td>Vegas</td>
58+
<td>10.54</td>
59+
</tr>
60+
<tr>
61+
<td>Crystal Method</td>
62+
<td>Tweekend</td>
63+
<td>10.64</td>
64+
</tr>
65+
<tr>
66+
<td>Crystal Method</td>
67+
<td>Divided By Night</td>
68+
<td>8.99</td>
69+
</tr>
70+
</tbody>
71+
</table>
72+
</div>
3173
</div>
3274
</div>
33-
</div>
75+
</div>

‎packages/demo/src/examples/example03.ts‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
import { createWorkbook, downloadExcelFile } from 'excel-builder-vanilla';
22

3-
import { buildHtmlTable } from './demoUtils';
43
import './example03.scss';
54

65
export default class Example {
76
exportBtnElm!: HTMLButtonElement;
8-
originalData = [
9-
['Artist', 'Album', 'Price'],
10-
['Buckethead', 'Albino Slug', 8.99],
11-
['Buckethead', 'Electric Tears', 13.99],
12-
['Buckethead', 'Colma', 11.34],
13-
['Crystal Method', 'Vegas', 10.54],
14-
['Crystal Method', 'Tweekend', 10.64],
15-
['Crystal Method', 'Divided By Night', 8.99],
16-
];
177

188
mount() {
19-
const tableContainerElm = document.querySelector('.table-container') as HTMLDivElement;
20-
tableContainerElm.appendChild(buildHtmlTable(this.originalData));
21-
229
this.exportBtnElm = document.querySelector('#export') as HTMLButtonElement;
2310
this.exportBtnElm.addEventListener('click', this.startProcess.bind(this));
2411
}
@@ -29,6 +16,16 @@ export default class Example {
2916
}
3017

3118
startProcess() {
19+
const originalData = [
20+
['Artist', 'Album', 'Price'],
21+
['Buckethead', 'Albino Slug', 8.99],
22+
['Buckethead', 'Electric Tears', 13.99],
23+
['Buckethead', 'Colma', 11.34],
24+
['Crystal Method', 'Vegas', 10.54],
25+
['Crystal Method', 'Tweekend', 10.64],
26+
['Crystal Method', 'Divided By Night', 8.99],
27+
];
28+
3229
const artistWorkbook = createWorkbook();
3330
const albumList = artistWorkbook.createWorksheet({ name: 'Album List' });
3431
// const stylesheet = artistWorkbook.getStyleSheet();
@@ -46,7 +43,7 @@ export default class Example {
4643
height: 40,
4744
style: boldDXF.id,
4845
});
49-
albumList.setData(this.originalData);
46+
albumList.setData(originalData);
5047

5148
artistWorkbook.addWorksheet(albumList);
5249

0 commit comments

Comments
 (0)