-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathweb-components-data-table.htm
More file actions
95 lines (91 loc) · 4.73 KB
/
web-components-data-table.htm
File metadata and controls
95 lines (91 loc) · 4.73 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
93
94
95
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Component Data Table Footer Demo</title>
<style>
body { padding:50px; }
table { border-collapse: collapse; margin-bottom:50px; }
thead, tfoot { background-color: lightgray; }
th, td { padding: .5em 1em; border: 1px solid black; }
.text-left { text-align:left; }
.text-right { text-align:right; }
</style>
</head>
<body>
<!--
For this demo [data-bind] is not required when using [js/web-components/data-table.js]
however it's needed for [js/web-components/polyfill.js] because [polyfill.js] uses the
standard Framework which does not support setting manually setting the `value` property.
See JS code for more info.
Typically <data-table> is used to show data from a <json-data> service,
however this demo does not include a JSON backend service.
-->
<data-table
labels="Id, Name, Value, Cost"
col-class="Name=text-left, Value=text-right, Cost=text-right"
data-bind="records">
<script type="text/x-template">
<tr>
<td>${id}</td>
<td>${name}</td>
<td class="text-right">${value}</td>
<td class="text-right" data-value="${cost}">${format.round(cost, 4)}</td>
</tr>
</script>
<script type="text/x-template" data-footer>
<tr>
<td colspan="2">${count()} Records</td>
<td class="text-right">
<div><strong>Sum:</strong> ${sum('value')}</div>
<div><strong>Avg:</strong> ${avg('value')}</div>
<div><strong>Min:</strong> ${min('value')}</div>
<div><strong>Max:</strong> ${max('value')}</div>
</td>
<td class="text-right">
<div><strong>Sum:</strong> ${format.round(sum('cost'), 4)}</div>
<div><strong>Avg:</strong> ${format.round(avg('cost'), 4)}</div>
<div><strong>Min:</strong> ${format.round(min('cost'), 4)}</div>
<div><strong>Max:</strong> ${format.round(max('cost'), 4)}</div>
</td>
</tr>
</script>
</data-table>
<p>This demo shows how to use <data-table> with the [data-footer] template.</p>
<p>The resulting formula values match Excel if entering the same data.</p>
<p>For additional usages of <data-table> view code for the <a href="places-demo-web">Places Web Component Demo</a>.</p>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/data-table.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var records = [
{ id: 1, name:'Test Item 1', value: 123, cost:50.2222, },
{ id: 2, name:'Record # 2', value: '456.7', cost:200.4444, },
{ id: 3, name:'Record Three', value: 'Not a Number', cost:5000.8888 },
];
if (window.usingWebComponentsPolyfill) {
// Hack when using [polyfill.js] for Legacy Browsers.
// The DataFormsJS Framework Control <data-table> does not support
// setting `value` and instead uses data binding to `app.activeModel`.
// For most apps this code would not be needed because <data-table>
// would be used to show data from <json-service> or another component.
var interval = window.setInterval(function() {
// Wait till content is ready
if (window.app === undefined || app.activeModel === null || app.controls['data-table'] === undefined) {
return;
}
window.clearInterval(interval);
interval = null;
// Update Model and View
app.activeModel.records = records;
app.updateView();
}, 100);
} else {
// <data-table> Web Component
document.querySelector('data-table').value = records;
}
});
</script>
</body>
</html>