<!-- source-hash: b88a597eb0e06d6c5293430c95a28ff3 -->
Storybook stories for the `Table` UI component, demonstrating all supported features including sorting, filtering, selection, responsive column visibility, loading/empty states, and row actions.

## Key Components

- **`Basic`** — Minimal table with static columns, no interactivity
- **`ResponsiveColumns`** — Progressive column disclosure using `hideAt` breakpoints (`sm`, `md`, `lg`, `xl`)
- **`MultipleBreakpoints`** — `hideAt` accepting an array of breakpoints for granular visibility control
- **`Loading`** — Skeleton row state via `loading: true` and `skeletonRows`
- **`Empty`** — Empty state with custom `emptyMessage`
- **`Selectable`** — Row selection with `selectable` and `selectedRows` props
- **`Sortable`** — Column sorting via `sortable`, `sortBy`, and `sortDirection` props
- **`Clickable`** / **`ClickableWithActions`** — Row click handlers with optional inline `rowActions`
- **`MobileFirst`** — Mobile-optimized layout with progressive column reveal
- **`TabletOptimized`** — Tablet-focused layout showing only sortable/filterable columns at 768–1024px
- **`WithFilters`** — Stateful story using `useState` to drive `filterable` columns with `filterOptions`

## Usage Example

```typescript
import { Table, type TableColumn, type TableFilters } from '../components/ui/table'

const columns: TableColumn<User>[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', hideAt: 'sm' },
  {
    key: 'status',
    label: 'Status',
    filterable: true,
    filterOptions: [
      { id: 'active', label: 'Active', value: 'active' },
      { id: 'inactive', label: 'Inactive', value: 'inactive' },
    ],
  },
]

<Table
  data={users}
  columns={columns}
  rowKey="id"
  sortBy="name"
  sortDirection="asc"
  selectable
  selectedRows={[]}
  onFilterChange={(filters: TableFilters) => console.log(filters)}
  rowActions={[{ label: 'Edit', variant: 'outline', onClick: (item) => console.log(item) }]}
/>
```