Data Table II

Take the data table further: make every column sortable. Click a header to sort by it; click the same header again to flip between ascending and descending. The list of users never changes — what changes is the order you derive from it, driven by two pieces of state: which column to sort by, and which direction.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A <table> whose headers are buttons; clicking one sorts the rows.

Examples

click "Age"      → rows ascending by age, header shows ▲
click "Age" again → rows descending by age, header shows ▼
click "Name"     → rows ascending by name (direction resets to ▲)

Numbers sort numerically (36 before 101); strings sort with localeCompare.

Notes

• Two pieces of state. sortKey (the column) and asc (the direction). Everything visible is derived from them.
• Copy before sorting. Array.prototype.sort mutates in place — sort [...USERS], never USERS itself.
• Type-aware comparison. Numbers compare by subtraction; strings by localeCompare. Negate for descending.
• Out of scope. Pagination (Data Table) and multi-column sort — one active column here.