<!-- source-hash: b24897cd7f950e9b9cb94d49064c64a2 -->
Renders the header row for a query report table, displaying column labels with truncation detection and tooltip support for overflowing text.

## Key Components

- **`QueryReportTableHeader`** — Primary exported component. Accepts a list of column names and renders them as a styled header row. Supports `default` and `compact` variants.
- **`TruncatedHeaderCell`** *(internal)* — Renders an individual header cell that dynamically checks whether its text is truncated on hover, showing a tooltip with the full value when needed.

## Props (`QueryReportTableHeaderProps`)

| Prop | Type | Description |
|---|---|---|
| `columns` | `string[]` | Column label strings to render |
| `columnWidth` | `number` | Fixed pixel width for each header cell |
| `variant` | `'default' \| 'compact'` | Controls padding and border styling |
| `className` | `string` | Optional additional CSS classes |

## Usage Example

```typescript
import { QueryReportTableHeader } from './query-report-table-header'

<QueryReportTableHeader
  columns={['Device Name', 'IP Address', 'Last Seen', 'Status']}
  columnWidth={160}
  variant="compact"
/>
```

## Notes

- Truncation is evaluated lazily on `mouseEnter` via `scrollWidth` vs `clientWidth` comparison — avoiding unnecessary layout reads on initial render.
- Tooltip is only activated when truncation is detected; otherwise the `Tooltip` is forced closed (`open={false}`), preventing phantom popups on short labels.
- Each cell uses `shrink-0` with a fixed `width` and `height: 48` to align with table body cells.

**Source:** [`query-report-table-header.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/query-report-table-header.tsx)