Components

Table

Responsive data table for lists, comparisons, and structured records.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Unpaid	Bank Transfer	$350.00
Total			$750.00

Composition

Anatomy

<Table>
- <TableCaption />
- <TableHeader>
  - <TableRow>
    - <TableHead />
    </TableRow>
  </TableHeader>
- <TableBody>
  - <TableRow>
    - <TableCell />
    </TableRow>
  </TableBody>
- <TableFooter>
  - <TableRow>
    - <TableCell />
    </TableRow>
  </TableFooter>
</Table>

Installation

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/table.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/table.json

See registry manifest

Dependencies

Scroll areascroll-areaPrimitive

Raw code

Primary installed source

src/registry/sources/control-ui/ui/table.tsx

import type { ComponentProps, CSSProperties } from "react";

import type { TableKnobStyle } from "@/components/control-ui/knob-contracts/table-knobs";

import { cn } from "@/components/control-ui/lib/cn";

import { ScrollArea } from "@/components/control-ui/ui/scroll-area";

export type TableProps = Omit<ComponentProps<"table">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableHeaderProps = Omit<ComponentProps<"thead">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableBodyProps = Omit<ComponentProps<"tbody">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableFooterProps = Omit<ComponentProps<"tfoot">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableRowProps = Omit<ComponentProps<"tr">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableHeadProps = Omit<ComponentProps<"th">, "style"> & { style?: CSSProperties & TableKnobStyle };

export type TableCellProps = ComponentProps<"td"> & { style?: CSSProperties & TableKnobStyle };

export type TableCaptionProps = Omit<ComponentProps<"caption">, "style"> & { style?: CSSProperties & TableKnobStyle };

export function Table({ className, ...props }: TableProps) {

return (

<div data-control-ui="table" data-control-family="table" data-slot="container" className="relative w-full">

<ScrollArea lockAxis="y" aria-label={props["aria-label"]} aria-labelledby={props["aria-labelledby"]}>

<table

data-control-ui="table"

data-control-family="table"

data-slot="root"

className={cn("w-full caption-bottom", className)}

{...props}

/>

</ScrollArea>

</div>

);

}

export function TableHeader({ className, ...props }: TableHeaderProps) {

  return <thead data-control-ui="table" data-control-family="table" data-slot="header" className={className} {...props} />;

}

export function TableBody({ className, ...props }: TableBodyProps) {

  return <tbody data-control-ui="table" data-control-family="table" data-slot="body" className={className} {...props} />;

}

export function TableFooter({ className, ...props }: TableFooterProps) {

  return <tfoot data-control-ui="table" data-control-family="table" data-slot="footer" className={className} {...props} />;

}

export function TableRow({ className, ...props }: TableRowProps) {

return <tr data-control-ui="table" data-control-family="table" data-slot="row" className={className} {...props} />;

}

export function TableHead({ className, ...props }: TableHeadProps) {

return (

<th

data-control-ui="table"

data-control-family="table"

data-slot="head"

className={cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className)}

{...props}

/>

);

}

export function TableCell({ className, ...props }: TableCellProps) {

return (

<td

data-control-ui="table"

data-control-family="table"

data-slot="cell"

className={cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className)}

{...props}

/>

);

}

export function TableCaption({ className, ...props }: TableCaptionProps) {

  return <caption data-control-ui="table" data-control-family="table" data-slot="caption" className={className} {...props} />;

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-table-* · 7 knobsHow the cascade resolves

--cui-table-background<color>transparent

--cui-table-foreground<color>var(--foreground)

--cui-table-border-color<color>var(--border)

--cui-table-row-hover-background<color>oklch(from var(--foreground) l c h / 0.03)

--cui-table-row-selected-background<color>oklch(from var(--foreground) l c h / 0.05)

--cui-table-header-foreground<color>var(--muted-foreground)

--cui-table-footer-background<color>oklch(from var(--foreground) l c h / 0.03)