@ebay/skin/tableALPHA
DS v0.1A table represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
To allow scrolling of the table via a keyboard interface, the root element must be added to the page's tab sequence. This in turn requires the root element to have an accessible role and label.
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 |
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 |
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 |
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.
| 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 |
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 |
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 |
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 |
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 setting tabindex="-1" to the module container, and adding the inert attribute to the table inside the module. 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.
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 live examples that follow use aria-live="off" to prevent the status element from proactively announcing new content. This is only for demo purposes, so that this documentation page does not overwhelm the viewer with example status updates. The aria-live override should not be included in implementations of this pattern.
| 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 |
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 |
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 |
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 |