Table

Overview

Style

Guidelines

Code

Accessibility

Demos

Table

Auto Data Labels

Color Context

Column Headers

Headers And Summary But No Title

Horizontal Overflow

Localized Sort

No Title Headers Or Summary

Row And Column Headers

Row Headers

Title And Summary But No Headers

Title Headers And Summary

Vertical Overflow

Table

Auto Data Labels

Color Context

Column Headers

Headers And Summary But No Title

Horizontal Overflow

Localized Sort

No Title Headers Or Summary

Row And Column Headers

Row Headers

Title And Summary But No Headers

Title Headers And Summary

Vertical Overflow

Table

Default table with sortable columns, a caption, column groups, and a summary slot.

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

import { SortButton } from "@rhds/elements/react/rh-sort-button/rh-sort-button.js";
import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <caption>Concerts</caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col">Date</th>
<th scope="col">
  Event
  <SortButton />
</th>
<th scope="col">
  Venue
  <SortButton />
</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>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Auto Data Labels

Demonstrates automatic data-label assignment from column headers, with rowspan, colspan, and complex thead examples.

import '@rhds/elements/rh-table/rh-table.js';

<h2>Basic table</h2>
<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Event</th>
        <th scope="col">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>12 February</td>
        <td>
<a href="">Waltz with Strauss</a>
        </td>
        <td>Main Hall</td>
      </tr>
      <tr>
        <td>24 March</td>
        <td>The Obelisks</td>
        <td>West Wing</td>
      </tr>
      <tr>
        <td data-label="Custom 1">14 April</td>
        <td data-label="Custom 2">The What</td>
        <td data-label="Custom 3">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<h2>Table with <code>rowspans</code></h2>
<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Event</th>
        <th scope="col">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>12 February</td>
        <td rowspan="2">
<a href="">Waltz with Strauss</a>
        </td>
        <td>Main Hall</td>
      </tr>
      <tr>
        <td>24 March</td>
        <td>West Wing</td>
      </tr>
      <tr>
        <td data-label="Custom 1">14 April</td>
        <td data-label="Custom 2">The What</td>
        <td data-label="Custom 3">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<h2>Table with <code>colspans</code></h2>
<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Event</th>
        <th scope="col">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>12 February</td>
        <td>
<a href="">Waltz with Strauss</a>
        </td>
        <td>Main Hall</td>
      </tr>
      <tr>
        <td>24 March</td>
        <td colspan="2">The Obelisks in the West Wing</td>
      </tr>
      <tr>
        <td>14 April</td>
        <td>The What</td>
        <td>Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<h2>Table with a complicated <code>thead</code></h2>
<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th scope="col"></th>
        <th id="th-when-where" scope="col" colspan="2">When &amp; where</th>
      </tr>
      <tr>
        <th id="th-event" scope="col">Event</th>
        <th id="th-date" scope="col">Date</th>
        <th id="th-venue" scope="col">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th headers="th-event" id="th-event-waltz" scope="row">
<a href="">Waltz with Strauss</a>
        
        </th><td headers="th-event-waltz th-when-where th-date">12 February</td>
        <td headers="th-event-waltz th-when-where th-venue">Main Hall</td>
      </tr>
      <tr>
        <th headers="th-event" id="th-event-obelisks" scope="row">The Obelisks
        </th><td headers="th-event-obelisks th-when-where th-date">24 March</td>
        <td headers="th-event-obelisks th-when-where th-venue">West Wing</td>
      </tr>
      <tr>
        <th headers="th-event" id="th-event-thewhat" scope="row" data-label="Custom event">The What
        </th><td headers="th-event-thewhat th-when-where th-date" data-label="Custom date">14 April</td>
        <td headers="th-event-thewhat th-when-where th-venue" data-label="Custom location">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <h2>Basic table</h2>
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td>12 February</td>
<td><a href>Waltz with Strauss</a></td>
<td>Main Hall</td>
        </tr>
        <tr>
<td>24 March</td>
<td>The Obelisks</td>
<td>West Wing</td>
        </tr>
        <tr>
