Renders the column header row for a TanStack React Table data table, handling sorting indicators, column filters, responsive visibility, sticky positioning, and an optional right-side slot. ## Key Components ### Interfaces - **`DataTableSortState`** — Sort descriptor `{ id: string, desc: boolean }` consumed by the header to render directional icons. - **`DataTableHeaderProps`** — Props for the public `DataTableHeader` component. ### Exports - **`DataTableHeader`** — Main header component. Reads table state via `useDataTableContext`, maps header groups to `HeaderCell` instances, and handles sticky positioning and the `rightSlot`. ### Internal Components | Component | Role | |---|---| | `HeaderCell` | Renders a single column header — either a `DataTableColumnFilter` (filterable columns) or a clickable sort label. Handles tablet breakpoint visibility via `meta.filter` and `meta.alwaysShowHeader`. | | `HeaderLabel` | Renders string headers with ODS typography styles, or delegates to `flexRender` for render-function/ReactNode headers. | | `SortIcon` | Renders `Arrow01UpIcon`, `Arrow01DownIcon`, or `SwitchVrIcon` based on current sort direction. | | `resolveHeaderLabel` | Utility that extracts a plain string label from a column definition for filter placement. | ## Usage Example ```typescript import { DataTableHeader } from './data-table-header' import { useState } from 'react' function MyTable() { const [sort, setSort] = useState<{ id: string; desc: boolean } | null>(null) function handleSortChange(columnId: string) { setSort(prev => prev?.id === columnId ? prev.desc ? null // none → asc → desc → none cycle : { id: columnId, desc: true } : { id: columnId, desc: false } ) } return ( } /> ) } ``` > **Note:** Sorting state and cycle logic are fully consumer-owned. The header renders sort indicators from the `sort` prop and fires `onSortChange` on click — it does not call TanStack's internal sort APIs.