<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Table

Organize and display data efficiently in columns and rows.
styleKeys: table

Use Table...

  • To present information in a grid so that its easy to compare.
  • To present information from a large dataset.

Don't use Table...

  • For page layout.

The preview has been updated.

Table caption

Use TableCaption around the first child of the Table for accessibility. This is usually the heading of the Table. Use Typography to set the heading, text size, and text alignment as needed.

If your Table does not have a visible heading, you will need to add a visually hidden label for accessibility support.

The preview has been updated.

Header cell

For the React API, TableCell will intelligently render a th vs a td depending on whether it's rendered inside of a TableHead or a TableBody.

For the Vanilla API, use td for regular cells and th for header cells. For row headers, use th along with scope="row". If your Table has both row and column headers, the column headers will need scope="col".

Cell alignment

Use textAlign to adjust the text alignment of a Cell to the left, center, or right. This is a core prop.

The preview has been updated.

Horizontal scrolling

Use TableScrollContainer around a Table to enable it to scroll horizontally when there's not enough room.

The preview has been updated.

Responsive

Tables do not display well on small screen sizes such as phones. Consider displaying the information differently or adding horizontal scrolling.

SEO

Each major table should integrate structured data to let Google understand what the table is about. Use this JSON Script as a model. Contact the Organic Search team at #help-seo with any questions.

Share

Props

Table
This component is implemented using the <table /> as the root element. You can utilize the native attributes supported by <table /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableBody
This component is implemented using the <tbody /> as the root element. You can utilize the native attributes supported by <tbody /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableCaption
This component is implemented using the <caption /> as the root element. You can utilize the native attributes supported by <caption /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableCell
This component is implemented using the <td /> as the root element. You can utilize the native attributes supported by <td /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableHead
This component is implemented using the <thead /> as the root element. You can utilize the native attributes supported by <thead /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableRow
This component is implemented using the <tr /> as the root element. You can utilize the native attributes supported by <tr /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
TableScrollContainer
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.