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).

Name	Email	Role
Alice	alice@example.com	Admin
Bob	bob@example.com	User

Code Example

Basic.vue

Components

Table is a standalone component.

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.

Name	Email	Role
Alice	alice@example.com	Admin
Bob	bob@example.com	User
Carol	carol@example.com	Editor
David	david@example.com	Viewer
Eva	eva@example.com	Admin

Code Example

Zebra.vue

Bordered Table

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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

Code Example

Bordered.vue

Sticky Rows

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

#	Name	Email	Role	Department	Status	Location	Notes
1	Alice	alice@example.com	Admin	HR	Active	NY	Team Lead
2	Bob	bob@example.com	User	Engineering	Inactive	SF	Remote
3	Carol	carol@example.com	Editor	Marketing	Active	LA	Part-time
4	David	david@example.com	Viewer	Finance	Active	NY	Contractor
5	Eva	eva@example.com	Admin	HR	Inactive	SF	New Hire
6	Frank	frank@example.com	User	Engineering	Active	LA	On Leave
7	Grace	grace@example.com	Editor	Marketing	Active	NY	Team Lead
8	Hank	hank@example.com	Viewer	Finance	Inactive	SF	Remote
9	Ivy	ivy@example.com	Admin	HR	Active	LA	Part-time
10	Jack	jack@example.com	User	Engineering	Inactive	NY	Contractor
11	Karen	karen@example.com	Editor	Marketing	Active	SF	New Hire
12	Leo	leo@example.com	Viewer	Finance	Active	LA	On Leave
13	Mona	mona@example.com	User	Engineering	Active	NY	Team Lead
14	Nina	nina@example.com	Admin	HR	Inactive	SF	Remote
15	Oscar	oscar@example.com	Editor	Marketing	Active	LA	Part-time
16	Paul	paul@example.com	Viewer	Finance	Inactive	NY	Contractor
17	Quinn	quinn@example.com	User	Engineering	Active	SF	New Hire
18	Rita	rita@example.com	Admin	HR	Active	LA	On Leave
19	Sam	sam@example.com	Editor	Marketing	Inactive	NY	Team Lead
20	Tina	tina@example.com	Viewer	Finance	Active	SF	Remote
21	Uma	uma@example.com	User	Engineering	Active	LA	Part-time
22	Victor	victor@example.com	Admin	HR	Inactive	NY	Contractor
#	Name	Email	Role	Department	Status	Location	Notes

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.

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

Code Example

VisualElements.vue

Prev Status

Next Text