# Data Grid

A spreadsheet grid for large data: pinned columns, range selection, editing, and live Sum and Avg.

Tier: Free

## Installation

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

## Usage

```tsx
import { DataGrid } from '@/components/fetaui/data-grid'

export function Example({ columns, rows }) {
  return <DataGrid title="Renewals" columns={columns} rows={rows} onCellChange={save} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| columns | GridColumn[] | required |
| rows | GridRow[] | required |
| loading | boolean | false |
| defaultRange | { from, to } |  |
| defaultSelected | string[] | [] |
| onCellChange | (rowId, key, value) => void |  |
| onDelete | (ids) => void |  |
| onCopy | (ids) => void |  |
| onExport | (ids) => void |  |
| animated | boolean | true |

## When to use

- For thousands of rows people scan, select and edit.
- When people work from the keyboard.

## When not to use

- For a page of records: use Data Table.

## Accessibility

- Uses grid, row and gridcell with aria-rowcount, so the full size is announced while only some rows render.
- aria-activedescendant follows the active cell.
- The status bar is a polite live region.

## Motion

- Selection is instant, so typing stays fast.
- Editing lifts the cell to the surface.
- The pinned shadow fades in over 120 ms, only when scrolled.
- Status numbers tween. The bulk bar crossfades with a 4 px slide over 200 ms.
- Menus scale from 0.96 over 160 ms. With reduced motion, they fade.