A single sortable table header cell with built-in sort, alignment and resize support.
A sortable header with no active sort. The indicator appears on hover at 40% opacity.
|
|
|---|
| Alpha Fund |
Header sorted ascending. The chevron points up in the accent colour.
|
|
|---|
| Alpha Fund |
Header sorted descending. The chevron points down in the accent colour.
|
|
|---|
| Zulu Fund |
When part of a multi-column sort, a priority number appears next to the indicator.
|
|
|
|---|---|
| 2024-01-15 | 1,234,567 |
Numeric columns use align="end". The sort indicator is placed to the left of the label so the label stays flush with right-aligned numerals below.
|
|
|---|
| 1,234,567.89 |
The resize handle is a separate tab stop with its own aria-label. Drag the handle or use ArrowLeft/ArrowRight when focused.
|
|
|---|
| 1,234,567.89 |
Long labels truncate with an ellipsis to preserve row height and sticky-header offsets. Hover for the full text via the title attribute.
|
|
|---|
| 8.25% |
A non-sortable header has no button, no tabindex, and no sort indicator.
|
|
|---|
| Active |
All states render correctly in dark theme through the same --theme-* tokens.
|
|
|
|---|---|
| Alpha Fund | 1,234,567 |
Click the sortable header below to see sort events.
|
|
|---|
| 42.50 |