009
Table
Data| No. | Title | Kind | Year |
|---|---|---|---|
| 001 | Calendar | Work | 2026 |
| 002 | Button | Work | 2026 |
| 003 | Tetris | Play | 2026 |
| 004 | Input | Work | 2026 |
| 005 | Snake | Play | 2026 |
Customize
Header
Striped
Caption
Code
<Table>
<TableHeader>
<TableRow>
<TableHead>No.</TableHead>
<TableHead>Title</TableHead>
<TableHead>Kind</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>001</TableCell>
<TableCell>Calendar</TableCell>
<TableCell>Work</TableCell>
</TableRow>
…
</TableBody>
</Table>Install
npx shadcn@latest add https://components.haedong.dev/r/table.json
Props
Seven thin wrappers over the native table elements (Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption). Each takes its element's native props; className is the API.
| Prop | Type | Description |
|---|---|---|
| Table | <table> | Wrapped in a horizontal-scroll container so a wide table never widens the page. |
| Table.striped | boolean | Zebra: every even body row gets the muted 5% fill, for wide tables. Defaults to false. |
| TableHeader / TableHead | <thead> / <th scope="col"> | Muted uppercase column labels, bottom-aligned. |
| TableRow | <tr> | Ends in a hairline. No zebra or hover fill by default. |
| TableCell | <td> | Top-aligned, mono, right-padded except the last column. |
| TableCaption | <caption> | Muted uppercase, rendered below the table. |