Table

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  3. rh-sort-button
  1. Installation
  2. Usage
  3. rh-sort-button

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-table/rh-table.js';
</script>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

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.

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 24
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-surface
--rh-color-text-primary
--rh-color-text-secondary-on-dark
--rh-color-text-secondary-on-light
--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

Slots 0
None
Attributes 2
Attribute DOM Property Description Type Default
sort-direction sortDirection

The button's sorting order

 
'asc' | 'desc' | undefined
 
unknown
column column

The column name associated with this button (for screen readers)

 
string | undefined
 
unknown
Methods 1
Method Name Description
sort()

Dispatch a request-sort event in ascending (asc) or descending (desc) order
Events 2
Event Name Description
next
request-sort

when the button is clicked
CSS Shadow Parts 2
Part Name Description
sort-button

button element
sort-indicator

icon wrapper element
CSS Custom Properties 0
None
Design Tokens 2
Token Copy
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
Edit this page on GitHub