Table

A semantic data table with striped and bordered variants, sortable columns with aria-sort, footer, and caption support.

Default

Rows highlight on hover. The last row has no bottom border. The wrapper clips overflow and scrolls horizontally on narrow viewports.

Name	Email	Role	Status
Richard Hendricks	[email protected]	Admin	Active
Bertram Gilfoyle	[email protected]	Editor	Active
Monica Hall	[email protected]	Viewer	Inactive
Dinesh Chugtai	[email protected]	Editor	Active
Jared Dunn	[email protected]	Viewer	Active

Striped

Pass striped to alternate row backgrounds — useful for wide tables where the eye needs help tracking across columns.

Name	Email	Role	Status
Richard Hendricks	[email protected]	Admin	Active
Bertram Gilfoyle	[email protected]	Editor	Active
Monica Hall	[email protected]	Viewer	Inactive
Dinesh Chugtai	[email protected]	Editor	Active
Jared Dunn	[email protected]	Viewer	Active

Bordered

Pass bordered to draw borders on every cell — good for dense data grids.

Name	Role	Status
Richard Hendricks	Admin	Active
Bertram Gilfoyle	Editor	Active
Monica Hall	Viewer	Inactive
Dinesh Chugtai	Editor	Active
Jared Dunn	Viewer	Active

With footer and caption

TableFooter adds a summary row. TableCaption renders below the table and is read by screen readers as the table's accessible name.

Team members as of Q2 2026.
Name	Role	Status
Richard Hendricks	Admin	Active
Bertram Gilfoyle	Editor	Active
Monica Hall	Viewer	Inactive
Dinesh Chugtai	Editor	Active
Jared Dunn	Viewer	Active
Total members		5

Sortable columns

Pass onSort and sortDirection to TableHead to make a column sortable. The header becomes focusable, responds to Enter/Space, and sets aria-sort for screen readers.

Name	Email	Role	Status
Richard Hendricks	[email protected]	Admin	Active
Bertram Gilfoyle	[email protected]	Editor	Active
Monica Hall	[email protected]	Viewer	Inactive
Dinesh Chugtai	[email protected]	Editor	Active
Jared Dunn	[email protected]	Viewer	Active