React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Pagination Navigation. The Pagination component allows the user to select a specific page from a range available of pages.
Pagination Navigation Variants:
- Basic pagination: This is the default variant of the pagination navigation component consisting of all the basic functionality.
- Outlined pagination: In this variant, the pagination buttons are in outlined shape with different colors.
- Rounded pagination: In this variant, the pagination buttons are round in shape.
- Pagination size: A pagination component consists of three different sizes: default, small and large size.
- Buttons: To provide more ease to the users changing the pages, we can enable first-page and last-page buttons, or disable the previous-page and next-page buttons.
- Custom icons: In the pagination component, the icons may be customized.
- Pagination ranges: We can specify how many digits to display on either side of the current page with the siblingRange prop whereas adjacent to the start and end page number with the boundaryRange prop.
- Controlled pagination: A pagination can be controlled to perform any specific task.
- Router integration: React router can be integrated with the pagination component for changing pages.
- usePagination: With the help of usePagination() hook, it can accept almost the same options as the Pagination component minus all the props related to the rendering of JSX.
- Table pagination: The TablePagination component is used to display the data in tabular form.
- Accessibility: With the getItemAriaLabel prop, we can override the role of “navigation” and aria-label “pagination navigation”.
- API: The APIs list is:
- <Pagination />
- <PaginationItem />
Syntax:
<Pagination count={...} />
Creating React Project:
Step 1: To create a react app, install react modules through the npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application: Open the terminal and type the following command.
npm start
Example 1: Below example demonstrates the React MUI outlined pagination navigation.
Javascript
import { Pagination } from "@mui/material"; import * as React from "react"; function App() { return ( <center> <div> <h1 style={{ color: "green" }}> neveropen </h1> <h2>React MUI Pagination navigation</h2> </div> <div style={{ width: "50%" }}> <Pagination count={20} variant="outlined" color="standard" /> </div> </center> ); } export default App; |
Output:
Example 2: Below example demonstrates the React MUI controlled pagination navigation.
Javascript
import { Pagination } from "@mui/material"; import * as React from "react"; function App() { const [page, setPage] = React.useState(1); const handlePageChange = (e, value) => { setPage(value); }; return ( <center> <div> <h1 style={{ color: "green" }}> neveropen </h1> <h2>React MUI Pagination navigation</h2> </div> <div style={{ display: 'flex', flexDirection: 'column-reverse', justifyContent: 'center', alignItems: 'center' }}> <h3>You are at: {page} page</h3> <Pagination count={20} color="secondary" onChange={handlePageChange} /> </div> </center> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-pagination/
