Skip to content

Commit 496ff91

Browse files
author
Conrad Sollitt
committed
📃 Update Examples for Excel and CSV Export
1 parent fcf6156 commit 496ff91

7 files changed

Lines changed: 118 additions & 9 deletions

‎docs/to-do-list.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ TODO List
2525
**) Finish adding Excel and CSV Export to the Places Demo
2626
- Several NPM releases are being made prior to the updates being published on the main site:
2727
After NPM release update all "../js/" to the CDN Page
28+
Use global search of "../js/" to find files that need to be updated
2829
- This is being worked on mid-Feb 2022 and will likely be published by the end of this month
2930
- Need to test more browsers, IE, Safari, etc
3031
- Need a CSV icon (currently Excel icon is used for both Excel and CSV)

‎examples/countries-no-spa-hbs.htm‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,28 @@ <h1>Countries</h1>
3030
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
3131
placeholder="Enter filter, example 'North America'">
3232

33+
<div>
34+
<nav style="display: inline-flex;">
35+
<span>Download</span>
36+
<img class="download"
37+
src="img/Excel.svg"
38+
height="16"
39+
width="16"
40+
alt="Download to Excel"
41+
title="Download to Excel"
42+
data-export-excel-selector="table"
43+
data-export-file-name="Countries.xlsx">
44+
<img class="download"
45+
src="img/Excel.svg"
46+
height="16"
47+
width="16"
48+
alt="Download to CSV"
49+
title="Download to CSV"
50+
data-export-csv-selector="table"
51+
data-export-file-name="Countries.csv">
52+
</nav>
53+
</div>
54+
3355
<p>Click on a column to sort rows based on column values.</p>
3456

3557
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
@@ -63,6 +85,10 @@ <h1>Countries</h1>
6385
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>
6486
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
6587
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>
88+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>
89+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script> -->
90+
<script src="../js/plugins/exportToCsv.min.js"></script>
91+
<script src="../js/plugins/exportToExcel.min.js"></script>
6692
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.6/dist/handlebars.min.js"></script>
6793
</body>
6894
</html>

‎examples/countries-no-spa-js.htm‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,28 @@ <h1>Countries</h1>
2929
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
3030
placeholder="Enter filter, example 'North America'">
3131

32+
<div>
33+
<nav style="display: inline-flex;">
34+
<span>Download</span>
35+
<img class="download"
36+
src="img/Excel.svg"
37+
height="16"
38+
width="16"
39+
alt="Download to Excel"
40+
title="Download to Excel"
41+
data-export-excel-selector="table"
42+
data-export-file-name="Countries.xlsx">
43+
<img class="download"
44+
src="img/Excel.svg"
45+
height="16"
46+
width="16"
47+
alt="Download to CSV"
48+
title="Download to CSV"
49+
data-export-csv-selector="table"
50+
data-export-file-name="Countries.csv">
51+
</nav>
52+
</div>
53+
3254
<p>Click on a column to sort rows based on column values.</p>
3355

3456
<data-table
@@ -63,5 +85,9 @@ <h1>Countries</h1>
6385
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>
6486
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
6587
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>
88+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>
89+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script> -->
90+
<script src="../js/plugins/exportToCsv.min.js"></script>
91+
<script src="../js/plugins/exportToExcel.min.js"></script>
6692
</body>
6793
</html>

‎examples/countries-no-spa-vue.htm‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,28 @@ <h1>Countries</h1>
4444
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
4545
placeholder="Enter filter, example 'North America'">
4646

47+
<div>
48+
<nav style="display: inline-flex;">
49+
<span>Download</span>
50+
<img class="download"
51+
src="img/Excel.svg"
52+
height="16"
53+
width="16"
54+
alt="Download to Excel"
55+
title="Download to Excel"
56+
data-export-excel-selector="table"
57+
data-export-file-name="Countries.xlsx">
58+
<img class="download"
59+
src="img/Excel.svg"
60+
height="16"
61+
width="16"
62+
alt="Download to CSV"
63+
title="Download to CSV"
64+
data-export-csv-selector="table"
65+
data-export-file-name="Countries.csv">
66+
</nav>
67+
</div>
68+
4769
<p>Click on a column to sort rows based on column values.</p>
4870

