Table

Component Playground

Build a table from the pieces below - size, row count, selection, sorting, which columns show, and row actions - all wired to the real TableCard/Table from components/application/table/table.tsx.

Table (primitive)

components/base/table/table.tsx - just Table/TableHeader/Column/TableBody/Row/Cell, styled with this system's tokens. Use it when you don't need selection, sorting, or a card wrapper - a Row can take href to make the whole row a link.

Data table (TableCard)

components/application/table/table.tsx - wrap rows in TableCard.Root for the card chrome, add a TableCard.Header, and use Table/Table.Header/Table.Head/Table.Row/Table.Cell for the grid itself. Set selectionMode="multiple" on Table to get a selection checkbox column for free - it composes the same Checkbox used everywhere else. The Name column below is clickable (allowsSorting) but this specific example doesn't actually reorder rows - React Aria's Table has no idea how to compare your data, so allowsSorting alone only renders the chevron and makes the header interactive. Sorting only works once you also supply sortDescriptor/onSortChange and re-order items yourself - see the Playground above for a real, working example.

TableRowActionsDropdown is a ready-made Edit/Copy link/Delete menu built on Dropdown - see that page for building a custom one. Figma's own "Team members" reference documents two other row-action treatments this system doesn't have a ready-made component for yet - bare "Action icons" (a row of icon-only buttons, no dropdown) and "Action buttons" (text links). Both are real, valid Untitled UI patterns; only the dropdown one has been built here so far.

Numbered pagination

TableCard.PaginationNumbered is the richer footer Figma's Sales example shows: a Rows per page control, Previous/Next, a page list that always keeps the first and last three pages (1 2 3 … 8 9 10), and a "1-50 of 250" summary. It sits alongside TableCard.Pagination rather than replacing it, so every table using the simple "Page X of Y" footer is unaffected. The row slicing is the caller's job - it only reports the page and page size.

The footer does not move as its numbers change. Every figure in it (the page numbers, the rows-per-page value, the range) is set in tabular figures (tabular-nums: Barlow's own fixed-width digits, not a monospace font, so a 1 and an 8 take the same room and the letters are unchanged), and the layout is three columns (1fr auto 1fr) so the page numbers stay centred, with the range in a fixed minimum width so Next stays where it is.

Status badges

Figma's table examples use two different status treatments depending on what the status actually means - BadgeWithDot for a simple on/off state (Active/Inactive), BadgeWithIcon for an outcome (Paid/Refunded/Cancelled). Both are real, already-shipped Badge variants - picking the wrong one for the context is the mismatch to avoid, not a missing component.

Usage

// Plain table
import { Table, TableHeader, Column, TableBody, Row, Cell } from "@/components/base/table/table";

<Table aria-label="Projects">
  <TableHeader>
    <Column isRowHeader>Project</Column>
    <Column>Status</Column>
  </TableHeader>
  <TableBody items={projects}>
    {(project) => (
      <Row id={project.id} href={project.href} textValue={project.name}>
        <Cell>{project.name}</Cell>
        <Cell><Badge color={project.statusColor}>{project.status}</Badge></Cell>
      </Row>
    )}
  </TableBody>
</Table>

// Data table with selection + row actions
import { Table, TableCard, TableRowActionsDropdown } from "@/components/application/table/table";

<TableCard.Root>
  <TableCard.Header title="Team members" badge={String(members.length)} />
  <Table aria-label="Team members" selectionMode="multiple">
    <Table.Header>
      <Table.Head id="name" isRowHeader allowsSorting>Name</Table.Head>
      <Table.Head id="actions" />
    </Table.Header>
    <Table.Body items={members}>
      {(row) => (
        <Table.Row id={row.id}>
          <Table.Cell>{row.name}</Table.Cell>
          <Table.Cell><TableRowActionsDropdown /></Table.Cell>
        </Table.Row>
      )}
    </Table.Body>
  </Table>
</TableCard.Root>

API

Figma

Application Components - Tables documents header cells (help-icon tooltip, sort chevron, checkbox), the full cell-type catalog (text, avatar, file type icon, badge, badges-multiple, trend, avatar group, select dropdown, progress bar, star rating, and three row-action treatments), and full table examples (Team members, Sales, Companies, Files - both divider-line and alternating-fill row styles, desktop and mobile). This page's "Data table" example mirrors Figma's own "Team members" reference; TableCard.Pagination mirrors the Previous/Next footer every one of those examples ships with.

Not yet built, found auditing against the fuller examples above - real, valuable, and each a separate piece of work rather than a style fix, so logged here instead of built speculatively:

• A filters bar (segmented view tabs + search input + a "Filters" button, sitting between the card header and the grid) - achievable today by composing Tabs, Input, and Button directly rather than a new bespoke component.
• An avatar-group cell (4-5 overlapping avatars + a "+N" overflow badge, seen in the Companies example's "Users" column) - AvatarLabelGroup is one avatar plus a title/subtitle, not a stacked multi-avatar group; no component renders this shape yet.
• A progress-bar cell (a track + fill + percentage, the Companies example's "License use" column) - no DEW progress bar component exists yet.
• A file-type-icon cell (a coloured PDF/JPG/MP4/etc. badge next to a filename, the Files example) - would need a small file-type icon set; none exists yet.