Table
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-table/rh-table.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-table/rh-table.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
"@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
"@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
"@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
"@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
"@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/",
"@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
"@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
"@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
"@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
"lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
"prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
"prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
"tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
}
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow 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.
Slot Name | Description |
---|---|
|
an HTML table |
summary |
a brief description of the data |
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
|
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
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
sort-direction |
sortDirection |
The button's sorting order |
|
|
column |
column |
The column name associated with this button (for screen readers) |
|
|
Method Name | Description |
---|---|
sort() |
Dispatch a request-sort event in ascending (asc) or descending (desc) order |
Event Name | Description |
---|---|
next |
|
request-sort |
when the button is clicked |
Part Name | Description |
---|---|
sort-button |
button element |
sort-indicator |
icon wrapper element |
Token | Copy |
---|---|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.