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 Sass 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