Data table
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.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Events
Best practices
Data tables should:
- Show values across multiple categories and measures.
- Allow for filtering and ordering when comparison is not a priority.
- Help merchants visualize and scan many values from an entire data set.
- Help merchants find other values in the data hierarchy through use of links.
- Minimize clutter by only including values that supports the data’s purpose.
- Include a summary row to surface the column totals.
- Not include calculations within the summary row.
- Wrap instead of truncate content. This is because if row titles start with the same word, they’ll all appear the same when truncated.
- Not to be used for an actionable list of items that link to details pages. For this functionality, use the resource list component.
Alignment
Column content types are built into the component props so the following alignment rules are followed:
- Numerical = Right aligned
- Textual data = Left aligned
- Align headers with their related data
- Don’t center align
Content guidelines
Headers should:
- Be informative and descriptive
- Concise and scannable
- Include units of measurement symbols so they aren’t repeated throughout the columns
- Use sentence case (first word capitalized, rest lowercase)
Column content should:
- Be concise and scannable
- Not include units of measurement symbols (put those symbols in the headers)
- Use sentence case (first word capitalized, rest lowercase)
Decimals
Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.
Related components
- To create an actionable list of related items that link to details pages, such as a list of customers, use the resource list component.
Accessibility
Structure
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.
Don’t
Use tables for layout. For a table-like layout that doesn’t use table HTML elements, use the resource list component.
Keyboard support
Sorting controls for the data table component are implemented with native HTML buttons.
- Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
- Activate buttons with the enter/return and space keys