Pagination Component
Build a pagination control that splits a large dataset into pages and lets the user navigate between them.
Requirements
- Display a configurable number of items per page (5, 10, 20)
- Show previous / next buttons (disabled at boundaries)
- Show direct page number buttons with the current page highlighted
- Display "Showing X–Y of Z items" status text
- Changing items-per-page resets to page 1
Key Patterns
Math.ceil(total / perPage)Array.slice(start, end)Derived start/end indicesControlled select for perPageBoundary disabling
Important
Interview Tip
Key formula: startIndex = (currentPage - 1) * itemsPerPage. endIndex = startIndex + itemsPerPage. currentItems = data.slice(startIndex, endIndex). Never store currentItems in state — derive it from currentPage + itemsPerPage + data.
Showing 1–5 of 47 users
| ID | Name | Role | Status |
|---|---|---|---|
| 1 | User 001 | Frontend Dev | Inactive |
| 2 | User 002 | Backend Dev | Active |
| 3 | User 003 | Designer | Active |
| 4 | User 004 | DevOps | Inactive |
| 5 | User 005 | PM | Active |