-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathcountries-no-spa-hbs.htm
More file actions
92 lines (86 loc) · 4.13 KB
/
countries-no-spa-hbs.htm
File metadata and controls
92 lines (86 loc) · 4.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countries Demo | No SPA | Handlebars</title>
<link rel="stylesheet" href="css/countries.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
<link rel="canonical" href="https://www.dataformsjs.com/examples/countries-no-spa-hbs.htm">
</head>
<body>
<div id="view">
<h1>Countries</h1>
<json-data
class="flex-col"
data-url="https://www.dataformsjs.com/data/geonames/countries"
data-template-id="countries-list">
</json-data>
</div>
<script type="text/x-template" data-engine="handlebars" id="countries-list">
{{#if isLoading}}<div>Loading...</div>{{/if}}
{{#if hasError}}<div class="error">{{errorMessage}}</div>{{/if}}
{{#if isLoaded}}
<input
data-filter-selector="table"
data-filter-results-text-selector="h1"
data-filter-results-text-all="{totalCount} Countries"
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
placeholder="Enter filter, example 'North America'">
<div>
<nav style="display: inline-flex;">
<span>Download</span>
<img class="download"
src="img/Excel.svg"
height="16"
width="16"
alt="Download to Excel"
title="Download to Excel"
data-export-excel-selector="table"
data-export-file-name="Countries.xlsx">
<img class="download"
src="img/CSV.svg"
height="16"
width="16"
alt="Download to CSV"
title="Download to CSV"
data-export-csv-selector="table"
data-export-file-name="Countries.csv">
</nav>
</div>
<p>Click on a column to sort rows based on column values.</p>
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Size (KM)</th>
<th>Population</th>
<th>Continent</th>
</tr>
</thead>
<tbody>
{{#each countries}}
<tr>
<td><i class="{{lowerCase iso}} flag"></i>{{iso}}</td>
<td>{{country}}</td>
<td class="align-right" data-value="{{area_km}}">{{formatNumber area_km}}</td>
<td class="align-right" data-value="{{population}}">{{formatNumber population}}</td>
<td>{{continent}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/controls/json-data.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/handlebars-helpers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.6/dist/handlebars.min.js"></script>
</body>
</html>