Props

Table

Name	Type	Default	Description
data	T[]	-	Rows. When omitted, the default slot composes the table by hand.
columns	TableColumn<T>[]	-	key, header, width, align, verticalAlign, sortable, filter, and renderCell.
idKey	string | (row: T) => string	'id'	Row identity. Grouped rows need a function so the synthetic headers stay stable.
density	'compact' | 'balanced' | 'spacious'	'balanced'	Cell padding. Compact is 4×8, balanced is 8×12, spacious is 12×16.
dividers	'rows' | 'columns' | 'grid' | 'none'	'rows'	The header always keeps its bottom border. The last body row does not draw a row rule.
isStriped	boolean	false	Even body rows use the muted background.
hasHover	boolean	false	Hover fill, only when the pointer can hover.
verticalAlign	'top' | 'middle' | 'bottom'	'middle'	Default vertical alignment. A column can override it.
textOverflow	'wrap' | 'truncate'	'wrap'	Whether cell text wraps or clips to one line.
plugins	Record<string, TablePlugin<T>>	-	Sort, selection, pagination, column settings, resize, filtering, groups, trees, expansion, sticky columns, row status, and row numbers.
label	string	localized “Table”	Accessible name of the table.
rowIndexStart	number	1	Where the first visible data row sits in the full result. Setting this or the total count numbers the data rows.
rowCount	number	-	How many rows the full result has. With only a start index, the total is unknown.

useTableGroupedRows

Name	Type	Default	Description
data	T[]	required	Rows after filtering, sorting, and paging.
groupBy	(item: T) => string	required	Which section a row belongs to.
collapsedGroups	Set<string>	required	Sections that are collapsed. Replace the set when it changes.
onToggleGroup	(groupKey: string) => void	required	Called from the header or its chevron.
renderGroupHeader	(key, count, collapsed) => VNodeChild	name and count	Content to the right of the chevron.
getRowKey	(item: T) => string	position	Stable identity for a real row.
groupOrder	string[]	first seen	Keys listed here come first.

useTableTreeState

Name	Type	Default	Description
data	T[]	required	Nested rows.
idKey	string | (item) => string	required	Node identity. It remembers expansion and skips a cycle.
childrenKey	string	children	Field that holds child rows.
expandedIds	Set<string>	-	Controlled expansion. Omit it and the state stays inside the composable.
defaultExpandedIds	Iterable<string>	empty	Nodes open on the first render.
onExpandedIdsChange	(ids) => void	-	Called when the open set changes.
hasExpandAllControl	boolean	false	Puts an expand-all button on the tree column header.
hasRowClickExpansion	boolean	false	A row click toggles a node that has children. Clicks on controls or a text selection do not.
indent	'sm' | 'md' | 'lg'	md	How far each level steps in.
treeColumnKey	string	first ordinary column	Column that shows the indent and chevron.
sortSiblings	(siblings: T[]) => T[]	-	Order for one level.

useTableRowExpansion

Name	Type	Default	Description
expandedKeys	Set<string>	required	Rows that are open. The caller owns the set.
onToggle	(key: string) => void	required	Called from the chevron, a row click, or the context menu.
getRowKey	(item: T) => string	required	Row identity.
renderExpanded	(item: T) => VNodeChild	required	Detail content. It lines up with the first column, past the chevron.
getIsItemExpandable	(item: T) => boolean	every row	Which rows can open.
panelVariant	'muted' | 'transparent'	transparent	Panel surface. Transparent continues the table surface. Muted separates the detail from the data.
hasRowClickExpansion	boolean	false	A row click toggles the panel. Clicks on controls or a text selection do not.

useTableStickyColumns

Name	Type	Default	Description
startKeys	string[]	empty	Pin from the first column through the last listed key.
endKeys	string[]	empty	Pin from the first listed key through the last column.

useTableRowStatus

getStatus returns null for an empty cell. A semantic status draws the success, warning, or error icon. A custom status takes a color: an icon when one is given, otherwise a dot. The label is in the tooltip and in the accessible name.

useTableRowIndex

data is the rows the table is painting, after grouping. startFrom begins at 1. getRowKey recognizes the same row; without it, identity is the object itself. label is the column header, and the default is a hash mark.

proportional(value) shares leftover width. Its default minimum is 120px. A column with no width is flexible with a 60px floor. pixel(value) sets both width and minimum width.

TableSelectionToolbar

count is the number of selected rows. The clear event asks the caller to drop the selection. The default slot is the bulk actions. The count, the clear label, and the region name come from the table messages.

Theming

Header text uses the label size, semibold weight, and the secondary text color. Body text uses the body size. A selected row uses the accent muted fill. Stripes use the muted background. Hover uses the hover overlay. Inside a card, the scroll area uses the card’s container padding so the first and last cells line up with the heading.