SortHeader

The label and direction arrow of a sortable column. DataTable and Table use it already; use it alone for a custom header, with onSort when it should be a button.

SortHeader

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, SortHeader

UnsortedAscendingDescending

Dark theme, SortHeader

UnsortedAscendingDescending

High contrast theme, SortHeader

UnsortedAscendingDescending

UsageLink to the section Usage

tsx

import { SortHeader } from '@skribly/ui/data'

tsx

<th aria-sort={direction ?? 'none'}>
  <SortHeader direction={direction} onSort={toggle}>Name</SortHeader>
</th>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The arrow is hidden from screen readers; the surrounding column header says the direction through aria-sort.
With onSort it is a button with a 24px target, a visible focus ring and the label as its name.

This demo runs through axe in all three themes on every test run. See what the tests check.