Home > @uniformdev/design-system > TableSortButton
TableSortButton() function
Clickable table-header control for sorting a column. Renders a text label plus a sort icon; place it inside a <th> (or equivalent header cell). Sort state is fully controlled: pass isSorted / isSelected from your table state and update them in onSort.
Visual contract: - Default icons come from isSorted (asc → up, otherwise down) unless icon overrides them. - Active column (isSelected). - Inactive columns: icon is visibility: hidden until the button is hovered or focus-visible. - Revealed icons inherit visibility from the button so they stay hidden inside a visibility: hidden ancestor (e.g. an inactive StackedModal step).
Accessibility: set aria-sort on the wrapping <th> ("ascending" | "descending" | "none"). Do not put aria-sort on this button.
Signature:
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
{ label, icon, isSorted, onSort, isSelected, isDisabled, dataTestId, ...props } |
(not declared) | |
|
input |
Returns:
_emotion_react_jsx_runtime.JSX.Element
Example
<>