# Data Table

A table with sorting, filtering, pagination and row selection.

Group: Data

## Import

```tsx
import { DataTable } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function DataTableDemo() {
  return (
    <DataTable.Root data={invoices} columns={invoiceColumns} getRowId={(row) => row.id} pageSize={5} selectable>
      <DataTable.Toolbar>
        <DataTable.Search />
        <DataTable.ColumnToggle />
      </DataTable.Toolbar>
      <DataTable.Table />
      <DataTable.Pagination />
    </DataTable.Root>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` * | `T[]` |  |  |
| `columns` * | `DataTableColumn<T>[]` |  |  |
| `getRowId` | `(row: T, index: number) => string` |  | Unique id of each row (used for selection). Defaults to the index in `data`. |
| `pageSize` | `number` |  |  |
| `defaultSort` | `SortState` |  |  |
| `selectable` | `boolean` |  |  |
| `onSelectionChange` | `(rows: T[]) => void` |  |  |
| `labels` | `Partial<DataTableLabels>` |  |  |
| `children` | `ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.