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[] = [ { 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' }, ], }, ] console.log(filters)} rowActions={[{ label: 'Edit', variant: 'outline', onClick: (item) => console.log(item) }]} /> ```