# Data Table

Compact table in a card with a quiet header, tappable rows and cells that hold text or custom content. Sorting reorders rows smoothly, and the selected row stays highlighted.

> Composed · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add data-table
```

## Import

```tsx
import { DataTable } from "@/components/ui/data-table/data-table";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `columns` | `DataTableColumn[]` | — |
| `rows` | `Record<string, React.ReactNode>[]` | Cell values keyed by column.key. Strings render as text; pass elements  (Badge, Chip, price Text) for richer cells. |
| `onRowPress?` | `(row: Record<string, React.ReactNode>, index: number) => void` | Makes rows pressable with ink + haptic. |
| `selectedIndex?` | `number | null` | Index (into `rows`) of the selected row — it carries a lit band. |
| `rowLabel?` | `string` | Label appended to each row's a11y announcement, e.g. "transaction". |
| `sort?` | `DataTableSort | null` | Controlled sort. Omit for uncontrolled (see `defaultSort`). |
| `defaultSort?` | `DataTableSort | null` | Initial sort for uncontrolled use. |
| `onSortChange?` | `(sort: DataTableSort) => void` | — |
| `emptyLabel?` | `string` | Shown when `rows` is empty. Default "Nothing here yet". |
| `className?` | `string` | — |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/data-table