<!-- source-hash: 30d7c4e87b438b12b503725269f756f6 -->
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'

<QueryReportTable
  title="Server Health Report"
  data={[
    { hostname: 'prod-web-01', cpu_usage: 45, status: 'healthy' },
  ]}
  columnOrder={['status', 'hostname', 'cpu_usage']}
  columnWidth={160}
  exportFilename="server-health-2026-02"
  onExport={() => console.log('Exported')}
  headerActions={<Button variant="outline">Refresh</Button>}
/>
```

## ArgTypes (Storybook Controls)

| Prop | Control | Range |
|---|---|---|
| `columnWidth` | number | 80–400, step 10 |
| `skeletonRows` | number | 1–20 |
| `skeletonColumns` | number | 1–12 |
| `showExport` | boolean | — |
| `loading` | boolean | — |