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>
)
});
}
Resultant page list
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.

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

Do give a clap if you like this article.

--

--

--

Front-end Engineer, working on ReactJS, Redux and Javascript.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript vs. Java: Arrays

Enhancing the Developer Experience of your npm modules with Type Declarations

Does JavaScript Guarantee Object Property Order?

How to set up responsive UI search in Vue.js

Simple Naming Tips for Event Handlers

Top React Libraries — Forms, Sliders, and Animations

Guide to the Express Request Object — Methods

Canvas in the React Component

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akarsh Srivastava

Akarsh Srivastava

Front-end Engineer, working on ReactJS, Redux and Javascript.

More from Medium

useState in React Js

How to use React Router Dom v6

React JS

Add Husky + Lint-staged to React (with Typescript)