How to: React Table with Pagination

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in this series.

In this tutorial, I want to show you how to use React Table Library with its usePagination plugin to implement pagination. In the previous example, you installed React Table Library to create a table component. Now, you will enable your users to paginate pages in a table.

First, import the usePagination hook:

import { usePagination } from '@table-library/react-table-library/pagination';

Second, initialize it with the table's data, plus an initial page number and page size, and pass it as a plugin prop to the Table component:

const App = () => {
const data = { nodes: list };
const pagination = usePagination(data, {
state: {
page: 0,
size: 2,
},
});
return (
<Table data={data} pagination={pagination}>
...
</Table>
);
};

And third, create your Pagination component (or inline HTML elements as in this example) and interact with the pagination feature programmatically by reading from its pagination state and writing to its pagination state with its functions:

const App = () => {
const data = { nodes: list };
const pagination = usePagination(data, {
state: {
page: 0,
size: 2,
},
});
return (
<>
<Table data={data} pagination={pagination}>
...
</Table>
<div
style={{ display: 'flex', justifyContent: 'space-between' }}
>
<span>
Total Pages: {pagination.state.getTotalPages(data.nodes)}
</span>
<span>
Page:{' '}
{pagination.state.getPages(data.nodes).map((_, index) => (
<button
key={index}
type="button"
style={{
fontWeight:
pagination.state.page === index
? 'bold'
: 'normal',
}}
onClick={() => pagination.fns.onSetPage(index)}
>
{index + 1}
</button>
))}
</span>
</div>
</>
);
};

That's it. With just a few lines, you have pagination working in the table. Let's now create a notifier to get pages from the table. Let's see how this works with the usePagination hook:

const App = () => {
const data = { nodes: list };
const pagination = usePagination(data, {
state: {
page: 0,
size: 2,
},
onChange: onPaginationChange,
});
function onPaginationChange(action, state) {
console.log(action, state);
}
...
};

The onChange gives you access to the action which triggered the pagination change and to the current pagination state of your table (in this example, its page number and page size). With access to this information, you can trigger further table or non-table events (e.g. a side effect such as server-side pagination) based on it.

In addition, it is worth noting that the pagination object that you passed to the table is packed with the pagination state -- which gives you the ability to access it at any time -- and to all the functions to paginate the table programmatically.

You have only seen one possible version of pagination for the table. As you have full access to the pagination state and its functions, you can create your own version of it as well. Find more pagination examples in the documentation.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with its useRowSelect plugin to implement a select feature. In the previous example, you installed React Table Library to create…

In this tutorial, I want to show you how to use React Table Library with its useTheme plugin to theme your table with a custom style. In the previous example, you installed React Table Library to…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.