Table

Source: client/lib/theme/vueda-tailwind/grid/index.js

The card surface around the scroll container: fill, radius, and --vueda-hairline-width edge. Its padding matches the edge width, so the scroll container sits inside the painted edge and no row or sticky header cell can cover it.

Vue component: Table

Slot	Default classes	Description
frame	2 classes	The card surface around the scroll container: fill, radius, and --vueda-hairline-width edge. Its padding matches the edge width, so the scroll container sits inside the painted edge and no row or sticky header cell can cover it.
container	3 classes	The scroll container around the native table, inside Table.frame. It owns horizontal overflow and the sticky-table height cap used when Table receives sticky. Its radius is the card radius less the edge width, so scrolled content clips to the inside of the frame's corners.
table	3 classes	The native <table> element. It carries the numeric font features, border model, and data-density hook that TableHead.root and TableCell.root read. Density tiers map default, compact, and condensed rows to progressively tighter row heights.

frame

The card surface around the scroll container: fill, radius, and --vueda-hairline-width edge. Its padding matches the edge width, so the scroll container sits inside the painted edge and no row or sticky header cell can cover it.

Default classes:

relative w-full
rounded-vueda-card hairline hairline-border bg-card p-[var(--vueda-hairline-width)]

Source: client/lib/theme/vueda-tailwind/grid/Table.theme.js:20

container

The scroll container around the native table, inside Table.frame. It owns horizontal overflow and the sticky-table height cap used when Table receives sticky. Its radius is the card radius less the edge width, so scrolled content clips to the inside of the frame's corners.

Default classes:

relative w-full overflow-auto
rounded-[calc(var(--vueda-card-radius)-var(--vueda-hairline-width))]
data-[sticky]:overflow-y-auto data-[sticky]:max-h-[var(--vueda-tbl-max-h,30rem)]

Source: client/lib/theme/vueda-tailwind/grid/Table.theme.js:29

table

The native <table> element. It carries the numeric font features, border model, and data-density hook that TableHead.root and TableCell.root read. Density tiers map default, compact, and condensed rows to progressively tighter row heights.

Default classes:

w-full caption-bottom text-body
border-separate border-spacing-0
[font-variant-numeric:tabular-nums_slashed-zero]

Source: client/lib/theme/vueda-tailwind/grid/Table.theme.js:39