How to Implement Pagination in React

How to implement pagination in ReactJS

We start by installing a React application using Next and also install a package called react-paginate. This is a custom component that handles pagination of data with simple implementations.

To install Next, we use the command npx create-next-app@latest. For react-paginate, we use npm install react-paginate. React paginate is an easy-to-use library that provides a component with some properties to create pagination and configure it properly.

Creating pagination

We will create a table of 10 rows per page by consuming an API using useSWR, which is a package provided by the Next framework and is useful for connecting to APIs. The package is exceptional as it helps to track error, loading and data states.

To get the data for the pagination with useSWR, we pass in our API and our method.

const fetcher = (...args) => fetch(args).then(res => res.json())
const { data, error, isLoading } = 
useSWR('https://6270020422c706a0ae70b72c.mockapi.io/lendsqr/api/v1/users', fetcher)

Using destructuring, we are able to track the data, error, and loading state. This data provides an array of 100 specific items which we will convert to a table of 10 rows using the installed react-paginate.

To use this library, we will import react-paginate and write some methods that will be passed to the props.

React-paginate accepts some props, including:

• breakLabel: A prop for ellipsis, which helps to manage the number of pages shown.
• nextLabel: A prop for getting the next page. Any string can be displayed here.
• previousLabel: A prop for getting the previous page. Any string can be displayed here too.
• onPageChange: A prop that accepts a method that tracks the page change.
• pageCount: A prop that gets the number of pages to be displayed for pagination.

import useSWR from 'swr'
import ReactPaginate from 'react-paginate'
export default function Dashboard() {
const fetcher = (...args: any) => fetch(args).then(res => res.json())
const { data, error, isLoading } =
useSWR('https://6270020422c706a0ae70b72c.mockapi.io/lendsqr/api/v1/users', fetcher)
const [itemOffset, setItemOffset] = useState(0)
const itemsPerPage = 10;
const endOffset = itemOffset + itemsPerPage;
const currentItems =  data.slice(itemOffset, endOffset);
const pageCount = Math.ceil(data.length / itemsPerPage);
const handlePage = (evt) => {
    const newOffset = (evt.selected * itemsPerPage) % data.length;
    setItemOffset(newOffset)
}</pre><p>To implement pagination, we will track the number of items displayed with the itemOffset, starting with 0, which is continually incremented with the number of items already displayed.</p><p>The itemsPerPage is the number of items we want displayed at once. It can be set to any number. We set it to 10 in this React pagination example.</p><p>The endOffset is a summation of itemOffset and itemsPerPage.</p><p>The currentItems is the actual array that we display at one time which is possible by using the slice method of an array. It accepts two parameters, including the itemOffset, which is where we want to start the array from, and the endOffset, which is where we want the array to stop at a certain time.</p><p>To get the &#39;pageCount&#39;, we divide the data.length by the number of itemsPerPage that we pass to math.ceil to get an integer value.</p><p>The &#39;handlePage&#39; method is called to the &#39;onPageChange&#39; change event which sets a new offset to the &#39;itemOffset&#39; by multiplying the selected digit with the &#39;itemsPerPage&#39;. This is divided by the total number of items in our array with &#39;data.length&#39;.</p><pre>return (
    &lt;section&gt;
        &lt;div className={styles.wrapper}&gt;
            &lt;table className={styles.table}&gt;
                &lt;thead  className={styles.thead}&gt;
                    &lt;tr className={styles.thead}&gt;
                        &lt;th className={styles.td}&gt;&lt;span&gt;ORGANIZATION&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/th&gt;
                        &lt;th className={styles.td}&gt;&lt;span&gt;USERNAME&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/th&gt;
                        &lt;th className={styles.td}&gt;&lt;span&gt;EMAIL&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/th&gt;
                        &lt;th className={styles.td}&gt;&lt;span&gt;PHONE NUMBER&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/th&gt;
                        &lt;th className={styles.td}&gt;&lt;span&gt;DATE JOINED&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                 &lt;tbody className={styles.tbody}&gt;
                    {currentItems.map((val: any, i: any) =&gt; {
                        return &lt;tr className={styles.tr} key={i}&gt;
                            &lt;td className={styles.td}&gt;{val.orgName}&lt;/td&gt;
                            &lt;td className={styles.td}&gt;{val.userName}&lt;/td&gt;
                            &lt;td className={styles.td}&gt;{val.email}&lt;/td&gt;
                            &lt;td className={styles.td}&gt;{val.phoneNumber}&lt;/td&gt;
                            &lt;td className={styles.td}&gt;{val.createdAt}&lt;/td&gt;
                        &lt;/tr&gt;
                    })}
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;ReactPaginate
            activeClassName={styles.activeLink}
            containerClassName={styles.pager}
            pageCount={pageCount}
            onPageChange={handlePage}
            pageRangeDisplayed={5}
            previousLabel=&#39;Prev &#39;
            breakLabel=&#39;...&#39;
            pageClassName={styles.page}
            previousClassName={styles.prev}
            nextClassName={styles.prev}
            nextLabel=&#39;Next&#39;
            disabledLinkClassName={styles.linkdisabled}
            disabledClassName={styles.disabled}
        /&gt;
        &lt;/div&gt;
    &lt;/section&gt;
)</pre><p>To get each table, we map through the currentItems we got from slicing through the actual array which is updated through the pagination buttons.</p><p>React-paginate provides a component to which we pass in all our props discussed earlier. By default, &#39;react-paginate&#39; does not style the pagination. We can do it by assigning specific classnames.</p><ul><li>activeClassName: A prop for the page we are currently on.</li><li>containerClassName: A prop for the container component, which is reactPaginate.</li><li>pageClassName: A prop for each list item in the component.</li><li>previousClassName: A class name for the previous buttons.</li><li>nextClassName: A class name for the next buttons.</li><li>disabledLinkClassName: A class name for the anchor tag in the lists.</li><li>disabledClassName: A class name for the list tags.</li></ul><p>To style the table, we add borders, border radius, and background color. The table head text is bold by default, which is styled by using semantic tags:</p><pre>.table {

