How to implement pagination to a list data in a table in react.js?

Question

Quick help needed! I have list of data rendered in a table from an API. I need this list of data to be paginated into small list of data.

Here is the code for VendorsDetail.js which displays list of data in a table

import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
import VendorDetailsBrief from "./VendorDetailsBrief";
import Pagination from "./Pagination";

const VendersDetail = ({ textMe }) => {
  const [data, setData] = useState({});
  const foo = "cpe:2.3:a:oracle:peoplesoft_enterprise:8.22.14";
  const baseURL =
    "https://services.nvd.nist.gov/rest/json/cves/1.0?cpeMatchString=" + foo;

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert(err);
        }
      );
  }, []);

  const DisplayData = data?.result?.CVE_Items?.map((vender) => {
    return (
      <tr>
        <td className="color_id font-semibold">
          {vender?.cve?.CVE_data_meta?.ID}
        </td>
        <td className="w-96">
          {vender?.cve?.description?.description_data?.[0]?.value}
        </td>
        <td>{vender?.impact?.baseMetricV2?.exploitabilityScore}</td>
        <td>{vender?.impact?.baseMetricV2?.severity}</td>
        <td>{vender?.impact?.baseMetricV2?.impactScore}</td>
      </tr>
    );
  });
  return (
    <div className="z-100 flex justify-center items-center mt-10">
      <div className="text-black">
        <div className="rounded overflow-hidden flex  justify-center items-center">
          <table class="table table-striped ">
            <thead>
              <tr>
                <th>Vuln ID</th>
                <th>Description Data</th>
                <th>Exploitability Score</th>
                <th>Severity</th>
                <th>Impact Score</th>
              </tr>
            </thead>
            <tbody>{DisplayData}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default VendersDetail;

Pagination.js

import React from "react";

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

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

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a onClick={() => paginate(number)} href="!#" className="page-link">
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

How can I implement pagination in this particular data list? Thanks

B.Anup · Accepted Answer · 2021-12-21 12:31:37Z

1

Create Parent Component with logic to get data from URL and pagination onCLick handler.
Parent Component should render VendorsDetail component and Pagination component.
Pass data to be displayed to VendorsDetails component and getSubsequentData handler to Pagination component.

If user click on specific page number, call getSubsequentData handler with specific argument, that updates the state of the parent component, which will updates VendorsDetail component.

const ParentComponent = () => {

 const [data, setData] = useState({})

 useEffect = (() => {
   // axios call to get initial data from the URL
 })

 getSubsequentData = (URL) => {
   // axios call to get data based on the URL.
   // LInk this to pagination onClick
 }
       return(
 <VendorsDetail data={data} />
 <Pagination getNextData={getSubsequentData}/>

) }

answered Dec 21, 2021 at 12:31

B.Anup

5854 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Teshie Ethiopia Over a year ago

Thanks for you answer

Collectives™ on Stack Overflow

How to implement pagination to a list data in a table in react.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related