How to Implement Pagination in React Table

Are you looking to implement pagination in your React table? Pagination is a key feature that enhances performance and improves user experience. This article outlines a simple method to achieve pagination in React tables.

Understanding the Need for Pagination

Why is pagination important? Large datasets can slow down rendering and clutter the user interface when displayed all at once. Pagination helps break down data into smaller, more manageable parts, making it easier for users to navigate and find information.

Setting Up Your React Table

To begin implementing pagination in your React table, set up your table component using libraries like react-table or Material-UI. These libraries provide built-in support for pagination.

Here’s a basic example of setting up a simple table using react-table:

1import React, { useMemo } from 'react';
2import { useTable, usePagination } from 'react-table';
3
4const Table = ({ data, columns }) => {
5  const tableInstance = useTable(
6    { columns, data, initialState: { pageIndex: 0, pageSize: 10 } },
7    usePagination
8  );
9
10  const {
11    getTableProps,
12    getTableBodyProps,
13    headerGroups,
14    prepareRow,
15    page,
16  } = tableInstance;
17
18  return (
19    <table {...getTableProps()}>
20      <thead>
21        {headerGroups.map(headerGroup => (
22          <tr {...headerGroup.getHeaderGroupProps()}>
23            {headerGroup.headers.map(column => (
24              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
25            ))}
26          </tr>
27        ))}
28      </thead>
29      <tbody {...getTableBodyProps()}>
30        {page.map(row => {
31          prepareRow(row);
32          return (
33            <tr {...row.getRowProps()}>
34              {row.cells.map(cell => (
35                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
36              ))}
37            </tr>
38          );
39        })}
40      </tbody>
41    </table>
42  );
43};

In this code snippet, we create a Table component that takes data and columns props. The useTable and usePagination hooks from react-table handle the table logic, including pagination.

Implementing Pagination Controls

After setting up the table, you need to add pagination controls. These typically include buttons for navigating between pages and options to jump to a specific page.

Here’s an example of adding pagination controls to the Table component:

1import { JustPrevious, JustNext } from 'react-icons/fa';
2
3const Pagination = ({ tableInstance }) => {
4  const {
5    canPreviousPage,
6    canNextPage,
7    nextPage,
8    previousPage,
9    pageOptions,
10    state: { pageIndex },
11  } = tableInstance;
12
13  return (
14    <div>
15      <button onClick={() => previousPage()} disabled={!canPreviousPage}>
16        <JustPrevious />
17      </button>
18      <span>
19        Page{' '}
20        <strong>
21          {pageIndex + 1} of {pageOptions.length}
22        </strong>{' '}
23      </span>
24      <button onClick={() => nextPage()} disabled={!canNextPage}>
25        <JustNext />
26      </button>
27    </div>
28  );
29};

In this snippet, the Pagination component uses the pagination state from the tableInstance object. It renders buttons for navigating to the previous and next pages, along with the current page number and total page count.

Customizing Pagination Styles

You can enhance the appearance of your pagination controls using CSS or a styling library. Adjust the size, colors, and spacing of the pagination elements to align with your overall design.

Here’s an example of styling the pagination controls with CSS:

1.Pagination {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5}
6
7.Pagination button {
8  background: #007bff;
9  color: #fff;
10  border: none;
11  padding: 5px 10px;
12  margin: 0 5px;
13  cursor: pointer;
14}
15
16.Pagination button:disabled {
17  opacity: 0.5;
18  cursor: not-allowed;
19}

This CSS snippet defines styles for the pagination container and buttons to create a modern look. You can further customize these styles to fit your project's branding.

Enhancing Pagination Functionality

To improve pagination controls, you can add features such as changing the number of items per page or providing quick navigation to a specific page.

Here’s an example of adding a page size selector to the Table component:

1const PageSizeSelector = ({ tableInstance }) => {
2  const { state: { pageSize }, setPageSize } = tableInstance;
3
4  const handlePageSizeChange = e => {
5    setPageSize(Number(e.target.value));
6  };
7
8  return (
9    <select value={pageSize} onChange={handlePageSizeChange}>
10      <option value={5}>5</option>
11      <option value={10}>10</option>
12      <option value={20}>20</option>
13    </select>
14  );
15};

Including the PageSizeSelector component allows users to choose how many items they want to see per page, enhancing their browsing experience.

This article provides a clear approach for implementing pagination in React tables using the react-table library. Following these steps and customizing the pagination controls will create an efficient data browsing experience for your users.