Table
On this page
On this page
Title
Specify the title of the table using a <caption> element.
<rh-table>
<table>
<caption>
Concerts
</caption>
<!-- ...table data -->
</table>
</rh-table>Responsive tables
<rh-table> will automatically reformat to a "stacked" presentation in narrow
containers such as on small screens and mobile devices or in page sidebars. For
simple table structures, each table cell heading will be auto-generated for its
responsive layout.
For complex tables (i.e., including colspan or rowspan attributes), or to
customize or override individual table cell headings on mobile devices, use a
data-label attribute on the <td> elements to label them.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">Venue<rh-sort-button></rh-sort-button></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="concerts-date">12 February</td>
<td headers="concerts-event">Waltz with Strauss</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
<tr>
<td headers="concerts-date">24 March</td>
<td headers="concerts-event">The Obelisks</td>
<td headers="concerts-venue">West Wing</td>
</tr>
<tr>
<td headers="concerts-date" data-label="Custom heading 1">14 April</td>
<td headers="concerts-event" data-label="Custom heading 2">The What</td>
<td headers="concerts-venue" data-label="Custom heading 3">Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</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>.
<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.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">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.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">Venue<rh-sort-button></rh-sort-button></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="concerts-date">12 February</td>
<td headers="concerts-event">Waltz with Strauss</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
<tr>
<td headers="concerts-date">24 March</td>
<td headers="concerts-event">The Obelisks</td>
<td headers="concerts-venue">West Wing</td>
</tr>
<tr>
<td headers="concerts-date">14 April</td>
<td headers="concerts-event">The What</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</rh-table>Importing
Add rh-table to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-table/rh-table.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-table/rh-table-lightdom.css">Usage
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Event<rh-sort-button></rh-sort-button>
</th>
<th scope="col">Venue<rh-sort-button></rh-sort-button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>12 February</td>
<td>Waltz with Strauss</td>
<td>Main Hall</td>
</tr>
<tr>
<td>24 March</td>
<td>The Obelisks</td>
<td>West Wing</td>
</tr>
<tr>
<td>14 April</td>
<td>The What</td>
<td>Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</rh-table>
<link rel="stylesheet" href="../rh-table-lightdom.css">
<script type="module">
import '@rhds/elements/rh-table/rh-table.js';
</script>Title
Specify the title of the table using a <caption> element.
<rh-table>
<table>
<caption>
Concerts
</caption>
<!-- ...table data -->
</table>
</rh-table>Responsive tables
<rh-table> will automatically reformat to a "stacked" presentation in narrow
containers such as on small screens and mobile devices or in page sidebars. For
simple table structures, each table cell heading will be auto-generated for its
responsive layout.
For complex tables (i.e., including colspan or rowspan attributes), or to
customize or override individual table cell headings on mobile devices, use a
data-label attribute on the <td> elements to label them.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">Venue<rh-sort-button></rh-sort-button></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="concerts-date">12 February</td>
<td headers="concerts-event">Waltz with Strauss</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
<tr>
<td headers="concerts-date">24 March</td>
<td headers="concerts-event">The Obelisks</td>
<td headers="concerts-venue">West Wing</td>
</tr>
<tr>
<td headers="concerts-date" data-label="Custom heading 1">14 April</td>
<td headers="concerts-event" data-label="Custom heading 2">The What</td>
<td headers="concerts-venue" data-label="Custom heading 3">Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</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>.
<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.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">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.
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th id="concerts-date" scope="col">Date</th>
<th id="concerts-event" scope="col">Event<rh-sort-button></rh-sort-button></th>
<th id="concerts-venue" scope="col">Venue<rh-sort-button></rh-sort-button></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="concerts-date">12 February</td>
<td headers="concerts-event">Waltz with Strauss</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
<tr>
<td headers="concerts-date">24 March</td>
<td headers="concerts-event">The Obelisks</td>
<td headers="concerts-venue">West Wing</td>
</tr>
<tr>
<td headers="concerts-date">14 April</td>
<td headers="concerts-event">The What</td>
<td headers="concerts-venue">Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</rh-table>rh-table
A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
| Slot Name | Description |
|---|---|
|
an HTML table |
summary |
a brief description of the data |
| CSS Property | Description | Default |
|---|---|---|
--rh-table-row-background-hover-color |
row hover background color |
224 224 224 / 40%
|
--rh-table-column-background-hover-color |
column hover background color |
0 102 204 / 10%
|
--rh-table-row-border |
row border |
1px solid #c7c7c7
|
| Token | Copy |
|---|---|
--rh-border-width-sm
|
|
--rh-color-blue-50
|
|
--rh-color-blue-70
|
|
--rh-color-border-subtle
|
|
--rh-color-border-subtle-on-light
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-color-white
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-body-text-regular
|
|
--rh-font-weight-heading-bold
|
|
--rh-line-height-body-text
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
--rh-space-xs
|
|
rh-sort-button
Table sort button
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
sort-direction |
sortDirection |
The button's sorting order |
|
|
column |
column |
The column name associated with this button (for screen readers) |
|
|
| Method Name | Description |
|---|---|
sort() |
Dispatch a request-sort event in ascending (asc) or descending (desc) order |
| Event Name | Description |
|---|---|
next |
|
request-sort |
when the button is clicked |
| Part Name | Description |
|---|---|
sort-button |
button element |
sort-indicator |
icon wrapper element |
| Token | Copy |
|---|---|
--rh-color-text-primary
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
