React Table Pagination: Step-by-Step Guide for Beginners (2026)

In this tutorial, you will learn how to implement pagination in a dynamic table using React.js. Pagination is crucial for enhancing user experience by breaking down data into manageable chunks. This is especially important when dealing with large datasets fetched from an API. By the end of this guide, you'll be able to efficiently paginate tables, improving both performance and usability.

Key Takeaways

• Understand the basics of pagination and its importance in web applications.
• Learn how to fetch and display data from an API in a React table.
• Implement a pagination component in React for dynamic tables.
• Handle common issues and errors when paginating tables in React.

Prerequisites

Before starting, ensure you have the following:

• Basic knowledge of React.js, including components and state management.
• Node.js and npm installed on your machine.
• A code editor like Visual Studio Code installed.
• Familiarity with JavaScript ES6 syntax and promises.

Step 1: Set Up Your React Project

First, create a new React project. Open your terminal and run:

npx create-react-app react-pagination-tutorial

Navigate into your project directory:

cd react-pagination-tutorial

Start the React development server:

npm start

This command will run your application on http://localhost:3000.

Step 2: Fetch Data from an API

In this step, we'll fetch data from a placeholder API. Create a new file called DataTable.js in the src directory. Here's a simple component to fetch and display data:

import React, { useEffect, useState } from 'react';

const DataTable = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return Loading data...;
  }

  return (
    
        {data.map(user => (
          
        ))}
      
      
        
          User ID
          Name
          Email
        
      
      
            {user.id}
            {user.name}
            {user.email}
          
    
  );
};

export default DataTable;

Add the DataTable component to your App.js to render it:

import React from 'react';
import DataTable from './DataTable';

function App() {
  return (
    
      React Table with Pagination
      
    
  );
}

export default App;

At this point, you should see a table with user data. However, it lacks pagination.

Step 3: Implement Pagination Logic

To implement pagination, you'll need to split the data into pages. Modify your DataTable component:

const DataTable = () => {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(5);

  // Fetch data logic remains unchanged

  // Determine the current items
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  // Change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    
      
          {currentItems.map(user => (
            
          ))}
        
        
          
            User ID
            Name
            Email
          
        
        
              {user.id}
              {user.name}
              {user.email}
            
      
      
    
  );
};

Step 4: Create a Pagination Component

Create a new file called Pagination.js and define a simple pagination component:

import React from 'react';

const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
  const pageNumbers = [];

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

  return (
    
      
        {pageNumbers.map(number => (
          
             paginate(number)} href='!#' className='page-link'>
              {number}
            
          
        ))}
      
    
  );
};

export default Pagination;

This component will render page numbers based on the total items and items per page. It will call the paginate function to change the current page.

Import and use the Pagination component in your DataTable.js as shown in the previous step.

Common Errors/Troubleshooting

• Page Not Changing: Ensure that your paginate function is correctly updating the state.
• Invalid Hook Call: Verify that hooks are used inside functional components only.
• API Fetch Failing: Check the API endpoint and ensure CORS policies allow fetching from your local server.

With these steps, you have successfully implemented pagination in a React table. This basic setup can be enhanced with additional features like sorting and searching, which can further improve your table's usability.

Frequently Asked Questions

Why use pagination in tables?

Pagination breaks down large data sets into smaller pages, improving load times and user experience by making data more manageable.

How can I style the pagination component?

You can use CSS or libraries like Bootstrap to style the pagination controls, making them visually appealing and responsive.

What if the API data changes frequently?

Consider implementing polling or using WebSockets to automatically refresh the data and update the table.

Can I add sorting and searching to the table?

Yes, you can add additional features such as sorting and searching by manipulating the data before slicing it for pagination.