Primitives
Table
Responsive data table for lists, comparisons, and structured records.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Table├── TableHeader├── TableBody├── TableFooter├── TableRow├── TableHead├── TableCell└── TableCaptionThe refined source installs this primitive from src/registry/sources/refined/ui/table.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/table.jsonRaw code
Primary installed primitive source
Table slot
src/registry/sources/refined/ui/table.tsx
import type { TableCaptionProps, TableCellProps, TableHeadProps, TableProps, TableRowProps, TableSectionProps,} from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Plain semantic <table> (no Base UI), wrapped overflow-x-auto so wide tables scroll not burst. Hairlines/text/heads/hover all track theme tokens — no per-skin work.export function Table({ className, ...props }: TableProps) { return ( <div data-ui="agent" data-slot="table-container" className="relative w-full overflow-x-auto"> <table data-ui="agent" data-slot="table" className={cn("w-full caption-bottom border-collapse text-body", skinSlot("table", {}), className)} {...props} /> </div> );}export function TableHeader({ className, ...props }: TableSectionProps) { return <thead data-ui="agent" data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:border-border", className)} {...props} />;}export function TableBody({ className, ...props }: TableSectionProps) { return <tbody data-ui="agent" data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;}export function TableFooter({ className, ...props }: TableSectionProps) { return ( <tfoot data-ui="agent" data-slot="table-footer" className={cn("border-t border-border bg-foreground/3 font-medium [&>tr]:last:border-b-0", className)} {...props} /> );}export function TableRow({ className, ...props }: TableRowProps) { return ( <tr data-ui="agent" data-slot="table-row" className={cn("border-b border-border transition-colors hover:bg-foreground/3 data-[state=selected]:bg-foreground/5", className)} {...props} /> );}export function TableHead({ className, ...props }: TableHeadProps) { return ( <th data-ui="agent" data-slot="table-head" className={cn( "h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className, )} {...props} /> );}export function TableCell({ className, ...props }: TableCellProps) { return ( <td data-ui="agent" data-slot="table-cell" className={cn("whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} /> );}export function TableCaption({ className, ...props }: TableCaptionProps) { return <caption data-ui="agent" data-slot="table-caption" className={cn("mt-4 text-body text-muted-foreground", className)} {...props} />;}