Display
Table
Semantic HTML table with styled header, body, footer, and caption slots.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/table
Examples
Actions
A table showing actions for each row using a <DropdownMenu /> component.
| Product | Price | Actions |
|---|---|---|
| Wireless Mouse | $29.99 | |
| Mechanical Keyboard | $129.99 | |
| USB-C Hub | $49.99 |
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
| الفاتورة | الحالة | الطريقة | المبلغ |
|---|---|---|---|
| INV001 | مدفوع | بطاقة ائتمانية | $250.00 |
| INV002 | قيد الانتظار | PayPal | $150.00 |
| INV003 | غير مدفوع | تحويل بنكي | $350.00 |
| INV004 | مدفوع | بطاقة ائتمانية | $450.00 |
| INV005 | مدفوع | PayPal | $550.00 |
| INV006 | قيد الانتظار | تحويل بنكي | $200.00 |
| INV007 | غير مدفوع | بطاقة ائتمانية | $300.00 |
| المجموع | $2,500.00 | ||
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Table, TableHeader, TableBody, TableFooter,
TableRow, TableHead, TableCell, TableCaption,
} from "@codefast/ui/table";
<Table>
<TableHeader>
<TableRow><TableHead>…</TableHead></TableRow>
</TableHeader>
<TableBody>
<TableRow><TableCell>…</TableCell></TableRow>
</TableBody>
</Table>
API reference
Props for each part of the component. All native element props are also forwarded.
Table parts
Thin styled wrappers over real HTML table elements.
| Prop | Type | Default | Description |
|---|---|---|---|
| TableHeader / TableBody / TableFooter | ReactNode | — | Map to <thead>, <tbody>, <tfoot>. |
| TableRow / TableHead / TableCell | ReactNode | — | Rows, header cells (<th>), and body cells (<td>). |
| TableCaption | ReactNode | — | A caption describing the table for assistive tech. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Renders real <table> markup, so semantics and navigation come for free.
- Use TableCaption (or aria-label) to describe what the table contains.
- Keep header cells in <th> so columns are announced.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for genuinely tabular data with shared columns.
- Right-align numeric columns and use tabular figures.
Don’t
- Don’t use a table purely for layout.
- Don’t drop the header row — it names the columns.