Table

Installation

Usage

Warning

Ensure that the table follows the recommendations on the accessibility tab so that the table works with assistive technology.

Title

Specify the title of the table using a caption element.

<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.

<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" data-label="Date">Date</th>
        <th id="concerts-event" scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
        <th id="concerts-venue" 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.

<rh-table>
  <table>
    <caption>
      Concerts
    </caption>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th id="concerts-date" scope="col" data-label="Date">Date</th>
        <th id="concerts-event" scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button></th>
        <th id="concerts-venue" scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="concerts-date" data-label="Date">12 February</td>
        <td headers="concerts-event" data-label="Event">Waltz with Strauss</td>
        <td headers="concerts-venue" data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td headers="concerts-date" data-label="Date">24 March</td>
        <td headers="concerts-event" data-label="Event">The Obelisks</td>
        <td headers="concerts-venue" data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td headers="concerts-date" data-label="Date">14 April</td>
        <td headers="concerts-event" data-label="Event">The What</td>
        <td headers="concerts-venue" data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
  <small slot="summary">Dates and venues subject to change.</small>
</rh-table>

Example

Concerts

Date	Event	Venue
12 February	Waltz with Strauss	Main Hall
24 March	The Obelisks	West Wing
14 April	The What	Main Hall

Dates and venues subject to change.

rh-table

Slots 2

Slot Name	Description
	an HTML table
summary	a brief description of the data

Attributes 0

None

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 3

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

Design Tokens 16

Token	Copy
--rh-border-width-sm
--rh-color-blue-50-rgb
--rh-color-border-subtle-on-light
--rh-color-gray-20-rgb
--rh-color-interactive-blue-darker
--rh-color-interactive-blue-darkest
--rh-font-family-body-text
--rh-font-size-body-text-lg
--rh-font-weight-heading-bold
--rh-line-height-body-text
--rh-opacity-10
--rh-opacity-40
--rh-space-lg
--rh-space-md
--rh-space-xl
--rh-space-xs

Related elements or patterns

• Code block