React MUI TablePagination API

Last Updated : 26 Apr, 2025

MUI is a user interface library that provides predefined and customizable React components for faster and easy web development. MUI offers a comprehensive suite of UI tools that help in shipping new features faster. In this article let’s discuss the TablePagination API offered by MUI library.

Pagination is the process of separating content into discrete pages. If a table with lots of rows needs to be organized without making the table extra large then some sort of pagination can help. To do so MUI offers TablePagination API to make the task easy.

Syntax:

<TablePagination
    rowsPerPageOptions={[5, 10, 25]}
    component="div"
    count={15}
    rowsPerPage={5}
    page={1}
/>

Creating React App:

Step 1: Initialize the app using create-react-app.

npx create-react-app myApp

Step 2: Get inside the project directory.

cd myApp

Installing MUI: It can be easily installed using package managers such as npm or yarn.

npm install @mui/material @emotion/react @emotion/styled

yarn add @mui/material @emotion/react @emotion/styled

Importing TablePagination API to the project:

import TablePagination from '@mui/material/TablePagination';
// or
import { TablePagination } from '@mui/material';

Props List:

count: It is the count of the total number of rows in the table.
onPageChange: It is basically a call-back function that is invoked when the page is changed.
page: This prop takes an integer that shows the current page index. It follows zero-based indexing.
rowsPerPage: It gives the number of rows that will be displayed on each page of the table. If on any page the number of rows remains less than the rows per page value then in that case only the remaining rows will be shown.
classes: It is to override or extend the styles applied to the component.
component: It is the type of the element used for the root node.
getItemAriaLabel: This prop is used in order to help users who use screen readers. It accepts a function returning a user-friendly name of the current page as a string.
onRowsPerPageChange: It is a call-back function that is executed when the number of rows per page is changed. For example, it can be used to change the current page index back to the initial value whenever the number of rows per page is changed.
rowsPerPageOptions: This prop customizes the options of the rows per page select field. It can be an array of integers where each integer in the array will be displayed as the option to select from while changing rowsPerPage.
sx: This is the system prop. This allows us to define additional CSS styles for the component.

Example 1: Let us create a table using some of the props which we have learned so far. In this example, we will be creating a result table having columns representing the names of the participant and scores of different subjects. We will be using rowsPerPage prop to show a number of rows on a page.

JavaScript

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";

function createData(name, dsa, maths, dbms, networking) {
    return { name, dsa, maths, dbms, networking };
}

const rows = [
    createData("John", 80, 66, 76, 89),
    createData("Sandeep", 82, 83, 79, 98),
    createData("Raman", 85, 79, 80, 85),
    createData("Saini", 75, 67, 85, 78),
    createData("Virat", 90, 89, 84, 76),
    createData("Rohit", 86, 83, 95, 88),
    createData("Smriti", 92, 90, 89, 80),
    createData("Mandhana", 86, 88, 88, 89),
    createData("Deepti", 79, 86, 80, 88)
];

export default function BasicTable() {
    const [pg, setpg] = React.useState(0);
    const [rpg, setrpg] = React.useState(5);

    function handleChangePage(event, newpage) {
        setpg(newpage);
    }

    function handleChangeRowsPerPage(event) {
        setrpg(parseInt(event.target.value, 10));
        setpg(0);
    }

    return (
        <Paper>
            <h1 style={{ textAlign: "center", color: "green" }}>
                GeeksForGeeks
            </h1>
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} 
                    aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Geek</TableCell>
                            <TableCell align="right">Dsa
                            </TableCell>
                            <TableCell align="right">Maths
                            </TableCell>
                            <TableCell align="right">Dbms
                            </TableCell>
                            <TableCell align="right">Networking
                            </TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.slice(pg * rpg, pg * rpg + rpg).map((row) => (
                            <TableRow
                                key={row.name}
                                sx={{ "&:last-child td,
                                &:last-child th": { border: 0 } }}
                            >
                                <TableCell component="th" scope="row">
                                    {row.name}
                                </TableCell>
                                <TableCell align="right">{row.dsa}
                                </TableCell>
                                <TableCell align="right">{row.maths}
                                </TableCell>
                                <TableCell align="right">{row.dbms}
                                </TableCell>
                                <TableCell align="right">{row.networking}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                rowsPerPageOptions={[5, 10, 25]}
                component="div"
                count={rows.length}
                rowsPerPage={rpg}
                page={pg}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
            />
        </Paper>
    );
}

Output:

Example2: In this example we will be creating another table which will show list of events along with the date. We will make this table more interactive having the functionality of changing the number of rows to appear on a page and changing the pages by clicking next or previous buttons. In addition to the count prop we will be using props like onPageChange, onRowsPerPageChange, etc.

JavaScript

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TablePagination from "@mui/material/TablePagination";
import Paper from "@mui/material/Paper";

function createData(events, dates) {
    return { events, dates };
}

const rows = [
    createData("Technical Scripter", "13 October"),
    createData("Gate Mock", "5 November"),
    createData("Bi Wizard", "26 November"),
    createData("Job-A-Thon14", "21 October"),
    createData("GFG Hiring", "15 October"),
    createData("TechnicalScripter", "13 October"),
    createData("Gate Mock Exam", "5 November"),
    createData("Bi Wizard School", "26 November"),
    createData("Job-A-Thon 14", "21 October"),
    createData("GFG Hiring Challenge", "15 October")
];

export default function BasicTable() {
    const [pg, setpg] = React.useState(0);
    const [rpg, setrpg] = React.useState(5);

    function handleChangePage(event, newpage) {
        setpg(newpage);
    }

    function handleChangeRowsPerPage(event) {
        setrpg(parseInt(event.target.value, 10));
        setpg(0);
    }

    return (
        <Paper>
            <h1 style={{ textAlign: "center", color: "green" }}>
                GeeksForGeeks</h1>
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} 
                    aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Event</TableCell>
                            <TableCell align="right">
                                Date
                            </TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.slice(pg * rpg, pg *
                            rpg + rpg).map((row) => (
                            <TableRow
                                key={row.name}
                                sx={{ "&:last-child td, 
                                &:last-child th": { border: 0 } }}
                            >
                                <TableCell component="th" 
                                    scope="row">
                                    {row.events}
                                </TableCell>
                                <TableCell align="right">
                                    {row.dates}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                rowsPerPageOptions={[5, 10, 25]}
                component="div"
                count={rows.length}
                rowsPerPage={rpg}
                page={pg}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
            />
        </Paper>
    );
}

Output:

Reference: https://mui.com/material-ui/api/table-pagination/

React MUI TableRow API

sandeepkrsuman

Improve

Article Tags :

React MUI TablePagination API

Similar Reads

MUI Input Component

MUI Data Display Component

MUI Feedback Component

MUI Surface Component

MUI Navigation Component

MUI Layout Component

MUI Utils Component

MUI Component API

Thank You!

What kind of Experience do you want to share?