<td data-label="Custom 1">14 April</td>
<td data-label="Custom 2">The What</td>
<td data-label="Custom 3">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <h2>Table with<code>rowspans</code></h2>
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td>12 February</td>
<td rowspan="2"><a href>Waltz with Strauss</a></td>
<td>Main Hall</td>
        </tr>
        <tr>
<td>24 March</td>
<td>West Wing</td>
        </tr>
        <tr>
<td data-label="Custom 1">14 April</td>
<td data-label="Custom 2">The What</td>
<td data-label="Custom 3">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <h2>Table with<code>colspans</code></h2>
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td>12 February</td>
<td><a href>Waltz with Strauss</a></td>
<td>Main Hall</td>
        </tr>
        <tr>
<td>24 March</td>
<td colspan="2">The Obelisks in the West Wing</td>
        </tr>
        <tr>
<td>14 April</td>
<td>The What</td>
<td>Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <h2>Table with a complicated<code>thead</code></h2>
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col" />
<th id="th-when-where" scope="col" colspan="2">When & where</th>
        </tr>
        <tr>
<th id="th-event" scope="col">Event</th>
<th id="th-date" scope="col">Date</th>
<th id="th-venue" scope="col">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<th headers="th-event" id="th-event-waltz" scope="row"><a href>Waltz with Strauss</a></th>
<td headers="th-event-waltz th-when-where th-date">12 February</td>
<td headers="th-event-waltz th-when-where th-venue">Main Hall</td>
        </tr>
        <tr>
<th headers="th-event" id="th-event-obelisks" scope="row">The Obelisks</th>
<td headers="th-event-obelisks th-when-where th-date">24 March</td>
<td headers="th-event-obelisks th-when-where th-venue">West Wing</td>
        </tr>
        <tr>
<th headers="th-event" id="th-event-thewhat" scope="row" data-label="Custom event">The What</th>
<td headers="th-event-thewhat th-when-where th-date" data-label="Custom date">14 April</td>
<td headers="th-event-thewhat th-when-where th-venue" data-label="Custom location">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Color Context

Table rendered across light, dark, and other color contexts using rh-context-demo.

import '@rhds/elements/rh-table/rh-table.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <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><a href="#">Main</a> Hall</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">Dates and venues subject to change.</small>
  </rh-table>
</rh-context-demo>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { SortButton } from "@rhds/elements/react/rh-sort-button/rh-sort-button.js";
import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Table>
      <table>
        <caption>Concerts</caption>
        <colgroup>
<col />
<col />
<col />
        </colgroup>
        <thead>
<tr>
  <th scope="col">Date</th>
  <th scope="col">
    Event
    <SortButton />
  </th>
  <th scope="col">
    Venue
    <SortButton />
  </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><a href="#">Main</a>Hall</td>
</tr>
        </tbody>
      </table>
      <small slot="summary">Dates and venues subject to change.</small>
    </Table>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Column Headers

Table with row headers using scope=row attributes. Tables without thead will not stack on mobile.

import '@rhds/elements/rh-table/rh-table.js';

<p>
  <strong>Note: </strong> Tables with no <code>thead</code> will not stack on mobile.
</p>

<rh-table>
  <table>
    <tbody>
      <tr>
        <th scope="row">Date</th>
        <td>12 February</td>
        <td>24 March</td>
        <td>14 April</td>
      </tr>
      <tr>
        <th scope="row">Event</th>
        <td>Waltz with Strauss</td>
        <td>The Obelisks</td>
        <td>The What</td>
      </tr>
      <tr>
        <th scope="row">Venue</th>
        <td>Main Hall</td>
        <td>West Wing</td>
        <td>Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>




<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <p>
    <strong>Note:</strong>
    Tables with no
    <code>thead</code>
    will not stack on mobile.
  </p>
  <Table>
    <table>
      <tbody>
        <tr>
<th scope="row">Date</th>
<td>12 February</td>
<td>24 March</td>
<td>14 April</td>
        </tr>
        <tr>
