Table

Overview

Table is a real HTML table built on React Aria. It supports sorting, single and multiple row selection, resizable and pinnable columns, a sticky header over horizontal scroll, drag-and-drop reordering, and empty, loading, and load-more states. In Figma, Table Row covers 26 semantic variants across Actions, People, Content, Media, and Metrics, from avatars and file listings to payment methods, progress bars, ratings, and trend sparklines, with a two-line md and a single-line sm density.

When should you use them?

Use Table for any record grid that people scan, compare, sort, or select: orders, users, invoices, files, and analytics. For a handful of static rows without interaction, simple markup is enough, and for card-style content use a grid of surfaces instead.

How should you use them?

• Use the md density for rows with a title and a description, and sm for dense lists where the title alone identifies the row.
• Pin identifying columns like name or ID so they stay visible while people scroll horizontally.
• Enable sorting on the columns people compare, and show selected and disabled states on the row itself.
• Show only the elements a row needs, like a badge, a description, or a checkbox, instead of filling every cell.
• Put a Filter Bar above the table and Pagination or load-more below it for long datasets.