react-simply-paginate v0.1.7

React Simply Paginate

If you follow the code below carefully, i hope you will be able to understand how to use the component.

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

import Table from "./Table";

import data from "./MOCK_DATA.json";

import Paginate from "react-simply-paginate";

const Data = data;

const noOfRows = Data.length;

const DataTable = () => {
    const [rowsPerPage, setRowsPerPage] = useState(20);
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPages, setTotalPages] = useState(noOfRows / rowsPerPage);

    const dataContentPerPage = Data.filter(
    (data) =>
        data.id <= currentPage _ rowsPerPage &&
        data.id > (currentPage - 1) _ rowsPerPage
    );

    useEffect(() => {
    setTotalPages(noOfRows / rowsPerPage);
    }, [rowsPerPage]);

    return (
        <div>
            {rowsPerPage && (
            // I have created the table below to reduce the markup.
            // I hope in future i will publish this table component also.

            <Table
                tableData={dataContentPerPage}
                thNames={["Name", "Email", "Gender", "Phone"]}
                tdProperties={["first_name", "email", "gender", "phone"]}
                thStyle={{
                 textAlign: "center",
                 border: "1px solid #ddd",
                 backgroundColor: "#E5EAF0",
                paddingTop: "2px",
                paddingBottom: "2px",
                }}
                tdStyle={{
                 textAlign: "center",
                 border: "1px solid #ddd",
                 backgroundColor: "#edf0f4",
                 paddingTop: "2px",
                 paddingBottom: "2px",
                }}
            />
            )}


        {/* We are going to use our imported component to paginate. */}

        {rowsPerPage && (
            <Paginate
             totalPages={totalPages}   // this property is required
             setCurrentPage={setCurrentPage}   // this property is required
             arrowColor={"black"}   // optional property
             borderColor={"blue"}   // optional property
             backgroundColor={"#7b0000"}   // optional property
             digitColor={"white"}   // optional property
            />
      )}
    </div>

);
};

export default DataTable;