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

# TableHead

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

> The header cell slot for `<th>` elements. It owns compact header typography, density heights, sticky positioning, checkbox offsets, and numeric sort-icon ordering; see [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table).

Vue component: [TableHead](/v3/reference/api/vue/TableHead.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TableHead.md#theme-key-TableHead-root) | 9 classes | The header cell slot for `<th>` elements. It owns compact header typography, density heights, sticky positioning, checkbox offsets, and numeric sort-icon ordering; see [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table). |

<a id="theme-key-TableHead-root"></a>

## root

> The header cell slot for `<th>` elements. It owns compact header typography, density heights, sticky positioning, checkbox offsets, and numeric sort-icon ordering; see [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table).

Default classes:

```text
text-foreground
h-10 px-2 text-left align-middle
font-semibold text-[length:var(--vueda-text-supporting)] whitespace-nowrap
[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
[[data-density=compact]_&]:h-8
[[data-density=condensed]_&]:h-7 [[data-density=condensed]_&]:text-[11px]
data-[numeric]:text-right data-[numeric]:[&_[data-slot=sort-icon]]:order-first
[[data-sticky]_&]:sticky [[data-sticky]_&]:top-0 [[data-sticky]_&]:z-2
[[data-sticky]_&]:bg-card
```

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