Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Data Table III
hard45 min
Build a reusable data table driven by row and column configuration, with independent pagination and stable sorting for different datasets.
Requirements
Implement one reusable DataTable component receiving rows, columns, rowKey, caption, tableId, initialPageSize, and pageSizes. Use the supplied people, inventory, and empty-data instances with independent state. Derive cells from column keys instead of hardcoding user fields. Inputs are supplied synchronously; row keys are unique.
Start people at page 1 with 3 rows per page. Inventory starts with 2 rows per page. Slice the current ordered dataset, preserving order within pages.
Provide First, Previous, Next, and Last controls. Disable controls at the corresponding boundary. Display Page N of M; empty data displays Page 0 of 0, No rows., and disabled navigation.
Changing rows per page returns to page one. People supports 3, 5, and 10. Inventory supports 2, 3, and 5. A final partial page has only remaining records.
Name, Age, and Email headers are sortable; ID is not. In the inventory instance, Product and Price are sortable and SKU 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.
Apply sorting to the entire dataset before slicing, and reset to page one when sort changes. Support configured string/number columns and row identity without leaking state between instances.
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 Last with 3 rows per page.
Output: People shows Barbara and Donald on Page 3 of 3.
Implement the same visible behavior in each supported framework.
What the tests check
Initial page contains the first three users
Next and previous pages preserve source order
Last page has only the remaining rows
Changing page size resets to page one
A size larger than the dataset disables navigation
Sorting precedes slicing and resets the page
Sort and page size work together
Generic columns work with product rows and another row key
Instances keep independent sort and pagination state
Empty data keeps headers and disables navigation
Third sort click restores source order before paging
