feat(rh-table): add rh-table

.changeset/healthy-emus-destroy.md

@@ -0,0 +1,47 @@
+---
+'@rhds/elements': minor
+---
+
+✨ Added `<rh-table>`.
+
+A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col" data-label="Date">Date</th>
+        <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
+        <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td data-label="Date">12 February</td>
+        <td data-label="Event">Waltz with Strauss</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+      <tr>
+        <td data-label="Date">24 March</td>
+        <td data-label="Event">The Obelisks</td>
+        <td data-label="Venue">West Wing</td>
+      </tr>
+      <tr>
+        <td data-label="Date">14 April</td>
+        <td data-label="Event">The What</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+    </tbody>
+  </table>
+  <small slot="summary">Dates and venues subject to change.</small>
+</rh-table>
+```

docs/_data/relatedItems.yaml

@@ -74,6 +74,8 @@ rh-subnav:
  - rh-navigation
  - rh-navigation-secondary
  - skip-navigation
+rh-table:
+ - rh-code-block
 rh-tabs: 
  - rh-jump-links
  - rh-pagination

docs/elements/elements.html

@@ -10,6 +10,7 @@
   - /assets/cem.css
   - /assets/packages/@rhds/elements/elements/rh-subnav/rh-subnav-lightdom.css
   - /assets/packages/@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css
+  - /assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css
 eleventyComputed:
   title: "{{ doc.pageTitle }} | {{ doc.slug | deslugify }}"
   importElements:
@@ -18,6 +19,7 @@
     - rh-footer
     - rh-subnav
     - rh-code-block
+    - rh-table
     - "{{ doc.tagName }}"
 ---
 

docs/scss/styles.scss

@@ -148,6 +148,10 @@ body.page-docs rh-cta a[href^="http"]::after {
   white-space: nowrap; /* fix orphan issue on the Feedback shortcode's contact us link */
 }
 
+:is(rh-table) th {
+  font-size: unset;
+}
+
 rh-playground pre {
   max-height: 785px;
 }

elements/rh-table/README.md

@@ -0,0 +1,151 @@
+# Table
+
+A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
+
+## Usage
+
+### Title
+
+Specify the title of the table using a `caption` element.
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <!-- ...table data -->
+  </table>
+</rh-table>
+```
+
+### Column highlighting
+
+To enable column highlighting, the `table` element must also include a `col` element for each column in the table, typically wrapped with a `colgroup`.
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <!-- ...table with three columns -->
+  </table>
+</rh-table>
+```
+
+### Sorting
+
+To enable sorting on a column, add an `rh-sort-button` as the last child of the `th` cell.
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col" data-label="Date">Date</th>
+        <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
+        <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button></th>
+      </tr>
+    </thead>
+    <!-- ...table data sortable by Event and Venue -->
+  </table>
+</rh-table>
+```
+
+### Summary
+
+Additional information about the data in the table should be slotted into the `summary` slot after the `table` element.
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col" data-label="Date">Date</th>
+        <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
+        <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td data-label="Date">12 February</td>
+        <td data-label="Event">Waltz with Strauss</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+      <tr>
+        <td data-label="Date">24 March</td>
+        <td data-label="Event">The Obelisks</td>
+        <td data-label="Venue">West Wing</td>
+      </tr>
+      <tr>
+        <td data-label="Date">14 April</td>
+        <td data-label="Event">The What</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+    </tbody>
+  </table>
+  <small slot="summary">Dates and venues subject to change.</small>
+</rh-table>
+```
+
+## Example
+
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col" data-label="Date">Date</th>
+        <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
+        <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td data-label="Date">12 February</td>
+        <td data-label="Event">Waltz with Strauss</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+      <tr>
+        <td data-label="Date">24 March</td>
+        <td data-label="Event">The Obelisks</td>
+        <td data-label="Venue">West Wing</td>
+      </tr>
+      <tr>
+        <td data-label="Date">14 April</td>
+        <td data-label="Event">The What</td>
+        <td data-label="Venue">Main Hall</td>
+      </tr>
+    </tbody>
+  </table>
+  <small slot="summary">Dates and venues subject to change.</small>
+</rh-table>

elements/rh-table/demo/demo.css

@@ -0,0 +1,11 @@
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h2, p {
+  margin-top: var(--rh-space-5xl, 80px);
+  text-align: center;
+}

elements/rh-table/demo/different-layouts.html

@@ -0,0 +1,131 @@
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="../rh-table-lightdom.css">
+
+<p>The following examples taken from: <a href="https://www.w3.org/WAI/tutorials/tables">https://www.w3.org/WAI/tutorials/tables</a>.</p>
+<section>
+    <h2>Row headers</h2>
+    <rh-table>
+        <table>
+            <col>
+            <col>
+            <col>
+            <thead>
+                <tr>
+                    <th sortable scope="col" data-label="Date">Date</th>
+                    <th sortable scope="col" data-label="Event">Event</th>
+                    <th sortable scope="col" data-label="Venue">Venue</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Date">12 February</td>
+                    <td data-label="Event">
+                        <a href="">Waltz with Strauss</a>
+                    </td>
+                    <td data-label="Venue">Main Hall</td>
+                </tr>
+                <tr>
+                    <td data-label="Date">24 March</td>
+                    <td data-label="Event">The Obelisks</td>
+                    <td data-label="Venue">West Wing</td>
+                </tr>
+                <tr>
+                    <td data-label="Date">14 April</td>
+                    <td data-label="Event">The What</td>
+                    <td data-label="Venue">Main Hall</td>
+                </tr>
+            </tbody>
+        </table>
+    </rh-table>
+</section>
+<section>
+    <h2>Column headers</h2>
+    <p>
+        <strong>Note: </strong>Tables with no <code>thead</code> will not stack on mobile.</p>
+    <rh-table>
+        <table>
+            <tbody>
+                <tr>
+                    <th scope="row">Date</th>
+                    <td>12 February</td>
+                    <td>24 March</td>
+                    <td>14 April</td>
+                </tr>
+                <tr>
+                    <th scope="row">Event</th>
+                    <td>Waltz with Strauss</td>
+                    <td>The Obelisks</td>
+                    <td>The What</td>
+                </tr>
+                <tr>
+                    <th scope="row">Venue</th>
+                    <td>Main Hall</td>
+                    <td>West Wing</td>
+                    <td>Main Hall</td>
+                </tr>
+            </tbody>
+        </table>
+    </rh-table>
+</section>
+<section>
+    <h2>Row and column headers</h2>
+    <rh-table>
+        <table>
+            <caption>Delivery slots:</caption>
+            <col>
+            <col>
+            <col>
+            <col>
+            <col>
+            <col>
+            <thead>
+                <tr>
+                    <td></td>
+                    <th sortable scope="col" data-label="Monday">Monday</th>
+                    <th sortable scope="col" data-label="Tuesday">Tuesday</th>
+                    <th sortable scope="col" data-label="Wednesday">Wednesday</th>
+                    <th sortable scope="col" data-label="Thursday">Thursday</th>
+                    <th sortable scope="col" data-label="Friday">Friday</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">09:00 – 11:00</th>
+                    <td data-label="Monday">Closed</td>
+                    <td data-label="Tuesday">Open</td>
+                    <td data-label="Wednesday">Open</td>
+                    <td data-label="Thursday">Closed</td>
+                    <td data-label="Friday">Closed</td>
+                </tr>
+                <tr>
+                    <th scope="row">11:00 – 13:00</th>
+                    <td data-label="Monday">Open</td>
+                    <td data-label="Tuesday">Open</td>
+                    <td data-label="Wednesday">Closed</td>
+                    <td data-label="Thursday">Closed</td>
+                    <td data-label="Friday">Closed</td>
+                </tr>
+                <tr>
+                    <th cope="row">13:00 – 15:00</th>
+                    <td data-label="Monday">Open</td>
+                    <td data-label="Tuesday">Open</td>
+                    <td data-label="Wednesday">Open</td>
+                    <td data-label="Thursday">Closed</td>
+                    <td data-label="Friday">Closed</td>
+                </tr>
+                <tr>
+                    <th scope="row">15:00 – 17:00</th>
+                    <td data-label="Monday">Closed</td>
+                    <td data-label="Tuesday">Closed</td>
+                    <td data-label="Wednesday">Closed</td>
+                    <td data-label="Thursday">Open</td>
+                    <td data-label="Friday">Open</td>
+                </tr>
+            </tbody>
+        </table>
+    </rh-table>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-table/rh-table.js';
+</script>