Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Data Table
medium25 min
Build a user data table with client-side pagination, page-size controls, and correctly disabled boundary navigation.
Requirements
Render the supplied eight users and four columns without modifying the source records. The native table markup and complete CSS are supplied.
Start people at page 1 with 3 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. A final partial page has only remaining records.
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
