Table
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
A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
| Slot Name | Summary | Description |
|---|---|---|
|
an HTML table |
|
summary |
description of the data |
| Part Name | Summary | Description |
|---|---|---|
container |
| CSS Property | Description | Default |
|---|---|---|
--rh-table-row-border |
row border |
var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7)
|
--rh-table-row-background-hover-color |
row hover background color |
rgba(from var(--rh-color-gray-40, #a3a3a3) r g b / 0.1)
|
--rh-table-column-background-hover-color |
column hover background color |
rgba(from var(--rh-color-blue-50, #0066cc) r g b / 0.1)
|
| Token | Copy |
|---|---|
--rh-color-text-primary
|
|
--rh-color-gray-50
|
|
--rh-color-border-subtle
|
|
--rh-border-width-sm
|
|
--rh-color-border-subtle-on-light
|
|
--rh-color-gray-40
|
|
--rh-color-white
|
|
--rh-color-blue-50
|
|
--rh-color-blue-70
|
|
--rh-space-xl
|
|
--rh-space-lg
|
|
--rh-color-text-secondary
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-body-text-regular
|
|
--rh-line-height-body-text
|
|
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 |
|---|---|
request-sort |
when the button is clicked |
| Part Name | Summary | 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.
