Tables come in two sizes, "sm" and "md", with "md" as the default. Set size on TableCard.Root and it flows down through context to the header, rows, and cells. When the table is not wrapped in a card, set size on Table.Header, Table.Row, and Table.Cell instead — each accepts its own size prop, which also lets you override a single part inside a card. The size prop on Table itself has no effect, because the size context always supplies a value for it to fall back to.

Table is a compound component with Table.Header, Table.Head (one per column), Table.Body, Table.Row, and Table.Cell. TableCard.Root and TableCard.Header wrap it in the bordered card with a title bar, and TableRowActionsDropdown is a ready-made dots menu with Edit, Copy link, and Delete items for the last cell of each row.

Add allowsSorting to the Table.Head for that column and hold a React Aria SortDescriptor in state, passing sortDescriptor and onSortChange to Table. The column header then renders the sort chevron and flips the arrow to match sortDescriptor.direction. Sorting the rows themselves is up to you — the examples derive the sorted array with a useMemo keyed on the descriptor.

Set selectionMode="multiple" on Table. A checkbox column is inserted automatically at the start of Table.Header and every Table.Row — you do not add it yourself — with a select-all checkbox in the header. Give each Table.Row a stable id, and read or control the selection with React Aria's selectedKeys and onSelectionChange props. Selected rows are highlighted by default; pass highlightSelectedRow={false} on Table.Row to turn that off.

Use TableCard.Header inside TableCard.Root. It accepts title, description, badge, and contentTrailing. A string or number passed to badge is wrapped automatically in a gray modern badge (for example badge="100 users"), while a React element is rendered as-is, and contentTrailing is the slot for a search input, filter, or overflow menu.

Table.Head takes a label string for the column title and a tooltip string that renders a help-circle icon next to it with your text on hover or focus. It also passes through React Aria's column props such as id and isRowHeader, and you can still supply custom children instead of label when a column needs richer markup.

Table already wraps its markup in an overflow-x-auto container, so wide tables scroll horizontally instead of breaking the page. To drop non-essential columns, apply the same responsive utilities to the matching Table.Head and Table.Cell. To hide a column on narrow viewports only, use className="hidden md:table-cell". The examples on this page instead use className="md:hidden xl:table-cell" on the email column, which shows it on the narrowest layout, hides it between the md and xl breakpoints where the table is most cramped, and brings it back on wide screens.