A data table component for displaying query results with horizontal scrolling, CSV export, loading skeletons, and empty states. ## Key Components - **`QueryReportTable`** — Main export. Renders a full-featured tabular report view driven by dynamic row data, with automatic column derivation. - **`deriveColumns`** — Utility that infers column definitions from data rows and optional `columnOrder`. - **`exportToCSV`** — Utility that serializes visible columns and rows to a downloadable CSV file. - **`useHorizontalScrollbar`** — Custom hook providing scroll position tracking, thumb/track refs, and pointer event handlers for a custom horizontal scrollbar. - **`QueryReportTableHeader`** / **`QueryReportTableRow`** / **`QueryReportTableSkeleton`** — Sub-components for header, body rows, and loading state respectively. ## Props Summary | Prop | Type | Default | Description | |---|---|---|---| | `data` | `object[]` | — | Row data; columns auto-derived | | `loading` | `boolean` | `false` | Shows skeleton rows | | `variant` | `'default' \| 'compact'` | `'default'` | Compact hides title bar, scrollbar, and edge fades | | `showExport` | `boolean` | `true` | Renders "Export CSV" button when data exists | | `columnOrder` | `string[]` | — | Override auto-derived column order | | `columnWidth` | `number` | `160` | Per-column pixel width (also drives `minWidth`) | | `exportFilename` | `string` | `'query-results'` | Base filename for CSV download | | `onExport` | `() => void` | — | Callback fired after CSV export | | `headerActions` | `ReactNode` | — | Slot for custom controls in the title bar | ## Usage Example ```typescript import { QueryReportTable } from '@/components/query-report-table' const rows = [ { device: 'DESKTOP-001', os: 'Windows 11', status: 'Online' }, { device: 'LAPTOP-042', os: 'macOS 14', status: 'Offline' }, ] export function DeviceReport() { return ( console.log('exported')} showExport /> ) } ``` **Compact mode** (no title bar, scrollbar, or edge gradients): ```typescript ``` ## Source [`query-report-table.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/query-report-table.tsx)