Root: ui|v2.5|src|components|List: Pagination.tsx

Pagination.tsx

This file contains two components, Pagination and PaginationIndex, which handle pagination-related functionality in a list view. Here's an explanation of each component:

1. Pagination Component:

   • Props:
     • itemsPerPage: Number of items per page.
     • currentPage: Current page number.
     • totalItems: Total number of items.
     • onChangePage: Function to handle page change.
   • Calculates the total number of pages based on the total number of items and items per page.
   • Determines the start and end page numbers to display based on the current page and total pages.
   • Renders page buttons with numbers and handles their click events to change the page.
   • Includes buttons for first and last page, as well as previous and next page buttons if there are more than 4 pages.
   • Provides responsive behavior to hide some page buttons on smaller screens.
   • Returns a ButtonGroup containing pagination buttons.

2. PaginationIndex Component:

   • Props:
     • itemsPerPage: Number of items per page.
     • currentPage: Current page number.
     • totalItems: Total number of items.
     • metadataByline: Additional metadata to display.
   • Calculates the range of items being displayed on the current page.
   • Builds a string indicating the range of items being displayed and the total number of items.
   • Renders the pagination index string along with any additional metadata.

Example Usage:

import { Pagination, PaginationIndex } from "./Pagination";

// Inside a React component
<Pagination 
  itemsPerPage={10} 
  currentPage={currentPage} 
  totalItems={totalItems} 
  onChangePage={handlePageChange} 
/>

<PaginationIndex 
  itemsPerPage={10} 
  currentPage={currentPage} 
  totalItems={totalItems} 
  metadataByline={<div>Additional Metadata</div>} 
/>

Explanation:

These components provide pagination functionality and display pagination controls along with an index of items being displayed in a list view. Users can navigate between pages and view information about the current page's items.