Native table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/tablePlayground
Invoices5 PAID OF 7
| Invoice | Status | Method | |
|---|---|---|---|
| INV001 | Paid | Credit card | $250.00 |
| INV002 | Pending | Mobile wallet | $150.00 |
| INV003 | Unpaid | Bank transfer | $350.00 |
| INV004 | Paid | Credit card | $450.00 |
| INV005 | Paid | Mobile wallet | $550.00 |
| Total | $1,750.00 | ||
A list of your recent invoices.
Actions
Products3 ITEMS
| Product | Price | Actions |
|---|---|---|
| Wireless mouse | $29.99 | |
| Mechanical keyboard | $129.99 | |
| USB C hub | $49.99 |
Row actions open a menu from the more button.
Usage
UsageOCT 2026
| Model | Requests | Tokens | Cost |
|---|---|---|---|
| Aster Max | 1,204 | 8.2M | $412.10 |
| Aster Core | 9,880 | 41.6M | $624.00 |
| Aster Mini | 22,310 | 58.9M | $73.60 |
| Embeddings | 4,402 | 12.3M | $1.23 |
| Total | 37,796 | 121M | $1,110.93 |
Striped rows help scan long numbers.
Plain, Comfortable
| Type | Cell |
|---|---|
| Text | Regular ink |
| Title | Medium ink |
| Muted | Secondary |
| Number | 1,240 |
| Amount | $1,240.00 |
| Mono | a4f2c1 |
| Avatar | Emma Collins |
| Badge | Draft |
| Checkbox | |
| Action | |
| Tree | api-produs-east-1 |
| Selected | Ink ring and fill handle |
| Editing | Lifted with a caret |
| Elevated | Surface and 8% ring |
Grid, Compact
| Type | Cell |
|---|---|
| Text | Regular ink |
| Title | Medium ink |
| Muted | Secondary |
| Number | 1,240 |
| Amount | $1,240.00 |
| Mono | a4f2c1 |
| Avatar | Emma Collins |
| Badge | Draft |
| Checkbox | |
| Action | |
| Tree | api-produs-east-1 |
| Selected | Ink ring and fill handle |
| Editing | Lifted with a caret |
| Elevated | Surface and 8% ring |
Density
Style
Icons animation
Striped
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/table
Accessibility
- Real table, thead, th and td elements, so screen readers announce rows and columns.
- Sorted columns set aria-sort. Sort controls are real buttons.
- Selected rows set aria-selected.
- Selection is a wash and a checkbox, never color alone.
Motion
- Selection is instant, so keyboard work stays fast.
- Sorting slides rows to their new place in 240 ms by transform.
- Rows jump instead of sliding past 200 rows.
- The sort arrow turns over 150 ms and the column wash appears with it.
- With reduced motion, rows reorder at once.
Responsive behavior
- Scrolls sideways inside its own frame when columns need more room.
- 14 px text on Web and 15 px on Mobile. Rows grow to 52.
- Tree chevrons and sort buttons grow to 44 on Mobile.
Performance
- Native table markup with no Motion. Sideways scroll sits in its own frame.
- useRowReorder slides rows with a transform. Past 200 rows they jump, so big tables stay instant.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCard and useRowReorder.
- TableCell type sets the content: text, title, muted, number, amount, mono, avatar, badge, checkbox, action, tree.
- Sorting is yours: TableHead takes sort and onSort, and you reorder the rows. Pass rowKey to slide them.
- Use noScroll when row menus must float past the table.
Related
Data TableComponentSort, search, filter, page and act in bulk on one set of records, with Data Table Header and Table Toolbar on the tray.Tree TableComponentRows that roll up, with guides for depth. Selecting rows totals their spend in the footer.Data GridComponentA spreadsheet grid for large data: pinned columns, range selection, editing, and live Sum and Avg.Comparison TableComponentPlans as columns with the home column washed, grouped features, yes, no and partial marks, and a switch for only differences.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.