-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
357 changed files
with
11,291 additions
and
246 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
151 changes: 151 additions & 0 deletions
151
assets/packages/@rhds/elements/elements/rh-table/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
44 changes: 44 additions & 0 deletions
44
assets/packages/@rhds/elements/elements/rh-table/demo/column-headers.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <link rel="stylesheet" href="../rh-table-lightdom.css"> | ||
|
|
||
| <style> | ||
| section { | ||
| margin-top: var(--rh-space-5xl, 80px); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| </style> | ||
|
|
||
| <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> | ||
|
|
||
| <script type="module"> | ||
| import '@rhds/elements/rh-table/rh-table.js'; | ||
| </script> |
11 changes: 11 additions & 0 deletions
11
assets/packages/@rhds/elements/elements/rh-table/demo/demo.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
58 changes: 58 additions & 0 deletions
58
assets/packages/@rhds/elements/elements/rh-table/demo/rh-table.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <link rel="stylesheet" href="../rh-table-lightdom.css"> | ||
|
|
||
| <style> | ||
| section { | ||
| margin-top: var(--rh-space-5xl, 80px); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| </style> | ||
|
|
||
| <section> | ||
| <h2>Basic</h2> | ||
| <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> | ||
| </section> | ||
|
|
||
| <script type="module"> | ||
| import '@rhds/elements/rh-table/rh-table.js'; | ||
| </script> |
Empty file.
74 changes: 74 additions & 0 deletions
74
assets/packages/@rhds/elements/elements/rh-table/demo/row-and-column-headers.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <link rel="stylesheet" href="../rh-table-lightdom.css"> | ||
|
|
||
| <style> | ||
| section { | ||
| margin-top: var(--rh-space-5xl, 80px); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| </style> | ||
|
|
||
| <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> |
Oops, something went wrong.