About this block

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.

When to use

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

• App shell
• Filters and search

After

• Row actions menu blueprint
• Empty states

What you can display

One strong use is the workspace projects list. Other sortable tables:

• API keys. Name, created date, last used, and scopes, sorted by last used descending.
• Audit log. Actor, action, resource, and timestamp, sorted newest first and not resortable by design.
• Invoice lines. Description, amount, and date, sortable by amount to spot the largest charge.

Tip: mute the sort icon on inactive columns at 40 percent opacity, present but not competing with the active column caret.