Tables organize and display information from a data set so people can compare and analyze values across the whole set.
Figma
The Figma reference for Table will appear here once the design link is added.
Storybook
Interactive examples for Table will render here once the Storybook link is wired in.
Best practices
- Show values across multiple categories and measures.
- Allow filtering and ordering when comparison isn’t the priority.
- Minimize clutter — only include values that support the table’s purpose.
- Include a summary row for column totals, but don’t put calculations inside it.
- Wrap content instead of truncating it, so similar row titles stay distinguishable.
- For an actionable list of items that link to detail pages, use a list rather than a table.
Do’s and don’ts
Do
Right-align numeric columns and left-align text; align headers with their data.
Don’t
Center-align columns or put units in every cell instead of the header: “Hours (hrs)” in the header, values below.