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.

NameEmailRoleStatus
Richard Hendricks[email protected]AdminActive
Bertram Gilfoyle[email protected]EditorActive
Monica Hall[email protected]ViewerInactive
Dinesh Chugtai[email protected]EditorActive
Jared Dunn[email protected]ViewerActive

Striped

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

NameEmailRoleStatus
Richard Hendricks[email protected]AdminActive
Bertram Gilfoyle[email protected]EditorActive
Monica Hall[email protected]ViewerInactive
Dinesh Chugtai[email protected]EditorActive
Jared Dunn[email protected]ViewerActive

Bordered

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

NameRoleStatus
Richard HendricksAdminActive
Bertram GilfoyleEditorActive
Monica HallViewerInactive
Dinesh ChugtaiEditorActive
Jared DunnViewerActive

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.
NameRoleStatus
Richard HendricksAdminActive
Bertram GilfoyleEditorActive
Monica HallViewerInactive
Dinesh ChugtaiEditorActive
Jared DunnViewerActive
Total members5

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.

NameEmailRoleStatus
Richard Hendricks[email protected]AdminActive
Bertram Gilfoyle[email protected]EditorActive
Monica Hall[email protected]ViewerInactive
Dinesh Chugtai[email protected]EditorActive
Jared Dunn[email protected]ViewerActive