# Data Table

Sort, search, filter, page and act in bulk on one set of records, with Data Table Header and Table Toolbar on the tray.

Tier: Free

## Installation

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

## Usage

```tsx
import { DataTable } from '@/components/fetaui/data-table'

const columns = [
  { key: 'name', label: 'Project', type: 'title', sortable: true, value: (row) => row.name, card: 'title' },
  { key: 'score', label: 'Score', type: 'amount', sortable: true, value: (row) => row.score, card: 'value' },
]

export function Example({ rows }) {
  return <DataTable title="Projects" noun="projects" columns={columns} rows={rows} getId={(row) => row.id} action={{ label: 'New project' }} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| noun | string | rows |
| columns | DataColumn[] | required |
| rows | Row[] | required |
| getId | (row) => string | required |
| filters | DataFilter[] | [] |
| actions | DataAction[] | [] |
| action | { label, icon, onClick } |  |
| pageSizes | number[] | [10, 25, 50] |
| defaultSort | { key, direction } |  |
| defaultSelected | string[] | [] |
| defaultQuery | string |  |
| defaultFilters | FilterChip[] | [] |
| loading | boolean | false |
| animated | boolean | true |
| DataTableHeader | title, count, total, query, onQueryChange, selected, actions |  |
| TableToolbar | chips, fields, onAdd, onRemove, onClear |  |

## When to use

- For records people compare and act on in bulk.
- Use the header and toolbar alone above your own table.

## When not to use

- For a static list of a few rows: use Table.
- When rows roll up: use Tree Table.
- For cell level editing: use Data Grid.

## Accessibility

- Real table semantics, with aria-sort on the sorted header and aria-selected on rows.
- The bulk bar is a labelled toolbar.
- Mobile cards repeat the same checkboxes with the same names.
- Status is a label and a mark, never color alone.

## Motion

- Sorting toggles asc, desc, off. Rows slide 300 ms by transform and jump past 200 rows.
- The header crossfades into bulk actions with a 4 px slide over 200 ms.
- Chips scale from 0.9 on a spring.
- Skeleton rows shimmer on a 1,200 ms loop that pauses offscreen.
- With reduced motion, rows reorder at once and the skeleton is static.