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/
React Table Pagination (Server side) with Search example
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:
Our React.js app will display the result with react-table pagination (server side):
Change to a page with larger index:
We can change quantity of items per page (page size):
Or table pagination with search:
The API for this React client can be found at one of following posts:
- Node.js Express Pagination with MySQL
- Node.js Express Pagination with PostgreSQL
- Node.js Express Pagination with MongoDB
- Spring Boot Pagination & Filter example | Spring JPA, Pageable
- Spring Boot MongoDB Pagination example with Spring Data
These Servers will exports API for pagination (with/without filter), here are some url samples:
/api/tutorials?page=1&size=5-
/api/tutorials?size=5: using default value for page -
/api/tutorials?page=1: using default value for size -
/api/tutorials?title=data&page=1&size=3: pagination & filter by title containing 'data'
This is structure of the response for the HTTP GET request:
{
"totalItems": 8,
"tutorials": [...],
"totalPages": 3,
"currentPage": 1
}
We actually only need to use tutorials and totalPages when working with Material-UI.
For step by step and Github source code, please visit:
https://bezkoder.com/react-table-pagination-server-side/
Further Reading
Related Posts:
- React Table example: CRUD App | react-table 7
- React Hooks: JWT Authentication (without Redux) example
- React Hooks + Redux: JWT Authentication example
- React Hooks File Upload example with Axios & Progress Bar
Serverless with Firebase:
Top comments (0)