Pagination Component

A reusable pagination component for React apps, built with Material UI and TypeScript.

Features

• Simple pagination controls
• Material UI styling
• TypeScript support

Installation

npm install @it.support/pagination-component

Peer Dependencies

• React 18+
• React DOM 18+
• @mui/material 5+

⚠️ Material UI Dependency Required

This component uses Material UI components. Your project must have @mui/material installed as a dependency.

If you do not install Material UI, your app will crash with errors like:

Cannot find module '@mui/material'

Install Material UI in your project:

npm install @mui/material

If your project does not use Material UI and you do not want to add it, this Pagination component will not work for you.

Usage

import Pagination from '@it.support/pagination-component';
import React, { useState } from 'react';

const Example = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalRows = 100;
  const rowsPerPage = 10;

  return (
    <Pagination
      totalRows={totalRows}
      rowsPerPage={rowsPerPage}
      currentPage={currentPage}
      handlePageChange={setCurrentPage}
    />
  );
};

Props

| Prop | Type | Required | Description | |------------------|---------------------|----------|------------------------------------| | totalRows | number | Yes | Total number of rows/items | | rowsPerPage | number | Yes | Number of rows/items per page | | currentPage | number | Yes | Current page number (1-based) | | handlePageChange | (page: number) => void | Yes | Callback when page changes |

License

MIT