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

# TableCell

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

> The body cell slot for `<td>` elements. It applies the density tiers from [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table), keeps checkbox columns compact, and honors `data-numeric` or `data-mono` directly on the cell.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TableCell.md#theme-key-TableCell-root) | 7 classes | The body cell slot for `<td>` elements. It applies the density tiers from [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table), keeps checkbox columns compact, and honors `data-numeric` or `data-mono` directly on the cell. |

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

## root

> The body cell slot for `<td>` elements. It applies the density tiers from [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table), keeps checkbox columns compact, and honors `data-numeric` or `data-mono` directly on the cell.

Default classes:

```text
p-2 align-middle whitespace-nowrap
[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
[[data-density=default]_&]:h-8 [[data-density=default]_&]:py-1.5
[[data-density=compact]_&]:h-7 [[data-density=compact]_&]:py-1
[[data-density=condensed]_&]:h-6 [[data-density=condensed]_&]:py-0.5 [[data-density=condensed]_&]:text-xs
data-[numeric]:text-right data-[numeric]:font-mono
data-[mono]:font-mono
```

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