Implementing Pagination in React.js: A Comprehensive Guide with Examples

Pagination is a common feature in web applications that allows users to navigate through large sets of data or content in manageable chunks. In React.js, implementing pagination is essential for creating a seamless user experience, especially when dealing with extensive lists, tables, or search results. In this comprehensive guide, we’ll explore the concept of pagination, its importance, and step-by-step instructions on how to implement pagination in a React.js application. We’ll also provide practical examples and best practices to ensure your pagination is both functional and user-friendly.

Introduction to Pagination

Understanding the Need for Pagination

In web applications, it’s common to encounter scenarios where displaying all data at once is impractical or overwhelming. Imagine a product catalog with thousands of items or search results spanning multiple pages. Pagination solves this problem by dividing the data into smaller, manageable segments or pages. Users can then navigate through these pages to find the information they need.

Benefits of Pagination in User Interfaces

Pagination offers several benefits in user interfaces:

• Improved Performance: Loading a small subset of data at a time reduces the initial load time and ensures a faster user experience.

• Enhanced Usability: Users can easily navigate through content, making it more accessible and user-friendly.

• Reduced Cognitive Load: Displaying a limited number of items at once reduces cognitive overload and helps users focus on relevant content.

Setting Up a React.js Project

Create a New React App

To get started with implementing pagination in Reactjs, you’ll need a React.js project. If you haven’t already set up one, you can create a new React app using Create React App, a popular React project generator. Run the following command to create a new app:

npx create-react-app pagination-example

Project Structure and Dependencies

Once your project is set up, your project structure might look like this:

pagination-example/
├── src/
│   ├── components/
│   │   ├── Pagination.js
│   │   └── ...
│   ├── data/
│   │   ├── mockData.js
│   │   └── ...
│   ├── App.js
│   └── ...
├── package.json
├── ...

For pagination, we’ll create a

Pagination.js

component, generate mock data in the

data/mockData.js

file, and utilize the

App.js

file as our main application entry point.

Before moving forward, install any additional dependencies you might need for your project, such as React Router if you plan to integrate routing for pagination.

npm install react-router-dom

Creating Paginated Data

Generating Mock Data

To demonstrate pagination, we need some mock data to work with. Let’s create a file named

mockData.js

in the

data

directory and generate a list of items with dummy data.

const generateMockData = (totalItems) => {
  const data = [];

  for (let i = 1; i <= totalItems; i++) {
    data.push({
      id: i,
      name: `Item ${i}`,
      description: `This is item ${i}`,
    });
  }

  return data;
};

export const mockData = generateMockData(100); 

This code generates an array of 100 items, each with an

id

,

name

, and

description

field. You can adjust the

totalItems

parameter to create more or fewer items.

Data Structure and Pagination Logic

Before proceeding, it’s essential to define the data structure and pagination logic. We’ll maintain the following state properties:

• currentPage

  
  : The current page number.

• itemsPerPage

  
  : The number of items to display per page.

• totalItems

  
  : The total number of items in the dataset.

• paginatedData

  
  : The current page’s data, derived from the mock data.

We’ll also need functions to handle navigation between pages, such as

goToPage

,

goToNextPage

, and

goToPrevPage

. These functions will update the

currentPage

state and recompute the

paginatedData

accordingly.

In the

Pagination.js

component, we’ll integrate this data structure and pagination logic.

Basic Pagination

Displaying Data

Let’s begin by displaying the data and basic pagination controls in the

Pagination.js

component. We’ll use React state to manage the pagination-related state properties mentioned earlier.

import React, { useState } from 'react';
import { mockData } from '../data/mockData';

const Pagination = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10); 

  
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = mockData.slice(indexOfFirstItem, indexOfLastItem);

  
  const goToPage = (page) => setCurrentPage(page);

  
  const renderPaginationControls = () => {
    const pageNumbers = [];

    for (let i = 1; i <= Math.ceil(mockData.length / itemsPerPage); i++) {
      pageNumbers.push(i);
    }

    return (
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li
            key={number}
            className={`page-item ${currentPage === number ? 'active' : ''}`}
          >
            <button
              onClick={() => goToPage(number)}
              className="page-link"
            >
              {number}
            </button>
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div className="pagination-container">
      <h1>Pagination Example</h1>
      <ul className="item-list">
        {currentItems.map((item) => (
          <li key={item.id} className="item">
            <strong>{item.name}</strong>
            <p>{item.description}</p>
          </li>
        ))}
      </ul>
      {renderPaginationControls()}
    </div>
  );
};

export default Pagination;

In this code:

• We define React state variables for

  currentPage

  and

  itemsPerPage

  using the

  useState

  hook. You can adjust the

  itemsPerPage

  value to control the number of items displayed per page.

• We calculate the index range for the current page using

  indexOfFirstItem

  and

  indexOfLastItem

  .

• We define a

  goToPage

  function to update the

  currentPage

  state when a pagination button is clicked.

• The

  renderPaginationControls

  function generates the pagination buttons based on the total number of items and pages. It highlights the active page.

• The component renders the current page’s data along with the pagination controls.

Now, you should have a basic pagination setup with a list of items and navigation buttons in your React application.

Advanced Pagination Features

Custom Page Sizes

To enhance the user experience, you can add an option to customize the number of items displayed per page. This allows users to tailor the pagination to their preferences.

