Components
Table
A styled HTML table.
Table is a styled wrapper around the native HTML table elements, with consistent spacing and borders.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/table.jsonUsage
"use client";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function Example() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Jane Doe</TableCell>
<TableCell>jane@example.com</TableCell>
</TableRow>
</TableBody>
</Table>
);
}Examples
Default
| Name | Role | |
|---|---|---|
| Jane Doe | jane@example.com | Admin |
| John Smith | john@example.com | Member |
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Tabledata-slot="table" | <table>HTML | — |
TableHeaderdata-slot="table-header" | <thead>HTML | — |
TableBodydata-slot="table-body" | <tbody>HTML | — |
TableFooterdata-slot="table-footer" | <tfoot>HTML | — |
TableRowdata-slot="table-row" | <tr>HTML | — |
TableHeaddata-slot="table-head" | <th>HTML | — |
TableCelldata-slot="table-cell" | <td>HTML | — |
TableCaptiondata-slot="table-caption" | <caption>HTML | — |
Changelog
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on