Table Component
Basic Default Table
A basic table is a static table with no additional features.
| Seller | Item | Status | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo |  Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
| Nintendo |  Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft |  Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Compact Density Table
A compact density table is a table with reduced spacing to allow for more rows to be displayed in a smaller space. You can make tables more compact by adding the table--density-compact modifier class to module.
| Seller | Item | Status | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--density-compact"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Relaxed Density Table
A relaxed density table is a table with increased spacing to allow for larger rows. You can make tables relaxed density by adding the table--density-relaxed modifier class to module.
| Seller | Item | Status | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--density-relaxed"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table with a Frozen Header
A table with a frozen header allows the header row to persist in a sticky manner while scrolling vertically through the table. You can make headers frozen by adding the table--frozen-header modifier class to module. When added, the table wrapper will get a fixed max-height allowing the contents inside to scroll. The header will be fixed to the top of the table wrapper.
| Seller | Item | Status | List Count | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | ||
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 | |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 | |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 | |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--frozen-header"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgLandscapePic" alt="Nintendo SNES" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo SNES Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table with Constrained Height
You may constrain the height of the table, which will constrain the table to a percentage of the viewport height as opposed to allowing the full table contents to be fully visible. This is typically used in a table with a frozen header. To do so, add a table--constrained-height modifier class to module.
| Seller | Item | Status | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--frozen-header table--constrained-height"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
</div>
</div>
</td>
<td class="table-cell table-cell--numeric">$89.85</td>
<td class="table-cell table-cell--numeric">45</td>
<td class="table-cell">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">200</div>
</td>
<td class="table-cell table-cell--numeric">5</td>
<td class="table-cell table-cell--numeric">$18.95</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/11 - 4/15</td>
</tr>
<tr>
<th class="table-cell">Microsoft</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgSquarePic" alt="Microsoft XBOX 360" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Microsoft XBOX 360 Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table with a Frozen Column
You may freeze any one of the first three column so it is always present when scrolling by adding table--freeze-column-x modifier class to module, where x is the column you'd like to freeze.
| Seller | Item | Status | List Price | Quantity Available | Orders | Watchers | Protection | Shipping | Delivery |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--freeze-column-1"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
<th class="table-cell table-cell--numeric">Watchers</th>
<th class="table-cell table-cell--numeric">Protection</th>
<th class="table-cell">Shipping</th>
<th class="table-cell">Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<span class="signal signal--time-sensitive"> Backorder </span>
</div>
</div>
</td>
<td class="table-cell table-cell--numeric">$499.99</td>
<td class="table-cell table-cell--numeric">345</td>
<td class="table-cell">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</td>
<td class="table-cell table-cell--numeric">205</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/17 - 4/25</td>
</tr>
<tr>
<th class="table-cell">Microsoft</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Microsoft XBOX One" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Microsoft XBOX One Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--time-neutral"> Preparing </span>
</td>
<td class="table-cell table-cell--numeric">$499.99</td>
<td class="table-cell table-cell--numeric">399</td>
<td class="table-cell">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</td>
<td class="table-cell table-cell--numeric">407</td>
<td class="table-cell table-cell--numeric">$27.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/9 - 4/11</td>
</tr>
<tr>
<th class="table-cell">Sony</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgLandscapePic" alt="Sony Playstation 5" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Sony Playstation 5 Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Sortable Table
A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <thead> > <th> . Additionally, for accessibility purposes, aria-sort="ascending" or aria-sort="descending" should be added respectively to the <th> to reflect the current sort order.
If using anchors to sort the table with a page refresh, you would forgo the pressed state and just do <a href="my-url">Seller...</a> . Additionally, you'd need to change the aria-sort attribute to match the sort order after the page refresh.
| Nintendo | Nintendo Switch Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $287.96 | 300 | 95 | $17.99 | FREE | 4/1 - 4/5 | |
|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Nintendo SNES Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Ready to Ship | $89.85 | 45 | 200 | 5 | $18.95 | FREE | 4/11 - 4/15 |
| Microsoft | Microsoft XBOX 360 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Backorder | $499.99 | 345 | 100 | 205 | $17.99 | FREE | 4/17 - 4/25 |
| Microsoft | Microsoft XBOX One Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Preparing | $499.99 | 399 | 100 | 407 | $27.99 | FREE | 4/9 - 4/11 |
| Sony | Sony Playstation 5 Brand New Gaming System with Four Controllers SKU : A43BTR5678 • Quantity : 1 | Restocking | $519.99 | 205 | 100 | 265 | $29.99 | FREE | 4/11 - 4/15 |
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th class="table-cell" aria-sort="descending">
<button type="button">
Seller
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-down-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Item
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Status
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
List Price
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Quantity Available
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Orders
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Watchers
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Protection
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button">
Shipping
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-up-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Delivery
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a href="https://ebay.com"> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table in Loading State
When a table is fetching data for sorting, filtering, or pagination, a loading state should be displayed to indicate that the table is in the process of loading. This can be achieved by adding the table--loading-state class to the .table element.
Additionally, in the loading state, the module should be inaccessible to the user. This can be achieved by adding the inert attribute to the <table> as well as aria-hidden="true" . Since inert is not fully supported in older browsers, it is recommended to either use a polyfill or use JavaScript to disable all interactive elements inside the table when in loading state. Elements that support disabled should be disabled. Anchors should have their href attributes removed.
Anchors that need to have their href attributes removed during loading, may require those href attributes to be restored once the loading state is done. For example, table head anchors that do server-side sorting/filtering. A good way to make those links inaccessible is to rename href to some other attribute, such as data-href during loading, and then revert them all back to href when loading state is complete.
Here are some other steps to manually ensure the module is inaccessible:
- All interactive elements inside table should be forced to NOT be focusable.
- The module container should be forced to be unscrollable.
- The progress bar should be forced to gain focus.
- All interactive elements inside the table should be disabled.
The loading state should be displayed until the data is fully loaded. In addition to the loading state being set on the table, a progress bar expressive should be added to relay the loading state both visually and for screen readers. The progress bar expressive should be placed inside an a live region, such as <div role="status"></div> .
<div
class="table table--loading-state"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table aria-hidden="true" inert>
<thead>
<tr>
<th class="table-cell" aria-sort="descending">
<button type="button" disabled>
Seller
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-down-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button" disabled>
Item
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button" disabled>
Status
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button" disabled>
List Price
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button" disabled>
Quantity Available
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button" disabled>
Orders
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button" disabled>
Watchers
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button" disabled>
Protection
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button" disabled>
Shipping
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-up-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button" disabled>
Delivery
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">
<div class="table-cell__layout">
<div class="table-cell__thumbnail">
<img src="imgProfilePic" alt="Nintendo Switch" />
</div>
<div class="table-cell__multiline">
<div class="table-cell__data">
Nintendo Switch Brand New Gaming System with Four Controllers
</div>
<div class="table-cell__data table-cell__data--secondary">
SKU : A43BTR5678 • Quantity : 1
</div>
</div>
</div>
</td>
<td class="table-cell">
<span class="signal signal--recent"> Ready to Ship </span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
<div class="table__multiline">
<div class="table-cell__data">
<a> 00-10542-89507 </a>
</div>
<div class="table-cell__data table-cell__data--secondary">100</div>
</div>
</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
<div role="status">
<div class="progress-bar-expressive">
<div
role="progressbar"
aria-label="Loading..."
class="progress-bar-expressive__progress"
>
<div class="progress-bar-expressive__lines">
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
<div class="progress-bar-expressive__line" />
</div>
</div>
</div>
</div>
</div>
Table in Selection Mode
A table can be put into 'selection mode' by adding the class table--mode-selection to the component parent. This will make slight spacing accommodations for the layout.
A table in selection mode allows users to select rows within a table. This is useful when users need to perform actions on selected rows.
The first column of the table will contain a checkbox that allows users to select the row. The first row of the table will contain a checkbox that allows users to select all rows. The checkbox in the table header should have an aria-label of something like, "Select all rows" while all other checkboxes should have an aria-label of something like, "Select row".
Each row should have one column that is its unique idenitifier. That column should typically be the first static column in the row. That column should be indicated using <th scope="row"> element, which affords various accessibility benefits.
| Nintendo | Switch | $287.96 | 300 | 207 | 95 | $17.99 | FREE | 4/1 - 4/5 | ||
|---|---|---|---|---|---|---|---|---|---|---|
| Nintendo | SNES | $89.85 | 45 | 17 | 5 | $18.95 | FREE | 4/11 - 4/15 | ||
| Microsoft | XBOX 360 | $499.99 | 345 | 455 | 205 | $17.99 | FREE | 4/17 - 4/25 | ||
| Microsoft | XBOX One | $499.99 | 399 | 407 | 305 | $27.99 | FREE | 4/9 - 4/11 | ||
| Sony | Playstation 5 | $519.99 | 205 | 265 | 199 | $29.99 | FREE | 4/11 - 4/15 |
<div
class="table table--mode-selection"
role="group"
aria-label="Video games for sale"
tabindex="0"
>
<table>
<thead>
<tr>
<th class="table-cell">
<span class="checkbox">
<input
aria-label="Select all rows"
class="checkbox__control"
type="checkbox"
name="checkbox-default"
/>
<span class="checkbox__icon" hidden>
<svg
class="checkbox__unchecked"
height="18"
width="18"
aria-hidden="true"
>
<icon-symbol name="checkbox-unchecked-18" />
</svg>
<svg
class="checkbox__checked"
height="18"
width="18"
aria-hidden="true"
>
<icon-symbol name="checkbox-checked-18" />
</svg>
</span>
</span>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button">
Seller
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-down-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Item
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Image
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
List Price
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Quantity Available
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Orders
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Watchers
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Protection
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button">
Shipping
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-up-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Delivery
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell">
<span class="checkbox">
<input
aria-label="Select row"
class="checkbox__control"
type="checkbox"
name="checkbox-default"
/>
<input type="checkbox" />
</span>
</td>
<th class="table-cell" scope="row">Nintendo</th>
<td class="table-cell">Switch</td>
<td class="table-cell" />
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell table-cell--numeric">207</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table with Actions
A table can have actions inside for performing various tasks for each row.
| Condition | Multiple Actions | Actions Plus | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Nintendo | Switch | $287.96 | 300 | 207 | 95 | $17.99 | FREE | 4/1 - 4/5 | |||
| Nintendo | SNES | $89.85 | 45 | 17 | 5 | $18.95 | FREE | 4/11 - 4/15 | |||
| Microsoft | XBOX 360 | $499.99 | 345 | 455 | 205 | $17.99 | FREE | 4/17 - 4/25 | |||
| Microsoft | XBOX One | $499.99 | 399 | 407 | 305 | $27.99 | FREE | 4/9 - 4/11 | |||
| Sony | Playstation 5 | $519.99 | 205 | 265 | 199 | $29.99 | FREE | 4/11 - 4/15 |
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th class="table-cell" aria-sort="descending">
<button type="button">
Seller
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-down-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Item
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">Condition</th>
<th class="table-cell">Multiple Actions</th>
<th class="table-cell table-cell--icon-action">Actions Plus</th>
<th class="table-cell table-cell--numeric">
<button type="button">
List Price
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Quantity Available
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Orders
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Watchers
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Protection
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button">
Shipping
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-up-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Delivery
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">Nintendo</th>
<td class="table-cell">Switch</td>
<td class="table-cell">
<span class="select select--borderless select--fluid">
<select name="options" id="options">
<option value="item1">New</option>
<option value="item2" selected>New without box</option>
<option value="item3">Used</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</td>
<td class="table-cell">
<div class="table-cell__layout">
<a class="cta-btn" href="https://www.ebay.com">
<span class="cta-btn__cell">
<span> Edit Listing </span>
<svg
aria-hidden="true"
class="icon icon--24"
height="8"
width="8"
>
<use href="#icon-arrow-right-24" />
</svg>
</span>
</a>
<button
class="fake-menu-button__button icon-btn"
aria-expanded="false"
aria-haspopup="true"
aria-label="Actions"
type="button"
>
<svg aria-hidden="true" class="icon icon--16">
<use href="#icon-overflow-vertical-16" />
</svg>
</button>
</div>
</td>
<td class="table-cell table-cell--icon-action">
<button
class="fake-menu-button__button icon-btn"
aria-expanded="false"
aria-haspopup="true"
aria-label="Actions"
type="button"
>
<svg aria-hidden="true" class="icon icon--16">
<use href="#icon-overflow-vertical-16" />
</svg>
</button>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell table-cell--numeric">207</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">FREE</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>
Table with Field Inputs
A table can have field inputs for quick data modification for each row.
| 300 | 207 | 95 | $17.99 | 4/1 - 4/5 | |||||
| 45 | 17 | 5 | $18.95 | 4/11 - 4/15 | |||||
| 345 | 455 | 205 | $17.99 | 4/17 - 4/25 | |||||
| 399 | 407 | 305 | $27.99 | 4/9 - 4/11 | |||||
| 205 | 265 | 199 | $29.99 | 4/11 - 4/15 |
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th class="table-cell" aria-sort="descending">
<button type="button">
Seller
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-down-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Item
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Image
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
List Price
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Quantity Available
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Orders
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Watchers
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell table-cell--numeric">
<button type="button">
Protection
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
<th class="table-cell" aria-sort="descending">
<button type="button">
Shipping
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-up-12" />
</svg>
</button>
</th>
<th class="table-cell">
<button type="button">
Delivery
<svg
aria-hidden="true"
class="icon icon--12"
height="28"
width="28"
>
<use href="#icon-sort-12" />
</svg>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell">
<span class="textbox textbox--fluid">
<input
class="textbox__control"
type="text"
placeholder="Seller"
value="Nintendo"
/>
</span>
</th>
<td class="table-cell">
<span class="select select--borderless select--fluid">
<select name="videogame-stations" id="videogame-stations-1">
<option value="item1" selected>Switch</option>
<option value="item2">SNES</option>
<option value="item3">XBOX 360</option>
<option value="item3">XBOX One</option>
<option value="item3">Playstation 5</option>
</select>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</td>
<td class="table-cell" />
<td class="table-cell table-cell--numeric">
<span class="textbox textbox--fluid">
<input
class="textbox__control"
type="text"
placeholder="List price"
value="$287.96"
/>
</span>
</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell table-cell--numeric">207</td>
<td class="table-cell table-cell--numeric">95</td>
<td class="table-cell table-cell--numeric">$17.99</td>
<td class="table-cell">
<span class="textbox textbox--fluid">
<input
class="textbox__control"
type="text"
placeholder="Shipping"
value="FREE shipping with the add-on of purchase protection"
/>
</span>
</td>
<td class="table-cell">4/1 - 4/5</td>
</tr>
<tr />
<tr />
<tr />
<tr />
</tbody>
</table>
</div>