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

# TableRow

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

> The row slot shared by header, body, and footer sections. It provides hover feedback, selected-row tinting, the leading selected rail, and the standard divider. The divider sits on the row's cells rather than the `<tr>`: [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table) uses the separated border model, which does not paint borders on rows.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TableRow.md#theme-key-TableRow-root) | 5 classes | The row slot shared by header, body, and footer sections. It provides hover feedback, selected-row tinting, the leading selected rail, and the standard divider. The divider sits on the row's cells rather than the `<tr>`: [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table) uses the separated border model, which does not paint borders on rows. |

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

## root

> The row slot shared by header, body, and footer sections. It provides hover feedback, selected-row tinting, the leading selected rail, and the standard divider. The divider sits on the row's cells rather than the `<tr>`: [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table) uses the separated border model, which does not paint borders on rows.

Default classes:

```text
hover:bg-accent/50 active:bg-accent
data-[state=selected]:bg-primary/[0.06] data-[state=selected]:hover:bg-primary/[0.09]
data-[state=selected]:active:bg-primary/[0.12]
data-[state=selected]:[box-shadow:inset_2px_0_0_0_var(--primary)]
[&>*]:border-b-hairline transition-colors
```

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