Building Dynamic Table Pagination in React JS

What is pagination?

Pagination is a technique used to divide large data into smaller, more manageable chunks of data that can be accessed through navigation or links. This is often done by displaying a set number of rows per page, with links or buttons to navigate to other pages.

Create the structure of a table

First, I’ll start with creating the basic structure of a table in react app with some pagination buttons.

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Number of trips</th>
          </tr>
        </thead>
        <tbody>
          // I'll display data here later
        </tbody>
      </table>
      <section>
        <button>first</button>
        <button>previous</button>
        <button>next</button>
        <button>last</button>
      </section>

Fetch data from API

I’m using an instantwebtools website to fetch passenger's data.

P.S. This API already have totalPages and totalPassengers props available. But I'll consider as only given prop is totalPassengers to calculate totalPages according to it.