Overview

A table to structure qualitative data. All table components are aligned to match a grid structure.

Usage

• A table component should always be paired with a table header to indicate what each column is.
• Adjust the width of tables to fill the container to the maximum available space.
• Only use medium and bold text sizes for the first or last columns.
• Incorporate interactive elements such as sortable columns and filterable rows to empower users with the ability to customize their data viewing experience.
• Ensure that table components adhere to accessibility standards, including proper semantic HTML structure, sufficient color contrast, and support for screen readers.'
• Never let one column overflow into another. Follow the rules for padding between columns.
• Each column should be aligned to the page grid.
• Each column should only include one piece of information/one component
• If more space for a column is needed, remove the next consecutive column to clear up space.
• The height of each row shouldn’t be too large as should match the height of all other rows.

Variants

Although the table component doesn’t offer any specific variants, it’s highly customizable in the way you deploy it. Each column can include any type of component. Tables should be used to structure big data and help users sort through information.

The following are some examples of the ways you can use the table component:

More examples