Skip to main content Red Hat Design System logo Contribute on Github

Table

Overview Style Guidelines CodeDemos Accessibility

Installation

Red Hat CDN

CDN Prerelease

We are currently working on our CDN, which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat associate and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

In the meantime, install this component using npm

The recommended way to load RHDS is via the Red Hat Digital Experience CDN, and using an import map.

If you have full control over the page you are using, add an import map to the <head>, pointing to the CDN, or update any existing import map. If you are not responsible for the page's <head>, request that the page owner makes the change on your behalf.

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/elements/",
      "@patternfly/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@patternfly/elements@2.2.2/"
    }
  }
</script>

Once the import map is established, you can load the element with the following module, containing a bare module specifier:

<script type="module">
  import '@rhds/elements/rh-table/rh-table.js';
</script>

Note that Modules may be placed in the <head>: since they are deferred by default, they will not block rendering.

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/rh-table/rh-table-lightdom.css">
 NPM JSPM

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 Methods 0 Events 0 CSS Shadow Parts 0 CSS Custom Properties 5 Design Tokens 0
© 2021-2024 Red Hat, Inc. Deploys by Netlify