Table

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

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

npm install @rhds/elements

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

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

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-table/rh-table.js": "./elements/rh-table/rh-table.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/"
    }
  }
}
</script>

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

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

Specify the title of the table using a <caption> element.

<rh-table>
  <table>
    <caption>
      Concerts
    </caption>
    <!-- ...table data -->
  </table>
</rh-table>

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

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>

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>

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>