Table

Primitive table components following MD3 data table guidelines. Compose Table, TableHead, TableBody, TableRow, TableHeader, and TableCell freely.

Basic

Fruit Calories Fat (g) Sugar (g)
Apple 95 0.3 19
Banana 105 0.4 14
Mango 201 0.6 46
Blueberries 84 0.5 15
Avocado 234 21 0.4

Rounded

Pass rounded to give the table its own ring border and rounded corners. No wrapper div needed.

Fruit Calories Fat (g) Sugar (g)
Apple 95 0.3 19
Banana 105 0.4 14
Mango 201 0.6 46
Blueberries 84 0.5 15
Avocado 234 21 0.4

Sortable

Click any column header to sort. Click again to reverse.

Name Role Status Joined
Ada Lovelace Engineer Active 2019
Alan Turing Researcher Away 2020
Donald Knuth Consultant Inactive 2018
Grace Hopper Architect Active 2021
Margaret Hamilton Engineer Active 2022

Selectable Rows

Click a row to toggle selection. Selected rows use the secondary-container token.

Name Role Status Joined
Ada Lovelace Engineer Active 2019
Grace Hopper Architect Active 2021
Alan Turing Researcher Away 2020
Margaret Hamilton Engineer Active 2022
Donald Knuth Consultant Inactive 2018

Sticky Header

The header stays pinned when the table overflows its container.

Fruit Calories Fat (g) Sugar (g)
95 0.3 19
105 0.4 14
201 0.6 46
84 0.5 15
234 21 0.4
95 0.3 19
105 0.4 14
201 0.6 46
84 0.5 15
234 21 0.4
95 0.3 19
105 0.4 14
201 0.6 46
84 0.5 15
234 21 0.4