Skip to content

Commit 20c604f

Browse files
author
R. S. Doiel
committed
commiting to main
1 parent a67b2dd commit 20c604f

File tree

3 files changed

+131
-0
lines changed

3 files changed

+131
-0
lines changed

‎sortable_table.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<title>CL-web-components</title>
5+
<link rel="stylesheet" href="/css/site.css">
6+
</head>
7+
<body>
8+
<nav>
9+
<ul>
10+
<li><a href="/">Home</a></li>
11+
<li><a href="index.html">README</a></li>
12+
<li><a href="LICENSE">LICENSE</a></li>
13+
<li><a href="user_manual.html">User Manual</a></li>
14+
<li><a href="INSTALL.html">INSTALL</a></li>
15+
<li><a href="about.html">About</a></li>
16+
<li><a href="search.html">Search</a></li>
17+
<li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
18+
</ul>
19+
</nav>
20+
<section>
21+
<h1 id="sortable-table-web-component">Sortable Table Web Component</h1>
22+
<p>This web component wraps a standard HTML table. It displays the table
23+
and makes it sortable by the column headings and provides a search
24+
filter element that operates on the table by column.</p>
25+
<h2 id="example">Example</h2>
26+
<p>This is a standard table without the web component.</p>
27+
<table>
28+
<thead>
29+
<tr>
30+
<th style="text-align: left;">Name</th>
31+
<th style="text-align: left;">University</th>
32+
<th style="text-align: left;">Graduation Year</th>
33+
</tr>
34+
</thead>
35+
<tbody>
36+
<tr>
37+
<td style="text-align: left;">Alice</td>
38+
<td style="text-align: left;">Mills College</td>
39+
<td style="text-align: left;">1922</td>
40+
</tr>
41+
<tr>
42+
<td style="text-align: left;">Sr. Mary</td>
43+
<td style="text-align: left;">Mount Saint Mary's College</td>
44+
<td style="text-align: left;">1919</td>
45+
</tr>
46+
<tr>
47+
<td style="text-align: left;">Georgina</td>
48+
<td style="text-align: left;">Smith College</td>
49+
<td style="text-align: left;">1925</td>
50+
</tr>
51+
<tr>
52+
<td style="text-align: left;">Evelyn</td>
53+
<td style="text-align: left;">Barnard College</td>
54+
<td style="text-align: left;">1920</td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
<p>See a <a href="sortable_table_demo.html">sortable-table demo</a> for
59+
web component version.</p>
60+
</section>
61+
</body>
62+
</html>

‎sortable_table.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Sortable Table Web Component
3+
---
4+
5+
# Sortable Table Web Component
6+
7+
This web component wraps a standard HTML table. It displays the table and makes it sortable by the column headings
8+
and provides a search filter element that operates on the table by column.
9+
10+
## Example
11+
12+
This is a standard table without the web component.
13+
14+
Name University Graduation Year
15+
---------- ----------------------------- -----------------
16+
Alice Mills College 1922
17+
Sr. Mary Mount Saint Mary\'s College 1919
18+
Georgina Smith College 1925
19+
Evelyn Barnard College 1920
20+
21+
See a [sortable-table demo](sortable_table_demo.html) for web component version.

‎sortable_table_llm_prompts.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<title>CL-web-components</title>
5+
<link rel="stylesheet" href="/css/site.css">
6+
</head>
7+
<body>
8+
<nav>
9+
<ul>
10+
<li><a href="/">Home</a></li>
11+
<li><a href="index.html">README</a></li>
12+
<li><a href="LICENSE">LICENSE</a></li>
13+
<li><a href="user_manual.html">User Manual</a></li>
14+
<li><a href="INSTALL.html">INSTALL</a></li>
15+
<li><a href="about.html">About</a></li>
16+
<li><a href="search.html">Search</a></li>
17+
<li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
18+
</ul>
19+
</nav>
20+
<section>
21+
<p>I need to created a web component called <code>sortable-table</code>.
22+
that wraps an HTML <code>table</code> element. The web component will
23+
allow you to sort the table descending or ascending by clicking the
24+
column heads. The column headings and rows are determined by the table
25+
being wrapped by the web component.</p>
26+
<p>Here’s an example of using the web component.</p>
27+
<div class="sourceCode" id="cb1"><pre
28+
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">storable-table</span><span class="dt">&gt;</span></span>
29+
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">table</span><span class="dt">&gt;</span></span>
30+
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">thead</span><span class="dt">&gt;</span></span>
31+
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;&lt;</span><span class="kw">th</span><span class="dt">&gt;</span>name<span class="dt">&lt;/</span><span class="kw">th</span><span class="dt">&gt;&lt;</span><span class="kw">th</span><span class="dt">&gt;</span>university<span class="dt">&lt;/</span><span class="kw">th</span><span class="dt">&gt;&lt;</span><span class="kw">th</span><span class="dt">&gt;</span>grad year<span class="dt">&lt;/</span><span class="kw">th</span><span class="dt">&gt;&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
32+
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;/</span><span class="kw">thead</span><span class="dt">&gt;</span></span>
33+
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">tbody</span><span class="dt">&gt;</span></span>
34+
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Alice<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Mills College<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>1922<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
35+
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Sr. Mary<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Mount Saint Mary&#39;s College<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>1919<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
36+
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Goergina<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>Smith College<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>1925<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
37+
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;/</span><span class="kw">tbody</span><span class="dt">&gt;</span></span>
38+
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;/</span><span class="kw">table</span><span class="dt">&gt;</span></span>
39+
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">sortable-table</span><span class="dt">&gt;</span></span></code></pre></div>
40+
<p>When the <code>sortable-table</code> web component instantiates it
41+
recreated the innerHTML table representation but makes the table
42+
sortable. When you click on a column it sorts the table by that column.
43+
There is also a search column form at the top of the table that will
44+
filter the table results by the column select and the text typed in.</p>
45+
<p>Please generate the JavaScript to created this component.</p>
46+
</section>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)