<th scope="row">Event</th>
<td>Waltz with Strauss</td>
<td>The Obelisks</td>
<td>The What</td>
        </tr>
        <tr>
<th scope="row">Venue</th>
<td>Main Hall</td>
<td>West Wing</td>
<td>Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Headers And Summary But No Title

Table with column headers and a summary slot but no caption title.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th scope="col" data-label="Date">Date</th>
        <th scope="col" data-label="Event">Event</th>
        <th scope="col" data-label="Venue">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Date">12 February</td>
        <td data-label="Event">
<a href="">Waltz with Strauss</a>
        </td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Date">24 March</td>
        <td data-label="Event">The Obelisks</td>
        <td data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td data-label="Date">14 April</td>
        <td data-label="Event">The What</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col" data-label="Date">Date</th>
<th scope="col" data-label="Event">Event</th>
<th scope="col" data-label="Venue">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td data-label="Date">12 February</td>
<td data-label="Event"><a href>Waltz with Strauss</a></td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
        </tr>
        <tr>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Horizontal Overflow

Table with many columns constrained to 500px width, demonstrating horizontal scrollbar overflow.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table style="width:500px">
  <table>
    <tbody>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table style="width:500px">
    <table>
      <tbody>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Localized Sort

Localized sort buttons using the accessible-label slot to provide translated button text that updates with sort direction.

import '@rhds/elements/rh-table/rh-table.js';

const LABELS = new Map(Object.entries({
  asc: 'ממוין בסדר עולה',
  desc: 'ממוין בסדר יורד',
}));

document.querySelector('rh-table').addEventListener('request-sort', async function (event) {
  await this.updateComplete;
  await event.target.updateComplete;
  if (!event.defaultPrevented) {
    for (const button of this.querySelectorAll('rh-sort-button')) {
      const label = button.querySelector('[slot="accessible-label"]');
      if (button === event.target) {
        label.textContent = LABELS.get(event.direction);
      } else {
        label.textContent = 'מיון';
      }
    }
  }
});

<rh-table dir="rtl" lang="he">
  <table>
    <caption>
      הופעות
    </caption>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th scope="col">תאריך</th>
        <th scope="col">אירוע<rh-sort-button><span slot="accessible-label">מיון</span></rh-sort-button>
        </th>
        <th scope="col">מיקום<rh-sort-button><span slot="accessible-label">מיון</span></rh-sort-button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>12 בפברואר</td>
        <td>ואלס עם שטראוס</td>
        <td>האולם הראשי</td>
      </tr>
      <tr>
        <td>24 במרץ</td>
        <td>האובליסקים</td>
        <td>האגף המערבי</td>
      </tr>
      <tr>
        <td>14 באפריל</td>
        <td>ה-What</td>
        <td>האולם הראשי</td>
      </tr>
    </tbody>
  </table>
  <small slot="summary">התאריכים והמיקומים עשויים להשתנות.</small>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { SortButton } from "@rhds/elements/react/rh-sort-button/rh-sort-button.js";
import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table dir="rtl" lang="he">
    <table>
      <caption>הופעות</caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col">תאריך</th>
<th scope="col">
  אירוע
  <SortButton><span slot="accessible-label">מיון</span></SortButton>
</th>
<th scope="col">
  מיקום
  <SortButton><span slot="accessible-label">מיון</span></SortButton>
</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td>12 בפברואר</td>
<td>ואלס עם שטראוס</td>
<td>האולם הראשי</td>
        </tr>
        <tr>
<td>24 במרץ</td>
<td>האובליסקים</td>
<td>האגף המערבי</td>
        </tr>
        <tr>
<td>14 באפריל</td>
<td>ה-What</td>
<td>האולם הראשי</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">התאריכים והמיקומים עשויים להשתנות.</small>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

No Title Headers Or Summary

Minimal table with no caption, no column headers, and no summary slot.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><tbody>
      <tr>
        <td data-label="Date">12 February</td>
        <td data-label="Event">
