CL-web-components/table-sortable.html at main · caltechlibrary/CL-web-components · GitHub

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
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>CL-web-components</title>
    <link rel="stylesheet" href="https://caltechlibrary.github.io/css/site.css">
    <link rel="stylesheet" href="https://media.library.caltech.edu/cl-webcomponents/css/code-blocks.css">
    <script type="module" src="https://media.library.caltech.edu/cl-webcomponents/copyToClipboard.js"></script>
    <script type="module" src="https://media.library.caltech.edu/cl-webcomponents/footer-global.js"></script>
</head>
<body>
<header>
<a href="https://library.caltech.edu"><img src="https://media.library.caltech.edu/assets/caltechlibrary-logo.png" alt="Caltech Library logo"></a>
</header>
<nav>
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="index.html">README</a></li>
    <li><a href="LICENSE">LICENSE</a></li>
    <li><a href="INSTALL.html">INSTALL</a></li>
    <li><a href="DEPLOYMENT.html">DEPLOYMENT</a></li>
    <li><a href="user_manual.html">User Manual</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="search.html">Search</a></li>
    <li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
</ul>
</nav>
<section>
<h1 id="table-sortable-web-component">Table Sortable Web Component</h1>
<p>This web component wraps a standard HTML table. It displays the table
and makes it sortable by the column headings and provides a search
filter element that operates on the table by column.</p>
<h2 id="example">Example</h2>
<p>This is a standard table without the web component.</p>
<table>
<thead>
<tr>
<th style="text-align: left;">Name</th>
<th style="text-align: left;">University</th>
<th style="text-align: left;">Graduation Year</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Alice</td>
<td style="text-align: left;">Mills College</td>
<td style="text-align: left;">1922</td>
</tr>
<tr>
<td style="text-align: left;">Sr. Mary</td>
<td style="text-align: left;">Mount Saint Mary's College</td>
<td style="text-align: left;">1919</td>
</tr>
<tr>
<td style="text-align: left;">Georgina</td>
<td style="text-align: left;">Smith College</td>
<td style="text-align: left;">1925</td>
</tr>
<tr>
<td style="text-align: left;">Evelyn</td>
<td style="text-align: left;">Barnard College</td>
<td style="text-align: left;">1920</td>
</tr>
</tbody>
</table>
<div id="demo">
<p>The sortable of version is here.</p>
</div>
<script type="module" src="table-sortable.js"></script>
<script>
    const demo = document.getElementById('demo');
    const clonedTable = document.querySelector('table').cloneNode(true);
    const sortableTable = document.createElement('table-sortable');
    sortableTable.appendChild(clonedTable);
    demo.appendChild(sortableTable);
</script>
<p>See a the <a href="demo_table-sortable.html">Table Sortable
Demo</a></p>
</section>
<footer-global></footer-global>
</body>
</html>