How to show pagination in ReactJS ?

Last Updated : 25 Jul, 2024

Pagination shows the page number and allows users to switch between pages easily with the next and previous buttons. Material UI for React has this component available for us and it is very easy to integrate.

Prerequisites:

Steps for Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @material-ui/core
npm install @material-ui/icons

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

JavaScript

import React 
    from "react";
import Button 
    from "@material-ui/core/Button";
import { useTheme } 
    from "@material-ui/core/styles";
import KeyboardArrowRight 
    from "@material-ui/icons/KeyboardArrowRight";
import KeyboardArrowLeft 
    from "@material-ui/icons/KeyboardArrowLeft";
import MobileStepper 
    from "@material-ui/core/MobileStepper";

const App = () => {
    const theme = useTheme();

    const forwardButton = () => {
        setActiveStep(
            (prevActiveStep) => 
                prevActiveStep - 1);
    };

    const [INDEX, setActiveStep] = React.useState(0);

    const previousButton = () => {
        setActiveStep(
            (prevActiveStep) => 
                prevActiveStep + 1);
    };

    return (
        <div
            style={{
                marginLeft: "40%",
            }}
        >
            <h2>How to Show Pagination in ReactJS?</h2>
            <MobileStepper
                steps={5}
                variant="dots"
                style={{
                    flexGrow: 1,
                    maxWidth: 400,
                }}
                activeStep={INDEX}
                position="static"
                nextButton={
                    <Button size="small"
                        onClick={previousButton}
                        disabled={INDEX === 4}>
                        Next
                        {theme.direction !== "rtl" ? (
                            <KeyboardArrowRight />
                        ) : (
                            <KeyboardArrowLeft />
                        )}
                    </Button>
                }
                backButton={
                    <Button size="small"
                        onClick={forwardButton}
                        disabled={INDEX === 0}>
                        {theme.direction !== "rtl" ? (
                            <KeyboardArrowLeft />
                        ) : (
                            <KeyboardArrowRight />
                        )}
                        Back
                    </Button>
                }
            />
            <h3>Page No: {INDEX + 1}</h3>
        </div>
    );
};

export default App;