<a href="">Waltz with Strauss</a>
        </td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Date">24 March</td>
        <td data-label="Event">The Obelisks</td>
        <td data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td data-label="Date">14 April</td>
        <td data-label="Event">The What</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <tbody>
        <tr>
<td data-label="Date">12 February</td>
<td data-label="Event"><a href>Waltz with Strauss</a></td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
        </tr>
        <tr>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Row And Column Headers

Table with both row and column headers, demonstrating a schedule-style data layout with a caption.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <caption>Delivery slots:</caption>
    <colgroup><col>
    <col>
    <col>
    <col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <td></td>
        <th sortable="" scope="col" data-label="Monday">Monday</th>
        <th sortable="" scope="col" data-label="Tuesday">Tuesday</th>
        <th sortable="" scope="col" data-label="Wednesday">Wednesday</th>
        <th sortable="" scope="col" data-label="Thursday">Thursday</th>
        <th sortable="" scope="col" data-label="Friday">Friday</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" data-label="Time">09:00 – 11:00</th>
        <td data-label="Monday">Closed</td>
        <td data-label="Tuesday">Open</td>
        <td data-label="Wednesday">Open</td>
        <td data-label="Thursday">Closed</td>
        <td data-label="Friday">Closed</td>
      </tr>
      <tr>
        <th scope="row" data-label="Time">11:00 – 13:00</th>
        <td data-label="Monday">Open</td>
        <td data-label="Tuesday">Open</td>
        <td data-label="Wednesday">Closed</td>
        <td data-label="Thursday">Closed</td>
        <td data-label="Friday">Closed</td>
      </tr>
      <tr>
        <th scope="row" data-label="Time">13:00 – 15:00</th>
        <td data-label="Monday">Open</td>
        <td data-label="Tuesday">Open</td>
        <td data-label="Wednesday">Open</td>
        <td data-label="Thursday">Closed</td>
        <td data-label="Friday">Closed</td>
      </tr>
      <tr>
        <th scope="row" data-label="Time">15:00 – 17:00</th>
        <td data-label="Monday">Closed</td>
        <td data-label="Tuesday">Closed</td>
        <td data-label="Wednesday">Closed</td>
        <td data-label="Thursday">Open</td>
        <td data-label="Friday">Open</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <caption>Delivery slots:</caption>
      <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<td />
<th sortable scope="col" data-label="Monday">Monday</th>
<th sortable scope="col" data-label="Tuesday">Tuesday</th>
<th sortable scope="col" data-label="Wednesday">Wednesday</th>
<th sortable scope="col" data-label="Thursday">Thursday</th>
<th sortable scope="col" data-label="Friday">Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<th scope="row" data-label="Time">09:00 – 11:00</th>
<td data-label="Monday">Closed</td>
<td data-label="Tuesday">Open</td>
<td data-label="Wednesday">Open</td>
<td data-label="Thursday">Closed</td>
<td data-label="Friday">Closed</td>
        </tr>
        <tr>
<th scope="row" data-label="Time">11:00 – 13:00</th>
<td data-label="Monday">Open</td>
<td data-label="Tuesday">Open</td>
<td data-label="Wednesday">Closed</td>
<td data-label="Thursday">Closed</td>
<td data-label="Friday">Closed</td>
        </tr>
        <tr>
<th scope="row" data-label="Time">13:00 – 15:00</th>
<td data-label="Monday">Open</td>
<td data-label="Tuesday">Open</td>
<td data-label="Wednesday">Open</td>
<td data-label="Thursday">Closed</td>
<td data-label="Friday">Closed</td>
        </tr>
        <tr>
<th scope="row" data-label="Time">15:00 – 17:00</th>
<td data-label="Monday">Closed</td>
<td data-label="Tuesday">Closed</td>
<td data-label="Wednesday">Closed</td>
<td data-label="Thursday">Open</td>
<td data-label="Friday">Open</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Row Headers

Table with column headers using scope=col, col elements for hover highlighting, and links in cells.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <colgroup><col>
    <col>
    <col>
    </colgroup><thead>
      <tr>
        <th sortable="" scope="col" data-label="Date">Date</th>
        <th sortable="" scope="col" data-label="Event">Event</th>
        <th sortable="" scope="col" data-label="Venue">Venue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Date">12 February</td>
        <td data-label="Event">
