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	[email protected]	Admin
Bob	[email protected]	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	[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.

	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	[email protected]	Admin	HR	Active	NY	Team Lead
2	Bob	[email protected]	User	Engineering	Inactive	SF	Remote
3	Carol	[email protected]	Editor	Marketing	Active	LA	Part-time
4	David	[email protected]	Viewer	Finance	Active	NY	Contractor
5	Eva	[email protected]	Admin	HR	Inactive	SF	New Hire
6	Frank	[email protected]	User	Engineering	Active	LA	On Leave
7	Grace	[email protected]	Editor	Marketing	Active	NY	Team Lead
8	Hank	[email protected]	Viewer	Finance	Inactive	SF	Remote
9	Ivy	[email protected]	Admin	HR	Active	LA	Part-time
10	Jack	[email protected]	User	Engineering	Inactive	NY	Contractor
11	Karen	[email protected]	Editor	Marketing	Active	SF	New Hire
12	Leo	[email protected]	Viewer	Finance	Active	LA	On Leave
13	Mona	[email protected]	User	Engineering	Active	NY	Team Lead
14	Nina	[email protected]	Admin	HR	Inactive	SF	Remote
15	Oscar	[email protected]	Editor	Marketing	Active	LA	Part-time
16	Paul	[email protected]	Viewer	Finance	Inactive	NY	Contractor
17	Quinn	[email protected]	User	Engineering	Active	SF	New Hire
18	Rita	[email protected]	Admin	HR	Active	LA	On Leave
19	Sam	[email protected]	Editor	Marketing	Inactive	NY	Team Lead
20	Tina	[email protected]	Viewer	Finance	Active	SF	Remote
21	Uma	[email protected]	User	Engineering	Active	LA	Part-time
22	Victor	[email protected]	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