SortableHeader

stable

Sortable column header with direction indicator for data tables

import { SortableHeader } from "@nodus/design-system/finance"

Loading demo…

Props

Prop	Type	Default	Description
`label`req	`string`	—	Column header label
`direction`	`"asc" \| "desc" \| "none"`	—	Current sort direction
`onSort`	`() => void`	—	Called when header is clicked to toggle sort
`align`	`"left" \| "right" \| "center"`	"left"	Column alignment
`density`	`"default" \| "compact"`	—	Display density

labelrequired

Type stringDefault —

Column header label

direction

Type "asc" | "desc" | "none"Default —

Current sort direction

onSort

Type () => voidDefault —

Called when header is clicked to toggle sort

align

Type "left" | "right" | "center"Default "left"

Column alignment

density

Type "default" | "compact"Default —

Display density

MobileTouch Target

Sort toggle tap area must be ≥44px — extend beyond the visible icon. On mobile, consider moving sort controls to a filter sheet.

Design Rationale

This component was designed to express:

High-density data table for treasury positions, risk matrices, and compliance grids

Was this helpful?