Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers.

React composable
React legacy
React demos
HTML
HTML demos
Design guidelines

Demos

Basic

Sortable

Expandable

Compact

Compound expansion

Loading state demo

Empty state

Static bottom pagination

Sticky first column

Sticky multiple columns

Sticky header and multiple columns screenshot

Cell with image alignment

By default, table cell alignment is set to baseline. This retains vertical alignment with varying text size, but can cause visual inconsistencies with images. The vertical alignment of images within table cells may need to be specified to provide proper alignment.