Table
On this page
On this page
Overview
A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
Edit element properties
import '@rhds/elements/rh-table/rh-table.js';<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">Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- To organize and display structured data
- If a user needs to scan, examine, and compare data
- If a user must navigate to a specific piece of data to complete a task
Image of table with four columns and three row
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
