# rn-table
URL: /docs/native/components/table

Lightweight data table with sorting, striped rows, grouping, and built-in pagination.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-table
```

## Usage

```tsx
import { Table } from '@/components/docyrus-native/table';

type Product = { id: string; name: string; price: number };

const data: Product[] = [
  { id: '1', name: 'Widget', price: 9.99 },
  { id: '2', name: 'Gadget', price: 19.99 },
];

<Table
  data={data}
  columns={[
    { key: 'name', title: 'Name', sortable: true },
    { key: 'price', title: 'Price', align: 'right' },
  ]}
  keyExtractor={(item) => item.id}
/>
```

### Striped & Bordered

```tsx
<Table data={data} columns={columns} keyExtractor={(item) => item.id} striped bordered />
```

### With Sorting

```tsx
const [sortKey, setSortKey] = useState<string | undefined>();
const [sortDir, setSortDir] = useState<'asc' | 'desc' | null>(null);

<Table
  data={data}
  columns={columns}
  keyExtractor={(item) => item.id}
  sortKey={sortKey}
  sortDirection={sortDir ?? undefined}
  onSort={(key, dir) => { setSortKey(key); setSortDir(dir); }}
/>
```

### With Pagination

```tsx
<Table
  data={data}
  columns={columns}
  keyExtractor={(item) => item.id}
  currentPage={page}
  totalPages={5}
  totalItems={50}
  pageSize={10}
  onPageChange={setPage}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `T[]` | — | Array of data items to display |
| `columns` | `TableColumn<T>[]` | — | Column definitions |
| `keyExtractor` | `(item: T) => string` | — | Function to extract unique key per row |
| `sortKey` | `string` | — | Currently sorted column key |
| `sortDirection` | `'asc' \| 'desc'` | — | Current sort direction |
| `onSort` | `(key: string, direction: 'asc' \| 'desc' \| null) => void` | — | Sort change callback |
| `striped` | `boolean` | `false` | Alternate row background colors |
| `bordered` | `boolean` | `false` | Show column border lines |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Table cell padding and font size |
| `groupBy` | `string` | — | Data key to group rows by |
| `groupHeaderRender` | `(groupKey: string, items: T[]) => ReactNode` | — | Custom group header renderer |
| `emptyMessage` | `string` | `'No data available'` | Message when data is empty |
| `loading` | `boolean` | `false` | Show loading state |
| `currentPage` | `number` | — | Current page for pagination |
| `totalPages` | `number` | — | Total pages for pagination |
| `totalItems` | `number` | — | Total item count for pagination info |
| `pageSize` | `number` | — | Items per page for pagination info |
| `onPageChange` | `(page: number) => void` | — | Page change callback |
| `className` | `string` | — | Additional CSS classes |

### TableColumn\<T\>

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `key` | `string` | — | Data field key |
| `title` | `string` | — | Column header text |
| `width` | `number` | `120` | Column width in pixels |
| `sortable` | `boolean` | `false` | Whether column is sortable |
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
| `render` | `(value: unknown, item: T, index: number) => ReactNode` | — | Custom cell renderer |

## Translation Keys

Built-in copy is read through `useUiTranslation()` — provide these keys via `<UiTranslationProvider>`. Without a provider the English fallback is shown.

| Key | English fallback | Used for |
|-----|------------------|----------|
| `ui.table.loading` | Loading... | Loading row |
| `ui.table.empty` | No data available | Empty text (`emptyMessage` prop wins) |

## Type Exports

| Type | Description |
|------|-------------|
| `TableProps<T>` | Props for Table component |
| `TableColumn<T>` | Column definition type |
| `TableSize` | `'sm' \| 'md' \| 'lg'` |