Skip to main content

Pagination Component

The Pagination component helps navigate through a large set of data by splitting it into multiple pages. It is customizable with options for setting the current page, navigating between pages, and controlling the number of items per page.

Props​

  • previousPage: A function that moves to the previous page.
  • totalPages: The total number of pages (calculated based on data size).
  • currentPage: The current page number (0-indexed).
  • gotoPage: A function that navigates to a specific page.
  • nextPage: A function that moves to the next page.
  • canPreviousPage: A boolean that determines if the previous page button should be enabled.
  • canNextPage: A boolean that determines if the next page button should be enabled.
  • itemsPerPage: Number of items displayed per page.
  • changeItemsPerPage: A function to change the number of items per page.
  • className: (Optional) A string for additional class names for the component wrapper.

Component Usage​

import React, { useState } from 'react';
import Pagination from './Pagination';

function App() {
  const [cardsPerPage, setCardsPerPage] = useState(6);
  const [pageNumber, setPageNumber] = useState(0);
  const cardData = [...]; // Array of data
  const pagesVisited = pageNumber * cardsPerPage;
  const cardsDisplayed = cardData.slice(pagesVisited, pagesVisited + cardsPerPage);
  const totalPages = Math.ceil(cardData.length / cardsPerPage);

  const gotoPage = (page) => {
    setPageNumber(page);
  };

  const nextPage = () => {
    setPageNumber(old => Math.min(old + 1, totalPages - 1));
  };

  const previousPage = () => {
    setPageNumber(old => Math.max(old - 1, 0));
  };

  const canNextPage = pageNumber < totalPages - 1;
  const canPreviousPage = pageNumber > 0;

  return (
    <div>
      <div className="d-flex flex-wrap m-4">
        {cardsDisplayed}
      </div>
      <Pagination
        previousPage={previousPage}
        totalPages={totalPages}
        currentPage={pageNumber}
        gotoPage={gotoPage}
        nextPage={nextPage}
        canPreviousPage={canPreviousPage}
        canNextPage={canNextPage}
        itemsPerPage={cardsPerPage}
        changeItemsPerPage={setCardsPerPage}
      />
    </div>
  );
}

export default App;

Dependencies​

RepositoryUsage Count
frontend-app-staff-dashboard11
frontend-app-dashboard3
frontend-app-course-authoring3

Detailed usage locations:​

frontend-app-staff-dashboard

  • src/components/TablePage.jsx
  • src/pages/billing/index.jsx
  • src/pages/library/videos/index.jsx
  • src/pages/program-single/attendance/index.jsx
  • src/pages/program-single/enrollment/index.jsx
  • src/pages/program-single/fee-statistics/index.jsx
  • src/pages/program-single/program-team/index.jsx
  • src/pages/users/index.jsx
  • src/pages/users/learners/index.jsx
  • src/pages/users/teams/TeamSingle.jsx
  • src/pages/users/teams/index.jsx

frontend-app-dashboard

  • src/components/Notes.jsx
  • src/pages/discover/courses-discover/index.jsx
  • src/pages/discover/programs-discover/index.jsx

frontend-app-course-authoring

  • src/attendance/index.jsx
  • src/enrollments/index.jsx
  • src/fee-statistics/index.jsx