Installation

None

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

Default Slot

an HTML table

summary

a brief description of the data

Attributes

None

Methods

None

Events

None

CSS Shadow Parts

None

CSS Custom Properties

CSS Property Description Default
--rh-table-row-background-color

deprecated use --rh-table-row-background-hover-color

224 224 224 / 40%
--rh-table-column-background-color

deprecated use --rh-table-column-background-hover-color

0 102 204 / 10%
--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

Token Copy
--rh-border-width-sm
--rh-color-blue-50-rgb
--rh-color-blue-70-rgb
--rh-color-border-subtle-on-light
--rh-color-gray-20-rgb
--rh-color-gray-50
--rh-color-interactive-blue-darker
--rh-color-interactive-blue-darkest
--rh-color-text-secondary-on-dark
--rh-color-text-secondary-on-light
--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-opacity-10
--rh-opacity-30
--rh-opacity-40
--rh-opacity-50
--rh-space-lg
--rh-space-md
--rh-space-xl
--rh-space-xs
© 2021-2024 Red Hat, Inc. Deploys by Netlify