React Table Pagination (Server side) with Search | react-table v7
Tags: react, javascript, webdev, todayilearned
Published: 2021-04-04 04:11:35

In this tutorial, I will show you how to make React Table Pagination (Server side) with Search in a React Hooks Application using react-table v7 for data table and Material-UI for pagination.

Full Article: [https://bezkoder.com/react-table-pagination-server-side/](https://bezkoder.com/react-table-pagination-server-side/)

<h2>React Table Pagination (Server side) with Search example</h2>
One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have tutorials table in database like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vphpdxd3l2kore8wvv5o.png)

Our React.js app will display the result with react-table pagination (server side):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qv3s5wxzdzhcmqt3a4a.png)

Change to a page with larger index:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln8jlpgwoygv1meqi49v.png)

We can change quantity of items per page (page size):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgyke4i58qm8ypukhw0r.png)

Or table pagination with search:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmumh0elyvmd9b4sykut.png)

The API for this React client can be found at one of following posts:
- <a href="https://bezkoder.com/node-js-sequelize-pagination-mysql/">Node.js Express Pagination with MySQL</a>
- <a href="https://bezkoder.com/node-js-pagination-postgresql/">Node.js Express Pagination with PostgreSQL</a>
- <a href="https://bezkoder.com/node-js-mongodb-pagination/">Node.js Express Pagination with MongoDB</a>
- <a href="https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/">Spring Boot Pagination & Filter example | Spring JPA, Pageable</a>
- <a href="https://bezkoder.com/spring-boot-mongodb-pagination/">Spring Boot MongoDB Pagination example with Spring Data</a>

These Servers will exports API for pagination (with/without filter), here are some url samples:
<ul>
	<li><code>/api/tutorials?page=1&size=5</code></li>
	<li><code>/api/tutorials?size=5</code>: using default value for page</li>
	<li><code>/api/tutorials?page=1</code>: using default value for size</li>
	<li><code>/api/tutorials?title=data&page=1&size=3</code>: pagination & filter by title containing 'data'</li>
</ul>

This is structure of the response for the HTTP GET request:
```json
{
    "totalItems": 8,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}
```

We actually only need to use <code>tutorials</code> and <code>totalPages</code> when working with Material-UI.

For step by step and Github source code, please visit:
[https://bezkoder.com/react-table-pagination-server-side/](https://bezkoder.com/react-table-pagination-server-side/)

# Further Reading
Related Posts:
- <a href="https://bezkoder.com/react-table-example-hooks-crud/">React Table example: CRUD App | react-table 7</a>
- <a href="https://bezkoder.com/react-hooks-jwt-auth/">React Hooks: JWT Authentication (without Redux) example</a>
- <a href="https://bezkoder.com/react-hooks-redux-login-registration-example/">React Hooks + Redux: JWT Authentication example</a>
- <a href="https://bezkoder.com/react-hooks-file-upload/">React Hooks File Upload example with Axios & Progress Bar</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-hooks-crud/">React Hooks + Firebase Realtime Database: CRUD App</a>
- <a href="https://bezkoder.com/react-hooks-firestore/">React Hooks + Firestore example: CRUD app</a>