# DataTable

A native data table with local sorting, page-scoped selection and pagination.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, DataTable } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DataTable caption="Projects" selectable pageSize={5}
        columns={[{id:"name",label:"Project",sortable:true},{id:"status",label:"Status"}]}
        rows={[{id:"design",label:"Design system",cells:{name:"Design system",status:"Active"}}]} />
    </FloodRoot>
  );
}
```

## Design notes

- Supply the complete client collection; remote/server pagination and virtualization are not part of this API.
- Select all affects selectable rows on the current page and preserves selection on other pages.
- Use sortValues for rich React cells; missing values sort last in both directions.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `caption` | `string` | `Required` |
| `hideCaption` | `boolean` | `—` |
| `columns` | `readonly DataTableColumn[]` | `Required` |
| `rows` | `readonly DataTableRow[]` | `Required` |
| `density` | `"compact" \| "comfortable"` | `—` |
| `striped` | `boolean` | `—` |
| `minWidth` | `CSSProperties["minWidth"]` | `—` |
| `sort` | `DataTableSort \| null` | `—` |
| `defaultSort` | `DataTableSort \| null` | `—` |
| `onSortChange` | `(sort: DataTableSort \| null) => void` | `—` |
| `locale` | `string` | `—` |
| `selectable` | `boolean` | `—` |
| `selectedIds` | `readonly string[]` | `—` |
| `defaultSelectedIds` | `readonly string[]` | `—` |
| `onSelectionChange` | `(ids: string[]) => void` | `—` |
| `page` | `number` | `—` |
| `defaultPage` | `number` | `—` |
| `pageSize` | `number` | `—` |
| `onPageChange` | `(page: number) => void` | `—` |
| `state` | `"ready" \| "loading" \| "error"` | `—` |
| `onRetry` | `() => void` | `—` |
| `labels` | `DataTableLabels` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | `Forwarded` |