---
url: "https://vueda.dev/v3/reference/theming/keys/Table.md"
title: "Table"
---

# Table

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

> The card surface around the scroll container: fill, radius, and [--vueda-hairline-width](/v3/reference/theming/tokens/base.md#css-token-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](/v3/reference/api/vue/Table.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [frame](/v3/reference/theming/keys/Table.md#theme-key-Table-frame) | 2 classes | The card surface around the scroll container: fill, radius, and [--vueda-hairline-width](/v3/reference/theming/tokens/base.md#css-token-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](/v3/reference/theming/keys/Table.md#theme-key-Table-container) | 3 classes | The scroll container around the native table, inside [Table.frame](/v3/reference/theming/keys/Table.md#theme-key-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](/v3/reference/theming/keys/Table.md#theme-key-Table-table) | 3 classes | The native `<table>` element. It carries the numeric font features, border model, and `data-density` hook that [TableHead.root](/v3/reference/theming/keys/TableHead.md#theme-key-TableHead-root) and [TableCell.root](/v3/reference/theming/keys/TableCell.md#theme-key-TableCell-root) read. Density tiers map default, compact, and condensed rows to progressively tighter row heights. |

<a id="theme-key-Table-frame"></a>

## frame

> The card surface around the scroll container: fill, radius, and [--vueda-hairline-width](/v3/reference/theming/tokens/base.md#css-token-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:

```text
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`

<a id="theme-key-Table-container"></a>

## container

> The scroll container around the native table, inside [Table.frame](/v3/reference/theming/keys/Table.md#theme-key-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:

```text
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`

<a id="theme-key-Table-table"></a>

## table

> The native `<table>` element. It carries the numeric font features, border model, and `data-density` hook that [TableHead.root](/v3/reference/theming/keys/TableHead.md#theme-key-TableHead-root) and [TableCell.root](/v3/reference/theming/keys/TableCell.md#theme-key-TableCell-root) read. Density tiers map default, compact, and condensed rows to progressively tighter row heights.

Default classes:

```text
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`