<!-- source-hash: 7af4501b2005cad2efd91858dbef4eba -->
Renders the sticky-capable column header row for a data table, including sort indicators, column filters, and an optional right-side slot.

## Key Components

### `DataTableHeader`
Main exported component. Reads the table instance from context, renders a single header group row, and handles:
- **Sticky positioning** via `stickyHeader` / `stickyHeaderOffset` props
- **Responsive visibility** — hidden on mobile, shown from `md` breakpoint up
- **Right slot** — absolutely positioned when visible header cells exist, inline otherwise

### `DataTableSortState`
```typescript
interface DataTableSortState {
  id: string    // column ID being sorted
  desc: boolean // true = descending
}
```
Stateless descriptor — the consumer owns the sort cycle and passes the current state down.

### Internal Components

| Component | Purpose |
|-----------|---------|
| `HeaderCell` | Renders one column header — either a `DataTableColumnFilter` or a sortable/plain label |
| `HeaderLabel` | Renders string headers with ODS typography; delegates render-function headers to `flexRender` |
| `SortIcon` | Displays `↑`, `↓`, or a neutral swap icon based on current sort direction |

## Usage Example

```typescript
// Consumer owns the sort state and toggle cycle
const [sort, setSort] = useState<DataTableSortState | null>(null)

function handleSortChange(columnId: string) {
  setSort(prev =>
    prev?.id === columnId
      ? prev.desc ? null : { id: columnId, desc: true }
      : { id: columnId, desc: false }
  )
}

<DataTable table={table}>
  <DataTable.Header
    stickyHeader
    stickyHeaderOffset="top-[56px]"
    sort={sort}
    onSortChange={handleSortChange}
    rightSlot={<DataTable.RowCount itemName="device" />}
  />
  <DataTable.Body />
</DataTable>
```

> **Note:** Sorting is opt-in per column via `meta.sortable = true` in the column definition. The component never calls TanStack's built-in sort APIs — all sort logic lives in the consumer.