Tables

Guidelines

• It’s fine to have icons, images, avatars etc in tables.
• By default text in tables should be wrapped. See the section about Text wrapping below.

Navigation

• Navigation should use links (an a element) rather than other elements and javascript.
• More than one column may contain a link.

Actions

• Actions must apply to the item in the row.
• Table actions must be right-aligned.
• Do not have more than 3 actions; consider an overflow menu or another alternative approach.

Utilities

We provide some tailwind utilities for quickly styling tables. If your needs go beyond these please see the design tokens for tables.

• fun-table - apply to the whole table
• fun-table-cell - apply to a table cell
• fun-table-header-cell - apply to a table header cell

How to build a table using @tanstack/react-table

We recommend using react-table to render tables in React. It’s better than anything we could write ourselves. This is a short guide showing how to style the table using our theme. There is of course a lot more to find out over at the official docs.

Install react-table:

Here’s the CSS we use for the tables. This is like the legacy table classes that are no longer part of the design system.

Create a component

Here’s the code above running hot.