Table

Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.

#
Usage

Basic example with common props.

	#	Title	Description	Published	Status
	1	Book of Magic	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:49.425Z	Tag label
{ "id": 1, "title": "Book of Magic", "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.", "published": 1787306869425, "status": "Tag label" }
	2	Another book	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:45.425Z	Tag label
{ "id": 2, "title": "Another book", "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.", "published": 1787306865425, "status": "Tag label" }
	3	Clever cove	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:47.425Z	Tag label
{ "id": 3, "title": "Clever cove", "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.", "published": 1787306867425, "status": "Tag label" }
Footer content

#	Title	Description	Published	Status
1	Book of Magic	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:49.425Z	Tag label
2	Another book	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:45.425Z	Tag label
3	Clever cove	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	2026-08-21T10:07:47.425Z	Tag label

#
Selectable

Row selection with checkboxes.

#	Title	Description	Published	Status
1	Book of Magic	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306869433	Tag label
2	Another book	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306865433	Tag label
3	Clever cove	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306867433	Tag label

#	Title	Description	Published	Status
1	Book of Magic	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306869433	Tag label
2	Another book	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306865433	Tag label
3	Clever cove	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.	1787306867433	Tag label

#
Virtual List

Virtualized rows for large datasets.

	#	Title	Description	Published	Status

#
States

Loading, empty, and other table states.

#	Title	Description	Published	Status
No data There are no rows to display.

#	Title	Description	Published	Status

#API

Table

props

Name	Description	Type	Default
headers	Column definitions (text, value, sortable, align, width, etc.).	Array	() => []
items		Array	() => []
sort	Active sort entries as `column,-1\|1` (use with `v-model:sort`).	Array	() => []
sortMultiple	Allow sorting by multiple columns at once.	Boolean	false
loading	Shows loading rows (skeletons) and a spinner overlay.	Boolean	false
loadingSkeleton	When set, loading rows use skeleton placeholders.	Boolean	false
loadingLines	Number of skeleton rows shown while loading.	Number String	3
error	Shows the error slot instead of rows.	Boolean	false
dense	Compact cell padding.	Boolean	false
fixed	Fixed table layout for consistent column widths.	Boolean	false
striped	Alternating row background colors.	Boolean	false
pointer	Pointer cursor on rows (also set when `toFn` or `hrefFn` is used).	Boolean	false
scrollable	Enables horizontal overflow scrolling for wide tables.	Boolean	true
stickyHeader	Keeps the header row sticky while scrolling.	Boolean	true
expandable	Adds an expand control and `expanded-row` slot per row.	Boolean	false
virtualList	Virtualizes rows for large datasets.	Boolean	false
virtualListOffsetTop	Top spacer offset (px) when using virtual list.	Number
virtualListOffsetBottom	Bottom spacer offset (px) when using virtual list.	Number
virtualListItemHeight	Fixed row height (px) for virtual list measurement.	Number	54
virtualListOverscan	Extra rows rendered above/below the viewport when virtualized.	Number	10
keyProp	Item property used as the stable row key (falls back to index).	String
selectable	Enables row selection (`v-model:selected`).	Boolean	false
singleSelect	Select only one row at a time.	Boolean	false
autoClearSelected	Clears selection entries that no longer exist in `items`.	Boolean	true
toFn		Function
hrefFn		Function
hrefTarget		String
selected
selectedModifiers

slots

Name	Description
title	Optional title above the table.
actions	Optional actions above the table.
header-[column]	Header cell content for a column (`header-{value}`).
item-[column]	Cell content for a column (`item-{value}`).
loading-[column]	Loading cell content for a column (`loading-{value}`).
footer-[column]	Footer cell content for a column (`footer-{value}`).
footer	Custom footer (`tfoot`); overrides per-column footer slots when provided.
empty	Content when there are no items.
error	Content when `error` is true.
expanded-row	Expanded content for a row when `expandable` is set.

emits

Name	Description
update:sort	Emitted when sort changes (`v-model:sort`).
click-row	Emitted when a row is clicked; payload is `(item, index)`.
update:selected	Emitted when selection changes (`v-model:selected`).

TableBody

TableCell

props

Name	Description	Type	Default	Values
textAlign	Horizontal text alignment.	String		leftcenterrightjustify
truncate	Truncates overflowing cell content with an ellipsis.	Boolean	false
dense	Compact cell padding.	Boolean	false
width	Fixed cell width (number is treated as px).	String Number
verticalAlign	Vertical alignment of cell content.	String	middle	baselinebottommiddletext-bottomtext-toptop
to	Vue Router location; wraps cell content in a router-link.	String Object
href	Anchor href; wraps cell content in a link.	String
target	Link target when `href` or `to` is set.	String

slots

Name	Description
default	Cell content.

TableHead

props

Name	Description	Type	Default	Values	Required
stickyHeader	Keeps the header row sticky while the table scrolls.	Boolean	false

slots

Name	Description
default	Header cells (`x-table-header` children).

TableHeader

props

Name	Description	Type	Default	Values
sort	Current sort direction: `1` ascending, `-1` descending, or unset.	Number		1-1
sortable	Shows the sort icon and enables sort interaction.	Boolean	false
textAlign	Horizontal alignment of the header label.	String	left	leftcenterright
tooltip	Optional tooltip shown next to the header label.	String

slots

Name	Description
default	Header label content.

TableRow

props

Name	Description	Type	Default	Values
pointer	Pointer cursor on the row.	Boolean	false
striped	Applies striped row styling.	Boolean	false
selected	Marks the row as selected.	Boolean	false
singleSelect	Single-select styling for the selected row.	Boolean	false
verticalAlign	Vertical alignment for cells in the row.	String	top	baselinebottommiddletext-bottomtext-toptop

slots

Name	Description
default	Row cells (`x-table-cell` children).

spinner

tabs

Table

#Usage

#Selectable

#Virtual List

#States

#API

Table

props

slots

emits

TableBody

TableCell

props

slots

TableHead

props

slots

TableHeader

props

slots

TableRow

props

slots

#
Usage

#
Selectable

#
Virtual List

#
States