Ant Design: Implementing Pagination in ReactJS.

For the last few months, I and my senior were working on a Web Application built in ReactJS and Ant design CSS Framework. We were representing our data in a catalogic/tiles way, and it was creating sort of an infinite scroll with each increasing data. So thought of implementing a page view for the app data.

The similar design we were trying to do for our data. (Courtesy- Hotstar)

Ant Design

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

Installation:

$ npm install antd
$ yarn add antd

After adding the dependency:

import { Pagination } from ‘antd’;

Set React initial states:

elementsPerPage is the number of elements you want to render on a single page. currentPageElements array is to store the elements to render for each page and offset helps to select those elements. pagesCount sets the total number of pages to render.

Pagination component initial states

Implementing Pagination with fetched Data:

In the below code snippet, we are fetching data to be rendered catalogic with pagination. getAllElements is an async function that will fetch data from a REST API and store it in the allElements state.

In this, we have implemented a function to set pageCount state, which stores the number of pages to render, with a callback function to set elements for the current page.

Here, we have implemented a function to calculate elements for the current page depending upon elementsPerPage and offset state.

Here, to render the pagination page list, we have used the antd “Pagination” component with the required props. defaultCurrent is used to indicate the default page, handlePageClick is the handler to set elements for each page(defined below), size of the pagination list, the total is the count of elements, showTotal is the string indicating the range of elements in the current page. pageSize is the number of elements on each page. The page list component appears if and only if we have to render more than one page as coded in the above logic.

handlePageClick is the handler function that calculates the offset of the current page and calls the callback function setElementsForCurrentPage to set elements for the current changed page.

Now just, return the state variable currentPageElements to show the elements in any way you want, with pagination.

I usually use the “Card” component of the antd library. You can use the bootstrap card or any card type layout for your design.

For eg:

showCatalogicData = () => {
    return this.state.currentPageElements.map(data => {
        return (
            <Card
              key={data.id}
              className="card-item" 
              style={{ width: 300 }}
            >
               <Meta title={data.Title}/>
             </Card>
          )
       });
}

Result of pagination list rendering with the page size of 4.

That’s how we can implement pagination on a React-App. You can check out this repository for complete code. Do star the repository for any future updates.

akrsh24/Pagination-Ant-design-Medium

Check out these links for understanding the Ant design CSS framework.

Ant Design - The world's second most popular React UI framework

Pagination - Ant Design

Do give a clap if you like this article.