Park UI

Table

A display component for organizing and presenting data in rows and columns.

ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99
Totals$2,199.96

Installation

Usage

Examples

Variants

Use the variant prop to change the appearance of the table.

ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99
Totals$2,199.96
ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99
Totals$2,199.96

Striped

Use the striped prop to add zebra-stripes to the table.

ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99

Column Border

Use the columnBorder prop to add borders between columns.

ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99

Horizontal Scroll

Compose the Table component within a ScrollArea component to enable horizontal scrolling.

Use the stickyHeader prop to make the table header sticky.

Sticky Column

Here's an example that uses data-sticky attributes to make table columns sticky during horizontal scrolling.

Interactive

Use the interactive prop to highlight rows on hover.

ProductCategoryPrice
LaptopElectronics999.99
Coffee MakerHome Appliances49.99
Desk ChairFurniture150
SmartphoneElectronics799.99
HeadphonesAccessories199.99

Props

PropDefaultType
variant'plain'
'outline' | 'plain'
size'md'
'sm' | 'md' | 'lg'
striped
boolean
interactive
boolean
columnBorder
boolean
stickyHeader
boolean