# DataTable

A sortable, typed table that keeps native table semantics and nulls in their place.

- Family: Data, imported from `mizu-ui` or `mizu-ui/data`
- Docs: https://mizu.user64bit.world/components/data-table
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/data/DataTable.tsx

## Usage

```tsx
"use client";

import { DataTable } from "mizu-ui";

export function Example() {
  const rows = [
    { id: "a", name: "WaveText", size: 4.2 },
    { id: "b", name: "Button", size: 1.8 },
    { id: "c", name: "Signal", size: 3.1 },
  ];
  return (
    <DataTable
      label="Illustrative module records"
      rows={rows}
      getRowId={(r) => r.id}
      columns={[
        {
          id: "name",
          header: "Name",
          render: (r) => r.name,
          sortValue: (r) => r.name,
        },
        {
          id: "size",
          header: "Example KiB",
          render: (r) => r.size,
          sortValue: (r) => r.size,
          align: "right",
        },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/data-table
```

## Props

- `rows`: `T[]`. Your rows; pagination and fetching remain outside.
- `columns`: `DataColumn<T>[]`. Stable id, header, render, optional sortValue and alignment.
- `getRowId`: `(row: T) => string`. Stable row identity.
- `label / loading / empty`: `string / boolean / ReactNode`. Caption, busy state and empty content.

## Accessibility

Native caption, headers and cells. Sort controls expose aria-sort. Overflow is focusable; null sort values stay last in either direction.

## Motion

CSS transitions explain state changes. Reduced motion removes travel.