Storybook stories for the `QueryReportTable` component, covering all major display states, configuration options, and edge cases for visual testing and documentation. ## Key Components - **`Default`** — Basic table with auto-derived columns from data keys - **`Loading`** — Skeleton placeholder state with configurable rows/columns - **`Empty`** — Empty state with a custom message - **`CustomColumnOrder`** — Explicit column ordering with remaining keys appended - **`WideColumns` / `NarrowColumns`** — Column width variants (`columnWidth` prop) - **`ManyColumns`** — Horizontal scroll with right-edge gradient fade using a 14-column dataset - **`NoExport`** — Hides the CSV export button (`showExport: false`) - **`CustomExport`** — Custom filename and `onExport` callback - **`WithHeaderActions`** — Renders additional controls (e.g. Refresh button) in the table header - **`WithNullValues`** — Displays `null` fields as dashes - **`SingleRow`** — Single-record result set ## Usage Example ```typescript import { QueryReportTable } from '../components/ui/query-report-table' console.log('Exported')} headerActions={Refresh} /> ``` ## ArgTypes (Storybook Controls) | Prop | Control | Range | |---|---|---| | `columnWidth` | number | 80–400, step 10 | | `skeletonRows` | number | 1–20 | | `skeletonColumns` | number | 1–12 | | `showExport` | boolean | — | | `loading` | boolean | — |