Data Table

Build a paginated data table: a fixed list of users shown a page at a time, with Prev/Next buttons, a "Page X of Y" indicator, and a page-size selector. The list itself never changes — what changes is the window of rows you show. The core idea is that the visible rows are a slice of the full array, and the slice bounds come from two numbers: the current page and the page size.

Signature

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

A <table> showing one page of users, plus pagination controls.

Examples

10 users, pageSize = 5, page = 0 → rows 1–5,  "Page 1 of 2"
click Next → page = 1           → rows 6–10, "Page 2 of 2", Next disabled

pageSize changed 5 → 10 → page resets to 0, "Page 1 of 1", all 10 rows shown

Notes

• The page is a window. visible = users.slice(page * pageSize, …) — derive it, don't copy rows into state.
• Clamp navigation. Prev can't go below page 0; Next can't go past totalPages - 1. Disable the buttons at the ends.
• Reset on resize. Changing pageSize can leave page pointing past the end — reset page to 0.
• Out of scope. Sorting (Data Table II) and fetching from a server — the data is a local constant.