# Table

Native table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/table
```

## Usage

```tsx
import { Table, TableBody, TableCard, TableCell, TableHead, TableHeader, TableRow } from '@/components/fetaui/table'

export function Example() {
  return (
    <TableCard>
      <Table>
        <TableHeader>
          <TableRow><TableHead>Client</TableHead><TableHead type="amount">Amount</TableHead></TableRow>
        </TableHeader>
        <TableBody>
          <TableRow><TableCell type="title">Northwind</TableCell><TableCell type="amount">$1,280.00</TableCell></TableRow>
        </TableBody>
      </Table>
    </TableCard>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| Table density | compact, comfortable | comfortable |
| Table styleKind | grid, plain | plain |
| Table striped | boolean | false |
| Table caption | ReactNode |  |
| Table noScroll | boolean | false |
| Table animated | boolean | true |
| TableCard title, meta, caption | ReactNode |  |
| TableRow rowKey | string |  |
| TableRow selected | boolean |  |
| TableHead sort | asc, desc, false |  |
| TableHead onSort | () => void |  |
| TableCell type | text, title, muted, number, amount, mono, avatar, badge, checkbox, action, tree | text |
| TableCell sub | ReactNode |  |
| TableCell avatar | ReactNode |  |
| TableCell selected, editing, elevated, sorted | boolean | false |
| TableCell noDivider, noRule | boolean | false |
| TableCell level | 0 to 2 | 0 |
| TableCell expanded, onToggle | boolean, () => void |  |
| useRowReorder | (body, order, still, ms?) => void |  |

## When to use

- For records people read and compare.
- Plain for app tables, Grid for dense numbers.
- Pass a Type to each cell so numbers align and stay legible.

## When not to use

- For sorting, paging and bulk actions together: use Data Table.
- For tens of thousands of rows: use Data Grid.
- For page layout.

## 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.