Pagination Component

ℹ️

The Pagination component is a React component designed for handling and displaying paginated content. It utilizes the popular react-paginate library and provides customization options for various styles and configurations.

Example Preview

Pagination Example

Usage

ℹ️

Import the Pagination component and use it in your React application:

import { Pagination } from "@/@core";
 
const MyComponent = () => {
  const handlePageChange = (pageNumber) => {
    // Handle page change logic
    console.log(`Page changed to ${pageNumber}`);
  };
 
  return (
    <Pagination
      totalCount={50}
      showPerPage={10}
      handlePageChange={handlePageChange}
      // Additional customization props
    />
  );
};
 
export default MyComponent;

Props

Prop Name	Type	Description
`totalCount`	`number`	The total number of items to be paginated.
`showPerPage`	`number`	The number of items to display per page.
`handlePageChange`	`function`	Callback function invoked when a page is selected.
`variant`	`string`	Pagination button style (`'outlined'`, `'contained'`, `'text'`).
`disabled`	`boolean`	Disables the pagination component.
`shape`	`string`	Shape of pagination buttons (`'circle'`, `'rounded'`, `'square'`).
`color`	`string`	Color variant of pagination buttons.
`size`	`string`	Size of pagination buttons (`'sm'`, `'md'`, `'lg'`, `'xl'`).

Other Props

ℹ️

Refer to the react-paginate documentation for additional configuration options: react-paginate (opens in a new tab).

Mockup Popup Modal