border: 1px solid gray;
text-align: center;
border-radius: 5px;
margin-top: 40px;
}
.td{
padding: 10px;
}

To space each element in each cell, we add a padding of 10px that adds 10px on every side.

To add a background color to every even cell, we use a CSS pseudo element that allows us to target every even cell which then adds the specified background color.

.tr:nth-child(even){
background-color: rgba(167, 163, 163, 0.366);
}

This is a CSS function for targeting different parts of elements by using simple mathematics. The 'nth-child()' accepts different parameters including odd and even numbers.

To style the pagination, 'react-paginate' library already provides us with classnames that can be used to style paginations to our satisfaction.

Using the props provided, we pass a classname that helps to style the pagination when interacted with:

.activeLink {
border: none;
color: white;
cursor: pointer;
background-color: rgba(136, 164, 226, 0.797);
outline: none;
}

.containerClassName{
display: flex;
justify-content: space-between;
align-items: center;
width: 50vw;
font-weight: bold;
}
.pageClassName {
border: 1px solid gray;
border-radius: 50%;
padding: 10px;
}
.previousClassName {
font-weight: bold;
padding: 6px;
color: white;
border-radius: 5px;
background-color: rgba(136, 164, 226, 0.797);
}
.disabledClassName {
opacity: 0.6;
}

Conclusion

React pagination is an essential part of creating a good user experience by not dumping too much information. It improves load time, which can reduce bounce rate, and facilitates a tidy user interaction.

Implementing react-paginate is extremely easy, thanks to its simple syntax. The pagination is created by using the slice method on the array of information and passing a method to the pageChange event which is responsible for updating the pagination. Pagination is further made easier by allowing the use of style props to allow it to carry the desired shape.