Data Table
Rows of records with a column per field. Sortable headers, selectable rows and aligned numbers let people scan, compare and act on many records at once.
Preview
| Status | Date | |||
|---|---|---|---|---|
| Globex | Failed | Sep 08 | $2,310 | |
| Acme Studio | Paid | Sep 12 | $1,240 | |
| Northwind | Pending | Sep 10 | $860 | |
| Initech | Paid | Sep 05 | $415 |
When to use
- For records with the same fields that people compare: invoices, members, orders.
- When people act on several rows at once, through selection.
Reach for something else
- For a handful of items with one or two fields: a List reads more easily.
Anatomy
- 1
Header row
Column names; sortable ones carry a direction arrow.
- 2
Select-all checkbox
In the header, with a mixed state when some rows are chosen.
- 3
Row
One record; a checkbox at the start, actions at the end.
- 4
Cell
Text left-aligned, numbers right-aligned in tabular figures.
- 5
Selection bar
Appears with the count and bulk actions when rows are selected.
States
Default
Rows at rest with hairline dividers.
Hover
The row under the pointer washes.
Selected
The row fills in the soft green.
Sorted
The active column shows its direction.
Narrow
Lower-priority columns drop away, so the key fields stay readable.
Accessibility
- Uses a native <table> with <th scope="col">, so cells are announced with their column.
- The sorted column header carries aria-sort; the sort control inside it is a <button>.
- Each row checkbox is labelled with the row, such as "Select Acme invoice".
- The select-all checkbox uses the mixed state when only some rows are selected.
Source
The Data Table is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block