<!-- source-hash: 4b92799da5c1a1952b02f5fb9273c343 -->
Storybook showcase for the `DataTable` component, demonstrating all interactive features (sorting, filtering, row selection, column visibility, pagination, and row actions) using a mock device dataset built on TanStack Table.

## Key Components

- **`Basic`** — Minimal setup with data and columns; no extra state
- **`WithSorting`** — Consumer-owned sort cycle with `DataTableSortState`, supporting server-side or in-memory sorting
- **`useDataTable`** — Hook wrapping TanStack Table; accepts `data`, `columns`, and flags like `clientSideSorting` / `clientSideFiltering`
- **`baseColumns()`** — Reusable `ColumnDef<Device>[]` factory shared across stories, with responsive `hideAt` breakpoints
- **Cell renderers** — `StatusTag`, `OSBadge`, `OwnerCell`, `TagsCell`, `LoadCell`, `LastSeenCell` — composable display-only cells
- **`multiSelectFilterFn`** — Column filter function for multi-value faceted filtering (OS, Status)
- **`makeDevices(count, startId?)`** — Deterministic fake device data generator seeded by index

## Usage Example

```typescript
import { DataTable, useDataTable, type ColumnDef } from '@/components/ui/data-table'

const columns: ColumnDef<Device>[] = [
  { accessorKey: 'hostname', header: 'Hostname', meta: { width: 'w-[200px]' } },
  { accessorKey: 'status',   header: 'Status',   cell: ({ row }) => <StatusTag status={row.original.status} /> },
]

export function DevicesTable({ data }: { data: Device[] }) {
  const table = useDataTable<Device>({
    data,
    columns,
    clientSideSorting: true,
    clientSideFiltering: true,
  })

  return (
    <DataTable table={table}>
      <DataTable.Header />
      <DataTable.Body emptyMessage="No devices found" />
    </DataTable>
  )
}
```

> **Note:** Row actions, checkboxes, and chevron links are regular `ColumnDef` entries — not magic props. Use `data-no-row-click` on interactive cell wrappers to prevent click-event bubbling to `onRowClick`.