Organizes structured content so that it is easy to scan, make comparisons, and analyze the data
The default table is medium sized, bordered, full width, and has responsive overflow scrolling.
Test head | Test head |
---|---|
Test content | Test content |
Test content | Test content |
Test content | Test content |
<div>
<cdr-table>
<caption>A sample table</caption>
<thead>
<tr>
<th id="head1" scope="col">Test head</th>
<th id="head2" scope="col">Test head</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="head1">Test content</td>
<td headers="head2">Test content</td>
</tr>
<tr>
<td headers="head1">Test content</td>
<td headers="head2">Test content</td>
</tr>
<tr>
<td headers="head1">Test content</td>
<td headers="head2">Test content</td>
</tr>
</tbody>
</cdr-table>
</div>
Alternating light/dark backgrounds.
Test head | Test head |
---|---|
Test content | Test content |
Test content | Test content |
Test content | Test content |
<div>
<cdr-table striped>
<caption>A sample striped table</caption>
<thead>
<tr>
<th id="stripedhead1" scope="col">Test head</th>
<th id="stripedhead2" scope="col">Test head</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="stripedhead1">Test content</td>
<td headers="stripedhead2">Test content</td>
</tr>
<tr>
<td headers="stripedhead1">Test content</td>
<td headers="stripedhead2">Test content</td>
</tr>
<tr>
<td headers="stripedhead1" >Test content</td>
<td headers="stripedhead2">Test content</td>
</tr>
</tbody>
</cdr-table>
</div>
Adds border between rows
Test head 1 | Test head 2 |
---|---|
Test content | Test content |
Test content | Test content |
Test content | Test content |
<div>
<cdr-table border>
<caption>A sample table displaying a border</caption>
<thead>
<tr>
<th id="borderhead1" scope="col">Test head 1</th>
<th id="borderhead2" scope="col">Test head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="borderhead1">Test content</td>
<td headers="borderhead2">Test content</td>
</tr>
<tr>
<td headers="borderhead1">Test content</td>
<td headers="borderhead2">Test content</td>
</tr>
<tr>
<td headers="borderhead1">Test content</td>
<td headers="borderhead2">Test content</td>
</tr>
</tbody>
</cdr-table>
</div>
This is an advanced example with multiple headers and a custom class to change the background color for headers inside <tbody>
Studio | Apt | Chalet | Villa | |
---|---|---|---|---|
Paris | ||||
1 bedroom | 11 | 20 | 25 | 23 |
2 bedroom | - | 43 | 52 | 32 |
3 bedroom | - | 13 | 15 | 40 |
Rome | ||||
1 bedroom | 13 | 21 | 22 | 3 |
2 bedroom | - | 23 | 43 | 30 |
3 bedroom | - | 16 | 32 | 40 |
<div>
<cdr-table class="advanced-table">
<caption>Availability of holiday accommodation</caption>
<thead>
<tr>
<td></td>
<th id="stud" scope="col">Studio</th>
<th id="apt" scope="col"><abbr title="Apartment">Apt</abbr></th>
<th id="chal" scope="col">Chalet</th>
<th id="villa" scope="col">Villa</th>
</tr>
</thead>
<tbody>
<tr>
<th id="par" colspan="5" scope="colgroup" class="advanced-table__header">Paris</th>
</tr>
<tr>
<th headers="par" id="pbed1" class="advanced-table__header" scope="row">1 bedroom</th>
<td headers="par pbed1 stud">11</td>
<td headers="par pbed1 apt">20</td>
<td headers="par pbed1 chal">25</td>
<td headers="par pbed1 villa">23</td>
</tr>
<tr>
<th headers="par" id="pbed2" class="advanced-table__header" scope="row">2 bedroom</th>
<td headers="par pbed2 stud">-</td>
<td headers="par pbed2 apt">43</td>
<td headers="par pbed2 chal">52</td>
<td headers="par pbed2 villa">32</td>
</tr>
<tr>
<th headers="par" id="pbed3" class="advanced-table__header" scope="row">3 bedroom</th>
<td headers="par pbed3 stud">-</td>
<td headers="par pbed3 apt">13</td>
<td headers="par pbed3 chal">15</td>
<td headers="par pbed3 villa">40</td>
</tr>
<tr>
<th id="rome" colspan="5" scope="colgroup" class="advanced-table__header">Rome</th>
</tr>
<tr>
<th id="rbed1" headers="rome" class="advanced-table__header" scope="row">1 bedroom</th>
<td headers="rome rbed1 stud">13</td>
<td headers="rome rbed1 apt">21</td>
<td headers="rome rbed1 chal">22</td>
<td headers="rome rbed1 villa">3</td>
</tr>
<tr>
<th id="rbed2" headers="rome" class="advanced-table__header" scope="row">2 bedroom</th>
<td headers="rome rbed2 stud">-</td>
<td headers="rome rbed2 apt">23</td>
<td headers="rome rbed2 chal">43</td>
<td headers="rome rbed2 villa">30</td>
</tr>
<tr>
<th id="rbed3" headers="rome" class="advanced-table__header" scope="row">3 bedroom</th>
<td headers="rome rbed3 stud">-</td>
<td headers="rome rbed3 apt">16</td>
<td headers="rome rbed3 chal">32</td>
<td headers="rome rbed3 villa">40</td>
</tr>
</tbody>
</cdr-table>
</div>
Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:
WCAG level A requirements:
<th>
<th scope="col">
and <th scope="row">
) is highly recommended, though not always necessary (i.e. if all cells in the first row are marked as <th>
without scope, most modern screen readers will infer that the scope is the column below each header cell).WCAG level AA requirements:
<table>
.
Note: Even if the data are not represented in a table, WCAG 1.3.1 requires the data to be associated with their labels.<caption>
or name (e.g. via aria-label or aria-labelledby).<caption>
of a table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly.This component has compliance with WCAG guidelines by:
cdr-table
like cdr-grid
is a wrapper component without predetermined layout requirements. This allows you the flexibility to construct the structure you need to accurately display the data you have. There are cases where you might need to change background colors or add additional borders (see the advanced example). When this is done, tokens for the table colors (background, border, etc.) should be used so your customizations can persist through future cedar updates.striped
name
Boolean
type
false
default
Sets row colors to alternate between darker and lighter backgrounds. Striping will not apply when `border` is true
border
name
Boolean
type
true
default
Adds borders between rows. Will disable `striped` if both are true
full-width
name
Boolean, string
type
true
default
Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' }
responsive
name
Boolean
type
true
default
Makes the table scroll horizontally when it would overflow its container
hover
name
Boolean
type
false
default
Adds a darker background on row hover
size
name
string
type
'medium'
default
Sets the table size (cell padding); values can target responsive breakpoints. Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' | 'large@sm' }