Data table

Data table is one table for every list people work through. Selection is always the first column, every action lives in one toolbar above the rows, and the same parts hold up from a wide dashboard down to a phone.

NameAdd filter

Add member

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday
	JAJordan Alvarez	Marketing	Editor	Active	5	Today
	SWSam Whitfield	Support	Viewer	Invited	0	Never
	EMElena Marsh	Operations	Owner	Active	21	Today
	RDRosa Delgado	Engineering	Viewer	Deactivated	3	Aug 14

Anatomy

A native table inside a box that measures its own width. The toolbar sits above it, and the cards replace it on a narrow screen.

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday
	JAJordan Alvarez	Marketing	Editor	Active	5	Today
	SWSam Whitfield	Support	Viewer	Invited	0	Never
	EMElena Marsh	Operations	Owner	Active	21	Today
	RDRosa Delgado	Engineering	Viewer	Deactivated	3	Aug 14

Variants and states

Bulk actions

Every table's bulk actions read in one order: your actions, then More, then Delete behind a divider. An action that works on one row stays in place, dimmed, while more are selected.

Delete only

2 members selected

Delete

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday

Export

2 members selected

ExportDelete

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday

Several

2 members selected

Change roleChange teamDelete

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday

One item, with two selected

2 members selected

EditDelete

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday

Across pages

Select the page, and the toolbar offers every matching row. Show selected only hands the filtering to the app.

NameAdd filter

Add member

	Member	Team	Role	Status	Projects	Last active	Actions
	MOMaya Okafor	Design	Admin	Active	12	Today
	PRPriya Raman	Engineering	Editor	Away	8	Yesterday
	JAJordan Alvarez	Marketing	Editor	Active	5	Today
	SWSam Whitfield	Support	Viewer	Invited	0	Never
	EMElena Marsh	Operations	Owner	Active	21	Today
	RDRosa Delgado	Engineering	Viewer	Deactivated	3	Aug 14

On a phone

Under 32rem of its own width, the table scrolls under an icon-only toolbar, or each row becomes a card. Sort and filters move into a sheet.

In a form

As a picker, the selection is the form's value and the footer counts it.

	Title	Access
	Onboarding checklist	Workspace
	Brand guidelines	Public
	Release notes	Public

2 of 3 documents selected

Usage

• 01Selection is always the first column, and row actions are always the last, pinned to the end.
• 02Put every action in the toolbar. Don't add hover actions or a floating bar; they split actions across places.
• 03Pin the row's name to the start and at most one must-see column to the end.
• 04Lock a row that can't be selected, and say why in lockedReason.
• 05Give actions an icon, so they still fit on a phone.
• 06Use narrowLayout="cards" when a row reads better as a summary, such as people with a status. Keep scroll for data people compare across columns.

Best practices

Accessibility

• 01It's a native table, not a grid: checkboxes and buttons are ordinary Tab stops.
• 02Each row checkbox is named from its first name cell, “Select Maya Okafor”, and select all says its scope, “Select all members on this page”.
• 03A locked row's checkbox is disabled and described by the reason, and the lock is focusable so keyboard users can open its tooltip.
• 04Selection changes are announced through a status region, and Escape clears the selection.
• 05When the focused control goes away, such as Clear or a row that swaps to a card, focus moves somewhere sensible instead of the page.
• 06Only one of the table and the cards is ever in the page, so screen readers don't meet each row twice.

Related components

• Filter menuA filter menu of fields and values that turns into a search as you type.
• Command menuA Cmd+K palette with nested pages, recent commands, ranked search and a preview pane.

References

• WAI-ARIA APG: Table pattern
• Shopify Polaris: Index table
• React Aria: Table
• Adrian Roselli: Tables, CSS display properties and ARIA