# Table

Source: https://design.ritchiebros.com/components/data-display/table/

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.

## Related components

- [List](https://design.ritchiebros.com/components/data-display/list/)
- [Pagination](https://design.ritchiebros.com/components/navigation/pagination/)