How To Use ReactPagination And DataTable in ReactJS

In this article, we will learn how to use reactpagination and datatable in React.js.

The data table component for ReactJs represents a lightweight table widget built to easily replace your HTML tables.

First, we have to install the datatable npm module in react project.

npm install react-data-table-component styled-components

Then, install reactpagination npm module in react project for pagination of data.

npm install react-paginate --save

Then, add the below code to your file.

import React, { useState } from 'react'
import DataTable from 'react-data-table-component'
import ReactPaginate from 'react-paginate';

export default function Datatable() {
    const columns = [
        {
            name: 'Id',
            minWidth: '40px',
            selector: 'id',
            sortable: true,
            cell: (row) => row.id
        },
        {
            name: 'Name',
            minWidth: '200px',
            selector: 'name',
            sortable: true,
            cell: (row) => row.name
        },
        {
            name: 'Exam Score',
            selector: 'examscore',
            minWidth: '120px',
            sortable: true,
            cell: (row) => row.examscore
        },
        {
            name: 'Quiz Score',
            minWidth: '100px',
            selector: 'quizscore',
            sortable: true,
            cell: (row) => row.quizscore
        },
        {
            name: 'Homework Score',
            minWidth: '180px',
            selector: 'homeworkscore',
            sortable: true,
            cell: (row) => row.homeworkscore
        }
    ]
    const dataColumns = [
        {
            id: '1',
            name: 'aimee Zank',
            examscore: '98',
            quizscore: '52',
            homeworkscore: '85'
        },
        {
            id: '2',
            name: 'Aurelia Menendez',
            examscore: '88',
            quizscore: '74',
            homeworkscore: '55'
        },
        {
            id: '3',
            name: 'Corliss Zuk',
            examscore: '87',
            quizscore: '22',
            homeworkscore: '74'
        },
        {
            id: '4',
            name: 'Bao Ziglar',
            examscore: '41',
            quizscore: '77',
            homeworkscore: '63'
        },
        {
            id: '5',
            name: 'Zachary Langlais',
            examscore: '49',
            quizscore: '88',
            homeworkscore: '22'
        },
        {
            id: '6',
            name: 'Wilburn Spiess',
            examscore: '95',
            quizscore: '20',
            homeworkscore: '40'
        },
        {
            id: '7',
            name: 'Jenette Flanders',
            examscore: '48',
            quizscore: '74',
            homeworkscore: '62'
        },
        {
            id: '8',
            name: 'Salena Olmos',
            examscore: '55',
            quizscore: '22',
            homeworkscore: '41'
        },
        {
            id: '9',
            name: 'Daphne Zheng',
            examscore: '74',
            quizscore: '74',
            homeworkscore: '66'
        },
        {
            id: '10',
            name: 'Sanda Ryba',
            examscore: '55',
            quizscore: '69',
            homeworkscore: '63'
        },
        {
            id: '11',
            name: 'Denisha Cast',
            examscore: '52',
            quizscore: '42',
            homeworkscore: '85'
        },
        {
            id: '12',
            name: 'Marcus Blohm',
            examscore: '74',
            quizscore: '25',
            homeworkscore: '41'
        },
        {
            id: '13',
            name: 'Quincy Danaher',
            examscore: '52',
            quizscore: '42',
            homeworkscore: '63'
        },
        {
            id: '14',
            name: 'Jessika Dagenais',
            examscore: '41',
            quizscore: '74',
            homeworkscore: '50'
        },
        {
            id: '15',
            name: 'Alix Sherrill',
            examscore: '48',
            quizscore: '77',
            homeworkscore: '60'
        }
    ]
    const [dataArray11, setDataArray11] = useState(dataColumns.slice(0, 5))
    const [currentPage, setCurrentPage] = useState(1)

    const handlePagination = (page) => {
        setCurrentPage(page.selected)
        const dataarr = []
        for (let index = page.selected * 5; index < (page.selected + 1) * 5; index++) {
            dataarr.push(dataColumns[index])
        }
        setDataArray11(dataarr)
    }
    const CustomPagination = () => {
        return (
            <ReactPaginate
                pageCount={dataColumns.length / 5}
                forcePage={currentPage}
                onPageChange={page => handlePagination(page)}
                activeClassName='active'
            />
        )
    }
    return (
        <DataTable
            pagination
            subHeader
            responsive
            paginationServer
            columns={columns}
            data={dataArray11}
            paginationComponent={CustomPagination}
            subHeaderComponent={<div className="text-muted w-100 row">Sort a table by clicking its headers</div>}
        />
    )
}

Here, the columns define tables header filed and datacolumns define data of the table.

Reactpagination gives onPageChange parameter which handles pagination.

It will give below output.