Table with multi headers and a caption
Table is a container component that contains
TableBody as children,
as well as
TableCell for the table content. These components mostly follow ordinary HTML table semantics, but also include some additional
responsive features including horizontal scrolling and vertically stacked rows.
|Applies the borderless variation of the table.|
|The table contents, usually |
|Additional classes to be added to the root table element.|
|Applies the compact variation of the table.|
|Applies a horizontal scrollbar and scrollable notice on |
|Additional text or content to display when the horizontal scrollbar is visible to give the user notice of the scroll behavior.
This prop will only be used when the |
|A stackable variation of the table.
|Applies responsive styles to vertically stacked rows at different viewport sizes.|
|A striped variation of the table.|
|Disables the warning message on development console when a responsive stackable table cell does not contain an |
TableCaption renders the
|The table caption contents.|
|Additional classes to be added to the caption element.|
TableHead renders the
<thead> element and will typically contain
TableRow elements to define table columns.
|The table head contents, usually |
TableBody renders the
<tbody> element and will typically contain
TableRow elements to define table data.
|The table body contents, usually |
TableRow renders a
|The table row contents, usually |
TableCell dynamically renders a
<td> element based on the parent component or user specified
component prop. By default
TableCell will automatically render a
<th> element if the parent component is
TableHead, otherwise it will render a
|Set the text-align on the table cell content. Options: left, center, right.|
|The table cell contents.|
|When provided, this will render the passed in component as the HTML element.
If this prop is undefined, it renders a |
|Additional classes to be added to the row element.|
|If this prop is undefined, the component sets a scope attribute of |
|Additional classes to be added to the stacked Title element.|
|Table data cell's corresponding header title, this stacked title is displayed as the row header when a responsive table is vertically stacked.|
The following CSS variables can be overridden to customize Table components:
When to use
- When you need tabular information, such as statistical data.
- When users need to compare sets of information.
When to consider alternatives
- 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