See Storybook "Table" page for React documentation.
The following CSS variables can be overridden to customize Table components:
- When you need tabular information, such as statistical data.
- When users need to compare sets of information.
- Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.
- If you're writing out name / value pairs, there's often a more compact way compared to using a table.
- Right-align numerical data in tables. You can use the
alignprop on the TableCell to accomplish this. Right alignment makes it easier to scan and compare numerical values.
- Tables can have two levels of headers. Each header cell should have
scope="row". Learn more about the "scope" attribute.
- Complex tables are tables with more than two levels of headers. Each header should be given a unique
idand each data cell should have a
headersattribute with each related header cell’s
- When adding a title to a table, include it in a
<caption>tag inside of the
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Complete
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Not applicable
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete