Table

Tables display data-centric information.

overviewguidelinesdeva11y
  • Use tables to display data-centric information
  • Tables can contain actions, such as buttons or links
  • Two header sizes: "md" and "lg"
  • Three data cell sizes: "sm", "md", and "lg"
  • Two decoration styles: "zebra" and "default"

Example

Basic table example
ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99

Sizes

Table with different cell sizes
Small
Small
Table with different cell sizes
Medium
Medium
Table with different cell sizes
Large
Large

Decoration

Table with default decorations
Default
one
two
three
Table with zebra decorations
Zebra
one
two
three
Better find a mop, it's getting sticky...
ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99

Resources

NameResourceStatus
FigmaDesign Kit (Figma)Private