Sortable Header Table
Projects table with sort affordance icons on every column header, one column actively sorted descending, and a shift-click secondary sort hint in the footnote.
Projects table with sort affordance icons on every column header, one column actively sorted descending, and a shift-click secondary sort hint in the footnote.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sortable Header Table is the projects list for the Acme workspace, six projects with name, owner email, status badge, and a last updated timestamp. Every column header carries a sort affordance, a muted caret that signals clickability, and the Last updated column is actively sorted descending with a full-opacity caret and aria-sort set. The footnote names the secondary sort shortcut: shift-click a second header to add it as a secondary sort key.
Projects are one const array sorted at module level against updatedMs so the active sort order matches the rendered caret without any client state. Status uses secondary for Live and outline for Building and Paused.
Reach for this block on any resource list page where column sorting is the main navigation tool, wired to your sort handler and query param. Keep aria-sort on the active header so screen readers announce the order.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace projects list. Other sortable tables:
Tip: mute the sort icon on inactive columns at 40 percent opacity, present but not competing with the active column caret.