Pagination: Complete Interview Checklist
The complete checklist for building a pagination component in an interview.
Pagination: Complete Interview Checklist
Core Features
- Page numbers with current page highlighted.
- Prev/Next buttons (disabled at boundaries).
- Ellipsis for many pages (1 ... 4 5 6 ... 20).
- Calculate total pages (Math.ceil(total / pageSize)).
- Slice data for current page (client-side) or fetch (server-side).
- Page size selector (optional).
Advanced Features
- Jump to first/last page buttons.
- Keyboard navigation (arrow keys).
- URL state (?page=3).
- Loading state for server-side.
- Reset page on filter/search change.
Accessibility
- nav with aria-label="Pagination".
- aria-current="page" on current page.
- aria-label on each link.
- aria-hidden on ellipsis.
CSS
- Flex layout for buttons.
- Active page styling (different background).
- Disabled button styling (opacity, cursor).
- Hover states.
- Ellipsis styling.
Testing
- Test: navigate to next/prev page.
- Test: click a page number.
- Test: prev disabled on page 1.
- Test: next disabled on last page.
- Test: ellipsis shows for many pages.
- Test: page resets on filter change.
The Takeaway
Checklist: core (page numbers, prev/next, ellipsis, total pages, slice/fetch, page size), advanced (first/last, keyboard, URL state, loading, reset on filter), accessibility (ARIA nav, aria-current, aria-label, aria-hidden), CSS (flex, active, disabled, hover), and testing (navigate, boundaries, ellipsis, reset).
Core (page numbers, prev/next, ellipsis, total pages, slice/fetch, page size selector), advanced (first/last, keyboard, URL state, loading, reset on filter), accessibility (ARIA, aria-current), CSS (flex, active, disabled, hover), and testing (navigate, boundaries, ellipsis, reset).
Page numbers with current page highlighted, prev/next buttons (disabled at boundaries), ellipsis for many pages, total pages calculation, and data slicing for the current page. These are the minimum required features.
Jump to first/last page, keyboard navigation (arrow keys), URL state (?page=3), loading state for server-side, page size selector, and resetting page on filter/search change. These show depth.
Test navigating to next/prev, clicking page numbers, verifying prev is disabled on page 1, next is disabled on last page, ellipsis shows for many pages, and page resets to 1 on filter change. Test each feature and boundary.
Flex layout for the buttons, active page styling (different background color), disabled button styling (reduced opacity, cursor: not-allowed), hover states on buttons, and ellipsis styling (gray, padding). Clean CSS makes the pagination look professional.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.