Datatable with pagination in React

In this article, we will show you how to implement datatable with pagination in React. In the previous article, we have explained about the basic integration of the datatable in ReactJS.

We will create a demo to integrate the pagination at the client side only. Also look into the server side pagination in the upcoming article.

Steps to integrate pagination in datatable

Implement datatable in React
Add pagination component
Output

1. Implement datatable in React

First, we have to implement the datatable in the react application. Basic integration is enough for the startup. Refer to the following link for step by step explanation.

How to implement DataTable in React

2. Add pagination component

To add the pagination, we must have a `pagination` attribute to the datatable component.

Here we will use a few attributes for pagination.

paginationPerPage - This attribute is used to display the number of rows per page.
paginationRowsPerPageOptions - The selection options to display records per page.
paginationComponentOptions - It’s used to override the options for the built in pagination component such as `rowsPerPageText`, `rangeSeparatorText` and many more.

Check out more props for pagination.

App.js

import React from 'react';
import DataTable from 'react-data-table-component';
import data from './data.json';

const columns = [
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
  },
  {
    name: 'Phone',
    selector: 'phone',
    sortable: true,
  },
  {
    name: 'Email',
    selector: 'email',
    sortable: true,
  },
  {
    name: 'DOB',
    selector: 'dob',
  },
];

function App() {
  return (
    <div class="App">
      <h3>Pagination in DataTable - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <datatable title="Employees" columns={columns} data={data} highlightonhover="" pagination="" paginationperpage={5} paginationrowsperpageoptions="{[5," 15,="" 25,="" 50]}="" paginationcomponentoptions={{ rowsperpagetext: 'records per page:', rangeseparatortext: 'out of', }}>
    </datatable></div>
  );
}

export default App;

3. Output

Run the project and check the output in the browser.

Output - Datatable with pagination in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project