🔢 React Pagination with Ellipsis
Category: machine-coding
Difficulty: hard
A comprehensive guide to building an intelligent pagination component in React that displays page numbers with ellipsis ("...") for large page ranges. 💡 What is Pagination with Ellipsis? Pagination with ellipsis is a UI pattern that shows a subset of page numbers with gaps represented by "..." (ellipsis). This prevents overwhelming users with too many page numbers while still allowing quick navigation to key pages. Key Rules: Always visible: First page, Last page, Current page, Previous page (current - 1), Next page (current + 1) Gaps: Show '...' when there's a gap between displayed page numbers Smart logic: Automatically calculates which pages to show based on current position 🧠 Core Concepts Display Logic The pagination needs to intelligently decide which page numbers to show: First page (1) is always shown Last page (totalPages) is always shown Current page and its neighbors (current - 1, current + 1) are shown Ellipsis appears when there's a gap of 2 or more pages Visual Examples [code example] ✅ Implementation Complete Pagination Component ```jsx import React, { useState } from 'react'; const Pagination = ({ totalPages, onPageChange }) => { const [currentPage, setCurrentPage] = useState(1); // Generate array of page numbers to display const getPageNumbers = () => { const pages = []; // Always include first page pages.push(1); // Calculate range around current page const startPage = Math.max(2, currentPage - 1); const endPage = Math.min(totalPages - 1, currentPage + 1);