Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Data Table II
medium25 min
Build a user data table with stable text and numeric sorting, three-state header controls, and visible sort direction.
Requirements
Render the supplied eight users and four columns without modifying the source records. The native table markup and complete CSS are supplied.
Initially render all eight users in their input order; this level has no pagination.
Name, Age, and Email headers are sortable; ID is not. Clicking a new column starts ascending; repeated clicks cycle ascending, descending, then original input order.
Compare strings case-insensitively using English locale ordering and numeric columns as numbers. Preserve original input order for equal values in both directions. For generic values, null/undefined sort after real values in either direction.
Keep sort indicators and aria-sort synchronized. Only the active column has ascending/descending; other headers have none. Never sort a prop or fixture array in place.
The supplied HTML structure and full visual styles do not require substantial HTML/CSS authoring. Implement state, derived rows, and event handlers. Keep the exercise local; no fetching, persistence, virtualization, or external table library is needed.
Examples
Example 1
Input: Click Age twice.
Output: Ages are descending; equal ages retain their original order.
Implement the same visible behavior in each supported framework.
What the tests check
Initially preserves all eight rows and original order
Text sorting is ascending then descending
A third click restores the original input order
Numeric sorting handles multi-digit ages and stable ties
Changing columns starts the new sort in ascending order
