Table

Table is a flexible component for displaying tabular data. It supports zebra striping, sticky rows/columns, and size variants for responsive and visually appealing tables.

Basic Usage

The default table (medium size, no modifiers).

NameEmailRole
Alice[email protected]Admin
Bob[email protected]User
Code Example
Basic.vue

Table

The Table component renders a table element and supports zebra striping, sticky rows/columns, and size variants. The default size is md.

Table Props Type Description
zebra
boolean

Enables zebra striping on rows.

pinRows
boolean

Makes all rows in and sticky.

pinCols
boolean

Makes all columns sticky.

size
string

Sets the table size. Options: - xs - sm - md (default) - lg - xl

   
xs
boolean

Set size to xs.

   
sm
boolean

Set size to sm.

   
md
boolean

Set size to md.

   
lg
boolean

Set size to lg.

   
xl
boolean

Set size to xl.

Table Slots Description
default

The default slot. Place table rows, headers, and cells as children.

Examples

Zebra Stripes

Table with zebra striping using the zebra prop.

NameEmailRole
Alice[email protected]Admin
Bob[email protected]User
Carol[email protected]Editor
David[email protected]Viewer
Eva[email protected]Admin
Code Example
Zebra.vue

Bordered Table

Table with border, background, and rounded corners for enhanced visual separation.

NameJobFavorite Color
1Cy GandertonQuality Control SpecialistBlue
2Hart HagertyDesktop Support TechnicianPurple
3Brice SwyreTax AccountantRed
Code Example
Bordered.vue

Sticky Rows

Table with sticky header/footer rows using the pin-rows prop.

#NameEmailRoleDepartmentStatusLocationNotes
1Alice[email protected]AdminHRActiveNYTeam Lead
2Bob[email protected]UserEngineeringInactiveSFRemote
3Carol[email protected]EditorMarketingActiveLAPart-time
4David[email protected]ViewerFinanceActiveNYContractor
5Eva[email protected]AdminHRInactiveSFNew Hire
6Frank[email protected]UserEngineeringActiveLAOn Leave
7Grace[email protected]EditorMarketingActiveNYTeam Lead
8Hank[email protected]ViewerFinanceInactiveSFRemote
9Ivy[email protected]AdminHRActiveLAPart-time
10Jack[email protected]UserEngineeringInactiveNYContractor
11Karen[email protected]EditorMarketingActiveSFNew Hire
12Leo[email protected]ViewerFinanceActiveLAOn Leave
13Mona[email protected]UserEngineeringActiveNYTeam Lead
14Nina[email protected]AdminHRInactiveSFRemote
15Oscar[email protected]EditorMarketingActiveLAPart-time
16Paul[email protected]ViewerFinanceInactiveNYContractor
17Quinn[email protected]UserEngineeringActiveSFNew Hire
18Rita[email protected]AdminHRActiveLAOn Leave
19Sam[email protected]EditorMarketingInactiveNYTeam Lead
20Tina[email protected]ViewerFinanceActiveSFRemote
21Uma[email protected]UserEngineeringActiveLAPart-time
22Victor[email protected]AdminHRInactiveNYContractor
#NameEmailRoleDepartmentStatusLocationNotes
Code Example
Sticky.vue

Size Variants

Table with different sizes using the size prop or boolean flags.

XS
Extra Small
SM
Small
MD
Medium
LG
Large
XL
Extra Large
Code Example
Sizes.vue

Visual Elements

Table with checkboxes, avatars, badges, buttons, and other visual elements.

NameJobFavorite Color
Hart Hagerty avatar
Hart Hagerty United States
Zemlak, Daniel and Leannon
Desktop Support Technician
Purple
Brice Swyre avatar
Brice Swyre China
Carroll Group
Tax Accountant
Red
Marjy Ferencz avatar
Marjy Ferencz Russia
Rowe-Schoen
Office Assistant I
Crimson
Yancy Tear avatar
Yancy Tear Brazil
Wyman-Ledner
Community Outreach Specialist
Indigo
Code Example
VisualElements.vue