Table
Styled data table with header, body, and footer sections. Install Table from the VLLNT UI registry with the shadcn CLI.
What it is and when to use
Table is a set of unstyled, composable primitives — Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption — that render semantic HTML table markup with consistent styling. Reach for it when you want full control over rows and cells and only need the visual layer, not built-in sorting or pagination. It wraps the table in a horizontally scrollable container and adds hover and selected-row styles you compose yourself.
DataStyled data table with header, body, and footer sections. Part of the data family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Table to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/table.jsonSource
import { cn } from "../../lib/utils";
const Table = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableElement> & {
ref?: React.Ref<HTMLTableElement>;
}) => (
<div className="relative w-full overflow-auto">
<table
className={cn("w-full caption-bottom text-sm", className)}
ref={ref}
{...props}
/>
</div>
);
Table.displayName = "Table";
const TableHeader = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref?: React.Ref<HTMLTableSectionElement>;
}) => (
<thead className={cn("[&_tr]:border-b", className)} ref={ref} {...props} />
);
TableHeader.displayName = "TableHeader";
const TableBody = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref?: React.Ref<HTMLTableSectionElement>;
}) => (
<tbody
className={cn("[&_tr:last-child]:border-0", className)}
ref={ref}
{...props}
/>
);
TableBody.displayName = "TableBody";
const TableFooter = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref?: React.Ref<HTMLTableSectionElement>;
}) => (
<tfoot
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className,
)}
ref={ref}
{...props}
/>
);
TableFooter.displayName = "TableFooter";
const TableRow = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableRowElement> & {
ref?: React.Ref<HTMLTableRowElement>;
}) => (
<tr
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className,
)}
ref={ref}
{...props}
/>
);
TableRow.displayName = "TableRow";
const TableHead = ({
className,
ref,
...props
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
ref?: React.Ref<HTMLTableCellElement>;
}) => (
<th
className={cn(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className,
)}
ref={ref}
{...props}
/>
);
TableHead.displayName = "TableHead";
const TableCell = ({
className,
ref,
...props
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
ref?: React.Ref<HTMLTableCellElement>;
}) => (
<td
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
ref={ref}
{...props}
/>
);
TableCell.displayName = "TableCell";
const TableCaption = ({
className,
ref,
...props
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
ref?: React.Ref<HTMLTableCaptionElement>;
}) => (
<caption
className={cn("mt-4 text-sm text-muted-foreground", className)}
ref={ref}
{...props}
/>
);
TableCaption.displayName = "TableCaption";
export {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
};
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.
FAQ
- What is Table?
- Table is a collection of composable React primitives — Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption — for building styled, semantic HTML tables.
- How do I add Table?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/table.json` to install it into your project via the shadcn CLI.
- Does Table include sorting or pagination?
- No. Table only renders the styled markup and a scrollable container; for built-in sorting, filtering, selection, and pagination use the Data Table component instead.