Components

Table

Rows of data in columns, with optional sorting and row selection. Pair it with Pagination for long lists.

DesignerDeveloper

Playground

People
		Status
Ada Lovelace	Engineering	Active	12
Alan Turing	Engineering	Away	5
Grace Hopper	Research	Active	8
Hedy Lamarr	Design	Away	3
Katherine Johnson	Analytics	Active	15
Margaret Hamilton	Engineering	Active	21
Radia Perlman	Research	Active	9

1 selected

Sortable columns Row selection Pagination No rows

Figma variant

Table
.Table Header Cell › ↕ Sort=Ascending / Descending / None
.Table Cell › 🎛 Type=Checkbox + Text
.Table Row › 🕹 State=Default / Hover / Selected

Parts

A header cell (text, with a sort arrow when sorted, or the select-all checkbox), a body cell (text that truncates, or a row checkbox) and a row with Default, Hover and Selected states, inside a card with a line around it.

Tokens

Part	Token
Frame	`--color-surface-level-1, --border, --radius-card`
Header cell	`--color-surface-level-2, --text-ui-text-small-bold, --color-foreground-medium-emphasis`
Body cell	`--text-ui-text-regular, --color-foreground-high-emphasis`
Cell padding	`--layout-small --layout-default`
Row hover / selected	`--color-surface-level-2 / --color-primary-soft`

Figma to code

Figma	React
.Table Header Cell › ↕ Sort = None / Ascending / Descending	`column.sortable + sort.direction = 'ascending' / 'descending'`
.Table Header Cell › 🎛 Type = Checkbox	`selectable`
.Table Cell › 🎛 Type = Text / Checkbox	`column.cell / selectable`
.Table Row › 🕹 State = Hover / Selected	`:hover / selected={[…]}`