Examples
Use to present small amounts of data for merchants to view statically.
Data tables are used to organize and display all information from a data set. While a data visualization represents part of data set, a data table lets merchants view details from the entire set. This helps merchants compare and analyze the data.
Use to present small amounts of data for merchants to view statically.
Native HTML tables provide a large amount of structural information to screen reader users. Merchants who rely on screen readers can navigate tables and identify relationships between data cells (<td>
) and headers (<th>
) using keys specific to their screen reader.
Sortable tables use the aria-sort
attribute to convey which columns are sortable (and in what direction). They also use aria-label
on sorting buttons to convey what activating the button will do.
Use tables for tabular data.
Use tables for layout. For a table-like layout that doesn’t use table HTML elements, use the resource list component.
Sorting controls for the data table component are implemented with native HTML buttons.
Data tables should:
Column content types are built into the component props so the following alignment rules are followed:
Headers should:
Temperature °C
Temperature
Column content should:
Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.