Pagination Component

Design a pagination component that allows users to navigate through multiple pages of content.

R - Requirements

Key Questions:

• How many pages? (10, 100, 1000+)
• Show page numbers? (all, truncated with ellipsis)
• First/last buttons? (yes/no)
• Items per page? (configurable, 10, 20, 50)
• URL sync? (yes, update URL on page change)

Common Answers:

• 10-1000+ pages
• Truncated with ellipsis (show 5-7 pages around current)
• First/last buttons
• Configurable items per page
• URL sync (query param)

A - Architecture

Pagination Flow:

Pagination Architecture:

Architecture Decisions:

• Page calculation (total pages, current page) - totalItems / itemsPerPage
• Ellipsis logic (when to show, which pages to show) - Show 5-7 pages around current
• URL synchronization (query param, history API) - Shareable links, browser navigation
• Keyboard navigation (arrows, Home, End) - Full keyboard accessibility

Relevant Content:

• Data Fetching Strategies - Pagination patterns

D - Data Model

State Management:

• Current page (1-indexed)
• Total pages (calculated from total items / items per page)
• Items per page (10, 20, 50, 100)
• Total items (from server)

URL Sync:

• Query param (?page=2&perPage=20)
• History API (update without reload)

I - Interface

Features:

• Page buttons (1, 2, 3, ...)
• Ellipsis (..., when pages truncated)
• Previous/Next buttons
• First/Last buttons (optional)
• Items per page selector (dropdown)
• Current page indicator (highlighted)
• Keyboard navigation (arrows, Home, End)

Accessibility:

• ARIA pagination pattern
• role="navigation" on container
• aria-label on navigation
• aria-current="page" on current page
• Keyboard navigation (arrows, Home, End, Enter)

Relevant Content:

• Keyboard Shortcuts - Navigation
• Accessible Forms - Items per page selector

O - Optimizations

Performance:

• Memoize page calculation (prevent recalculation)
• Debounce URL updates (if rapid clicking)
• Prefetch next page (on hover, optional)

UX:

• Smooth transitions (page change animation)
• URL sync (shareable links, browser back/forward)
• Loading states (show spinner during page change)

Relevant Content:

• Prefetching Strategies - Prefetch next page
• Optimistic Updates - Instant page change

Implementation Checklist

• Page calculation (total pages, current page)
• Ellipsis logic (truncate, show 5-7 pages)
• Previous/Next buttons
• First/Last buttons (optional)
• Items per page selector
• URL sync (query param)
• Keyboard navigation (arrows, Home, End, Enter)
• ARIA attributes (role, aria-current)
• Loading states (spinner during change)
• Current page highlighting

Common Pitfalls

❌ Showing all pages → UI cluttered, unusable
✅ Truncate with ellipsis, show 5-7 pages around current

❌ No URL sync → Can't share links, lose state on refresh
✅ Sync with query param, update URL on page change

❌ No keyboard navigation → Poor accessibility
✅ Arrow keys to navigate, Enter to select, Home/End to jump

❌ No loading states → Users don't know page is changing
✅ Show spinner, disable buttons during load