4971
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
@@ -89,5 +111,9 @@ <h1>Countries</h1>
89111
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>
90112
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
91113
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>
114+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>
115+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script> -->
116+
<script src="../js/plugins/exportToCsv.min.js"></script>
117+
<script src="../js/plugins/exportToExcel.min.js"></script>
92118
</body>
93119
</html>

‎examples/countries-no-spa-web.htm‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
</head>
1818
<body>
1919
<div id="view">
20+
<export-to-excel-service></export-to-excel-service>
21+
<export-to-csv-service></export-to-csv-service>
22+
2023
<h1>Countries</h1>
2124

2225
<json-data url="https://www.dataformsjs.com/data/geonames/countries" load-only-once>
@@ -35,6 +38,28 @@ <h1>Countries</h1>
3538
filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
3639
placeholder="Enter filter, example 'North America'">
3740

41+
<div>
42+
<nav style="display: inline-flex;">
43+
<span>Download</span>
44+
<img class="download"
45+
src="img/Excel.svg"
46+
height="16"
47+
width="16"
48+
alt="Download to Excel"
49+
title="Download to Excel"
50+
data-export-excel-selector="table"
51+
data-export-file-name="Countries.xlsx">
52+
<img class="download"
53+
src="img/Excel.svg"
54+
height="16"
55+
width="16"
56+
alt="Download to CSV"
57+
title="Download to CSV"
58+
data-export-csv-selector="table"
59+
data-export-file-name="Countries.csv">
60+
</nav>
61+
</div>
62+
3863
<p>Click on a column to sort rows based on column values.</p>
3964

4065
<!--
@@ -87,6 +112,9 @@ <h1>Countries</h1>
87112
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/data-table.min.js"></script>
88113
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/input-filter.min.js"></script>
89114
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/sortable-table.min.js"></script>
90-
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script>
115+
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-excel-service.min.js"></script>
116+
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-csv-service.min.js"></script>
117+
<!-- <script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script> -->
118+
<script nomodule src="../js/web-components/polyfill.min.js"></script>
91119
</body>
92120
</html>

‎examples/export-table-js.htm‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ <h1>Export Table Demo | DataFormsJS Framework</h1>
4141
<div id="record-count" style="padding-top: 10px;"></div>
4242

4343
<div class="form-controls">
44-
<button type="button"
45-
data-export-csv-selector="table"
46-
data-export-file-name="Log-Report.csv">Export to CSV</button>
4744
<button type="button"
4845
data-export-excel-selector="table"
4946
data-export-file-name="Log-Report.xlsx"
5047
data-worksheet-name="Log Report">Export to Excel</button>
48+
<button type="button"
49+
data-export-csv-selector="table"
50+
data-export-file-name="Log-Report.csv">Export to CSV</button>
5151
</div>
5252

5353
<div class="form-controls">
@@ -77,7 +77,8 @@ <h1>Export Table Demo | DataFormsJS Framework</h1>
7777
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
7878
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>
7979
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>
80-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script>
80+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script> -->
81+
<script src="../js/plugins/exportToExcel.min.js"></script>
8182

8283
<!-- Code for this Page -->
8384
<script src="export-table-records.js"></script>

‎examples/export-table-web.htm‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ <h1>Export Table Demo | Web Components</h1>
4646
<div id="record-count" style="padding-top: 10px;"></div>
4747

4848
<div class="form-controls">
49-
<button type="button"
50-
data-export-csv-selector="table"
51-
data-export-file-name="Log-Report.csv">Export to CSV</button>
5249
<button type="button"
5350
data-export-excel-selector="table"
5451
data-export-file-name="Log-Report.xlsx"
5552
data-worksheet-name="Log Report">Export to Excel</button>
53+
<button type="button"
54+
data-export-csv-selector="table"
55+
data-export-file-name="Log-Report.csv">Export to CSV</button>
5656
</div>
5757

5858
<div class="form-controls">
@@ -76,7 +76,8 @@ <h1>Export Table Demo | Web Components</h1>
7676
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/data-table.min.js"></script>
7777
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/input-filter.min.js"></script>
7878
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/sortable-table.min.js"></script>
79-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-csv-service.min.js"></script>
79+
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-csv-service.min.js"></script> -->
80+
<script type="module" src="../js/web-components/export-to-csv-service.min.js"></script>
8081
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-excel-service.min.js"></script>
8182
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/highlighter-service.min.js"></script>
8283
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script>

0 commit comments

Comments
 (0)