const Pagination = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  

  
  const changeItemsPerPage = (e) => {
    const newItemsPerPage = parseInt(e.target.value, 10);
    setItemsPerPage(newItemsPerPage);
    setCurrentPage(1); 
  };

  
  const renderItemsPerPageSelector = () => (
    <div className="items-per-page">
      <label>Show items per page: </label>
      <select
        onChange={changeItemsPerPage}
        value={itemsPerPage}
      >
        <option value={5}>5</option>
        <option value={10}>10</option>
        <option value={20}>20</option>
        <option value={50}>50</option>
      </select>
    </div>
  );

  return (
    <div className="pagination-container">
      <h1>Pagination Example</h1>
      {renderItemsPerPageSelector()}
      {/* ... */}
    </div>
  );
};

export default Pagination;

In this code:

• We introduce a new state variable,

  itemsPerPage

  , which controls the number of items displayed per page.

• The

  changeItemsPerPage

  function allows users to select a custom number of items per page from a dropdown menu. When the number of items per page changes, we reset the

  currentPage

  to 1 to ensure the user starts from the first page.

• The

  renderItemsPerPageSelector

  function renders the dropdown menu for selecting the number of items per page.

Dynamic Pagination Controls

To further improve the user experience, you can dynamically adjust the number of pagination buttons displayed based on the total number of pages. This ensures that the pagination controls remain user-friendly, even with a large dataset.

const Pagination = () => {
  
  
  
  const renderDynamicPaginationControls = () => {
    const pageNumbers = [];
    const totalPageCount = Math.ceil(mockData.length / itemsPerPage);

    
    const maxButtonsToShow = 5;
    let startPage = Math.max(currentPage - Math.floor(maxButtonsToShow / 2), 1);
    let endPage = Math.min(startPage + maxButtonsToShow - 1, totalPageCount);

    if (totalPageCount <= maxButtonsToShow) {
      startPage = 1;
      endPage = totalPageCount;
    } else if (endPage === totalPageCount) {
      startPage = endPage - maxButtonsToShow + 1;
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(i);
    }

    return (
      <ul className="pagination">
        {currentPage > 1 && (
          <li className="page-item">
            <button onClick={() => goToPage(currentPage - 1)} className="page-link">
              Previous
            </button>
          </li>
        )}
        {pageNumbers.map((number) => (
          <li
            key={number}
            className={`page-item ${currentPage === number ? 'active' : ''}`}
          >
            <button onClick={() => goToPage(number)} className="page-link">
              {number}
            </button>
          </li>
        ))}
        {currentPage < totalPageCount && (
          <li className="page-item">
            <button onClick={() => goToPage(currentPage + 1)} className="page-link">
              Next
            </button>
          </li>
        )}
      </ul>
    );
  };

  return (
    <div className="pagination-container">
      <h1>Pagination Example</h1>
      {renderItemsPerPageSelector()}
      <ul className="item-list">
        {/* ... */}
      </ul>
      {renderDynamicPaginationControls()}
    </div>
  );
};

export default Pagination;

In this code:

• We calculate the

  totalPageCount

  based on the total number of items and items per page.

• We determine the number of pagination buttons to display, ensuring a maximum of

  maxButtonsToShow

  buttons at a time. The

  startPage

  and

  endPage

  variables define the range of buttons to render.

• If the total page count is less than or equal to the maximum number of buttons, we display all page buttons.

• We conditionally render “Previous” and “Next” buttons based on the current page and total page count.

With these enhancements, the pagination controls adapt to the number of pages in your dataset, ensuring a user-friendly experience.

Responsive Pagination

Handling Different Screen Sizes

Responsive design is crucial to accommodate users on various devices and screen sizes. Let’s explore how to make our pagination component responsive.

const Pagination = () => {
  

  
  const determineButtonsToShow = () => {
    if (window.innerWidth >= 768) {
      return 5; 
    } else if (window.innerWidth >= 576) {
      return 3; 
    } else {
      return 1; 
    }
  };

  const maxButtonsToShow = determineButtonsToShow();

  

  return (
    <div className="pagination-container">
      <h1>Pagination Example</h1>
      {renderItemsPerPageSelector()}
      <ul className="item-list">
        {/* ... */}
      </ul>
      {renderDynamicPaginationControls()}
    </div>
  );
};

export default Pagination;

In this code:

Now, your pagination component adapts to different screen sizes, displaying a different number of buttons based on the user’s device.

Mobile-Friendly Pagination

For smaller screens, it’s crucial to provide a mobile-friendly layout for pagination controls. You can use CSS media queries to adjust the styling and layout of your pagination component for mobile devices.

Here’s an pagination in react js example of how you can apply simple CSS styles to make the pagination controls mobile-friendly:

.pagination-container {
  padding: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.page-item {
  margin: 0 5px;
}

.page-link {
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.page-link:hover {
  background-color: #0056b3;
}

@media (max-width: 576px) {
  .pagination {
    flex-direction: column;
    align-items: center;
  }

  .page-item {
    margin: 5px 0;
  }
}

In this CSS example:

• We apply basic styles to the pagination container, pagination buttons, and mobile-friendly adjustments using a media query.

• The media query targets screens with a maximum width of 576px, such as mobile devices, and adjusts the layout of the pagination controls accordingly.

With these CSS adjustments, your pagination component will provide an optimal user experience on mobile devices.

Conclusion

In conclusion, implementing pagination in a React.js application is a crucial aspect of creating a user-friendly and efficient user interface, especially when dealing with large datasets. Throughout this comprehensive guide, we’ve covered various aspects of pagination, from setting up a React project to implementing advanced features and ensuring responsive design. 

Pagination is a powerful tool for improving the performance and usability of your React.js applications, and mastering its implementation will greatly benefit your projects. CronJ is a leading react js development company in india with a strong specialization in React development. As React experts, CronJ offers a wide range of services to help businesses and organizations build high-quality React.js applications.

References