<a href="">Waltz with Strauss</a>
        </td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Date">24 March</td>
        <td data-label="Event">The Obelisks</td>
        <td data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td data-label="Date">14 April</td>
        <td data-label="Event">The What</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th sortable scope="col" data-label="Date">Date</th>
<th sortable scope="col" data-label="Event">Event</th>
<th sortable scope="col" data-label="Venue">Venue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td data-label="Date">12 February</td>
<td data-label="Event"><a href>Waltz with Strauss</a></td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
        </tr>
        <tr>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Title And Summary But No Headers

Table with a caption title and summary slot but no column headers.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <caption>Concerts</caption>
    <colgroup><col>
    <col>
    <col>
    </colgroup><tbody>
      <tr>
        <td data-label="Date">12 February</td>
        <td data-label="Event">
<a href="">Waltz with Strauss</a>
        </td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Date">24 March</td>
        <td data-label="Event">The Obelisks</td>
        <td data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td data-label="Date">14 April</td>
        <td data-label="Event">The What</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
  <small slot="summary">Dates and venues subject to change. Anything longer should wrap.</small>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <caption>Concerts</caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <tbody>
        <tr>
<td data-label="Date">12 February</td>
<td data-label="Event"><a href>Waltz with Strauss</a></td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
        </tr>
        <tr>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">Dates and venues subject to change. Anything longer should wrap.</small>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Title Headers And Summary

Table with a caption title, column headers with sort buttons, and a summary slot for supplementary context.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table>
  <table>
    <caption>Concerts</caption>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th scope="col" data-label="Date">Date</th>
        <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button>
        </th>
        <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Date">12 February</td>
        <td data-label="Event">
<a href="#">Waltz with Strauss</a>
        </td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Date">24 March</td>
        <td data-label="Event">The Obelisks</td>
        <td data-label="Venue">West Wing</td>
      </tr>
      <tr>
        <td data-label="Date">14 April</td>
        <td data-label="Event">The What</td>
        <td data-label="Venue">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">

import { SortButton } from "@rhds/elements/react/rh-sort-button/rh-sort-button.js";
import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table>
    <table>
      <caption>Concerts</caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
<th scope="col" data-label="Date">Date</th>
<th scope="col" data-label="Event">
  Event
  <SortButton />
</th>
<th scope="col" data-label="Venue">
  Venue
  <SortButton />
</th>
        </tr>
      </thead>
      <tbody>
        <tr>
<td data-label="Date">12 February</td>
<td data-label="Event"><a href="#">Waltz with Strauss</a></td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Date">24 March</td>
<td data-label="Event">The Obelisks</td>
<td data-label="Venue">West Wing</td>
        </tr>
        <tr>
<td data-label="Date">14 April</td>
<td data-label="Event">The What</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">Dates and venues subject to change.</small>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Vertical Overflow

Table with many rows constrained to 500px height, demonstrating vertical scrollbar overflow.

import '@rhds/elements/rh-table/rh-table.js';

<rh-table style="height:500px">
  <table>
    <tbody>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
      <tr>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
        <td data-label="Venue">Main Hall</td>
      </tr>
    </tbody>
  </table>
</rh-table>

<link rel="stylesheet" href="../rh-table-lightdom.css">

import { Table } from "@rhds/elements/react/rh-table/rh-table.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Table style="height:500px">
    <table>
      <tbody>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
<td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
  </Table>
  <link rel="stylesheet" href="../rh-table-lightdom.css" />
);

Edit this page on GitHub

Table

Table

Auto Data Labels

Color Context

Column Headers

Headers And Summary But No Title

Horizontal Overflow

Localized Sort

No Title Headers Or Summary

Row And Column Headers

Row Headers

Title And Summary But No Headers

Title Headers And Summary

Vertical Overflow

Other libraries

Feedback

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links

Table

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links