Table

1// Base UI base table — THIS FAMILY IS BASE-INDEPENDENT. Neither Radix nor Base UI publishes a
2// table primitive, so upstream ships the same plain host elements in both bases and this file is
3// the radix base's content unchanged. (The React Aria base is the odd one out: RAC does have a
4// table, so that base runs on real collection components with generic item types.)
5//
6// There is consequently no dialect to get wrong here and nothing to verify against a primitive:
7// `data-[state=selected]` on the row is written by the CONSUMER — a data-table library setting
8// selection state — not emitted by anything underneath, so unlike checkbox or toggle it is not a
9// Radix-ism that needs translating.
10import { cn } from '@/lib/utils';
11 
12// Multi-host family (div/table/thead/tbody/tr/th/td/caption): no single host
13// prop table applies, so the shared alias stays structural.
14type Props = { className?: string } & Record<string, unknown>;
15 
16export function Table({ className, ...props }: Props) @{
17	<div data-slot="table-container" className="relative w-full overflow-x-auto">
18		<table
19			data-slot="table"
20			className={cn('w-full caption-bottom text-sm', className)}
21			{...props}
22		/>
23	</div>
24}
25 
26export function TableHeader({ className, ...props }: Props) @{
27	<thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
28}
29 
30export function TableBody({ className, ...props }: Props) @{
31	<tbody
32		data-slot="table-body"
33		className={cn('[&_tr:last-child]:border-0', className)}
34		{...props}
35	/>
36}
37 
38export function TableFooter({ className, ...props }: Props) @{
39	<tfoot
40		data-slot="table-footer"
41		className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
42		{...props}
43	/>
44}
45 
46export function TableRow({ className, ...props }: Props) @{
47	<tr
48		data-slot="table-row"
49		className={cn(
50			'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
51			className,
52		)}
53		{...props}
54	/>
55}
56 
57export function TableHead({ className, ...props }: Props) @{
58	<th
59		data-slot="table-head"
60		className={cn(
61			'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
62			className,
63		)}
64		{...props}
65	/>
66}
67 
68export function TableCell({ className, ...props }: Props) @{
69	<td
70		data-slot="table-cell"
71		className={cn(
72// … truncated