How to implement Material UI's Pagination in React

Key takeaways:

• Material UI is an open-source styling library that enhances React applications with pre-designed components.

• The Pagination component allows users to navigate across multiple pages in a web application.

• Pagination variations include basic, outlined, rounded, and button pagination styles.

• Basic pagination provides numbered links or arrows for straightforward navigation.

• Outlined pagination features buttons with an outlined style for clarity.

• Rounded pagination offers buttons with softer, rounded corners for a modern look.

• Button pagination replaces numbers with labeled buttons for navigation, such as “Previous” and “Next.”

• Implementing pagination in React requires importing necessary components like Pagination and useState for state management.

• The current page state can be updated using a handleChange function to synchronize user interactions.

• Material UI’s Pagination component simplifies creating pagination interfaces while maintaining UI consistency.

Material UI is a well-known open-source styling library that provides pre-designed components and styles to build a visually appealing React web application. Material UI is mainly used with React, a JavaScript library for designing web interfaces. By combining both these technologies, it becomes a complete blend of UI design.

In this Answer, we’ll learn how we can implement Material UI’s Pagination component in a React application.

Note: Please makes sure to install Material UI version 5 in your systems as we will be using it in the Answer.

The Pagination component

The Pagination component is a user interface element that facilitates navigation across multiple pages within a website or application. It allows users to move between different sections or sets of content by presenting a series of numbered links or buttons, each corresponding to a specific page.

Pagination variations

The Pagination component offers multiple variations that can be used in different use cases here are some of the variations that we will explore:

• Basic pagination

• Outlined pagination

• Rounded pagination

• Button pagination

Now, in the upcoming section, let's examine all these pagination variations one by one and their relevant codes.

Basic pagination

This basic pagination format typically consists of numbered links or arrows to navigate between pages. It’s straightforward and provides a clear way for users to navigate a series of pages.

• Lines 2 and 3: We import the Pagination component from @mui/material/Pagination and Stack component from @mui/material/Stack.

• Line 7: We define the Stack component with a spacing of 2.

• Line 8: We define a basic Pagination component with count attribute as 15, which will show the total number of pages.

• Line 9: We define a Pagination component with count attribute as 4, and also include a color to it by defining the color attribute as primary , which will add a color.

• Line 10: We again add a Pagination component with disabled attribute, which will disable all pages.

Outlined pagination

In this variation of Pagination component, the pagination buttons have an outlined style rather than being filled in, which will make it clearer for the user.

• Line 8: We define a Pagination component with a variant attribute as outlined, which will add an outline around the button.

• Line 9: We define a Pagination component with a variant attribute as outlined and color attribute as secondary.

• Line 10: We define a Pagination component with a variant attribute as outlined and disabled attribute.

Rounded pagination

In this variation of Pagination component, have rounded corners, giving them a softer and more modern look compared to sharp-edged buttons.

• Line 8: We define a Pagination component with a shape attribute as rounded.

• Line 9: We define a Pagination component with a shape attribute as rounded and variant attribute as outlined.

Button pagination

Button pagination replaces the traditional numbered links with buttons for navigation. These buttons might have labels like “Previous” and “Next” or arrow icons indicating direction.

• Line 8: We define a Pagination component with a showFirstButton and showLastButton , which will show a button that will route to the first and last page of the web.

• Line 9: We again define a Pagination component with hidePrevButton and hideNextButton attributes that will hide both buttons.

Code example

Now that we have understood some types of paginations, let’s enhance our understanding by executing the coding example below on button pagination.

• Lines 1–3: We import all the required modules, which include useState a React hook that will be used to manage states. and Pagination,PaginationItem components of Material UI that would be used to implement pagination.

• Line 5: We define a useState with the name of currentPage and setCurrentPage that would store the page state in them.

• Lines 7-9: We define a function handleChange that updates the currentPage state when a new page is selected.

• Lines 16–45: In this section of the code, we define the Pagination component, where we defined the count prop specifies the total number of pages while page controls the currently active page, synchronized with the currentPage state variable. When a user interacts with the pagination, the onChange callback updates the currentPage state accordingly.

Conclusion

Material UI’s Pagination component offers a simple way to implement pagination in React applications. With options to control page count, active page, and custom rendering, it streamlines the process of creating pagination interfaces. Its built-in features handle user interactions seamlessly, making it an efficient choice for adding pagination functionality while maintaining a visually consistent UI.