Introduction
Pagination is essential when handling large datasets in a web application. Instead of loading all records at once, backend pagination retrieves data in smaller chunks, improving performance and user experience. In this guide, we will implement backend pagination in a React blog using Material-UI’s Pagination component.
We will build a simple React frontend that fetches paginated blog posts from a backend API and displays them using Material-UI components.
Prerequisites
- Node.js and npm
- React
- Typescript
- Material UI
Frontend Setup in React
Let’s create a React app using the following command:
//Create a react app using the following command
npm create vite@latest pagination --template react-ts
cd pagination
npm install
//Install the Material UI library
npm install @mui/material @emotion/react @emotion/styled
//Install the axios
npm install axios
//Command for run the React project
npm run dev
Frontend Implementation (React + Material-UI)
Below example demonstrates how to build a user listing page with pagination in React using Material-UI components. The app fetches user data from the public ReqRes API and displays it in a stylish table format with user avatars, names, and emails. Users can easily navigate between pages using the pagination controls at the bottom of the table.
Put the below code into the App.tsx File.
//App.tsx
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Avatar,Pagination,
CircularProgress,Box,Typography} from "@mui/material";
interface User {
id: number;
email: string;
first_name: string;
last_name: string;
avatar: string;
}
interface ApiResponse {
page: number;
per_page: number;
total: number;
total_pages: number;
data: User[];
}
const App = () => {
const [users, setUsers] = useState<User[]>([]);
const [page, setPage] = useState<number>(1);
const [totalPages, setTotalPages] = useState<number>(1);
const [loading, setLoading] = useState<boolean>(false);
const fetchUsers = async (currentPage: number) => {
setLoading(true);
try {
const response = await axios.get<ApiResponse>(
`https://reqres.in/api/users?page=${currentPage}&per_page=5`
);
setUsers(response.data.data);
setPage(response.data.page);
setTotalPages(response.data.total_pages);
} catch (error) {
console.error("Failed to fetch users:", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchUsers(page);
}, [page]);
const handlePageChange = (
event: React.ChangeEvent<unknown>,
value: number
) => {
setPage(value);
};
return (
<Paper
elevation={3}
sx={{ padding: 3, backgroundColor: "#f9fafb", borderRadius: 3, }}
>
<Typography
variant="h5"
sx={{ marginBottom: 3, fontWeight: "bold", color: "#1e293b" }}
>
Users
</Typography>
{loading ? (
<Box display="flex" justifyContent="center" my={5}>
<CircularProgress color="primary" />
</Box>
) : (
<TableContainer component={Paper} sx={{ borderRadius: 2 }}>
<Table>
<TableHead>
<TableRow sx={{ backgroundColor: "#1e40af" }}>
<TableCell sx={{ color: "#fff", fontWeight: "bold" }}>
Avatar
</TableCell>
<TableCell sx={{ color: "#fff", fontWeight: "bold" }}>
First Name
</TableCell>
<TableCell sx={{ color: "#fff", fontWeight: "bold" }}>
Last Name
</TableCell>
<TableCell sx={{ color: "#fff", fontWeight: "bold" }}>
Email
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
<TableRow
key={user.id}
sx={{
"&:nth-of-type(odd)": { backgroundColor: "#f1f5f9" },
"&:hover": { backgroundColor: "#e2e8f0" },
}}
>
<TableCell>
<Avatar src={user.avatar} alt={user.first_name} />
</TableCell>
<TableCell>{user.first_name}</TableCell>
<TableCell>{user.last_name}</TableCell>
<TableCell>{user.email}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
<Pagination
count={totalPages}
page={page}
onChange={handlePageChange}
color="primary"
shape="rounded"
size="large"
sx={{
marginTop: 3,
display: "flex",
justifyContent: "flex-end",
"& .MuiPaginationItem-root": {
fontWeight: "bold", color: "#1e293b",
"&.Mui-selected": {
backgroundColor: "#1e40af",
color: "#fff",
},
},
}}
/>
</Paper>
);
}
export default App
With the above code, you will get the following output on your screen.
Conclusion
Pagination helps effectively handle and present big sets of data by breaking them into pieces of small and manageable size. In the project, we have been able to implement server-side pagination based on the Reqres API through which we are able to get the user information depending on the page chosen dynamically. Pagination not only assists in enhancing the performance of the application by minimizing the quantity of data rendered simultaneously but also gives users more control over going through data. This mechanism is especially applicable to APIs that do support paginated responses as it minimizes unnecessary fetching of data and optimizes bandwidth utilization.
