Renders the header row for a legacy table component, handling column labels, sorting indicators, filtering dropdowns, selection checkboxes, and responsive visibility. ## Key Components - **`TableHeader`** *(deprecated)* — Main exported component. Use `DataTableHeader` from `data-table` instead. - **`getAlignment`** — Maps column `align` prop to Tailwind flex-justification classes. - **`handleSort`** — Toggles sort direction and calls `onSort` for sortable columns. - **`getSortIcon`** — Returns the appropriate sort icon (`Arrow01UpIcon`, `Arrow01DownIcon`, or `SwitchVrIcon`) based on active sort state. ## Usage Example ```typescript import { TableHeader } from './table-header' const columns = [ { key: 'name', label: 'Name', sortable: true }, { key: 'status', label: 'Status', filterable: true, filterOptions: ['Active', 'Inactive'] }, { key: '__actions__', label: '' }, ] console.log(key, direction)} filters={{}} onFilterChange={(key, value) => console.log(key, value)} selectable allSelected={false} someSelected={true} onSelectAll={(checked) => console.log(checked)} totalItemsCount={42} stickyHeader stickyHeaderOffset="top-16" /> ``` ## Notes - Hidden on mobile (`hidden md:flex`); on non-`lg` screens, only filterable and `__actions__` columns are rendered. - The `__actions__` column slot displays a `"Showing N results"` count instead of a header label. - Sticky header behavior is controlled via `stickyHeader` and `stickyHeaderOffset` props.