React Table Server Side Pagination with Sorting and Search Filters

After following [a post](https://dev.to/elangobharathi/server-side-pagination-using-react-table-v7-and-react-query-v3-3lck) on dev.to I was able to setup a basic table with React Table Server Side Pagination. However since the post did not have the sorting and search features I had to extend it and hence this one!

– You may find full code here at my github repo

Here is what my final table with React Table Server Side Pagination looks like:

Let’s start with some initial imports. My example uses react-query so make sure you have it installed. It is a great library anyway. I also use axios library for making ajax calls.

Next I import user columns which I place in another file named columns.jsx

And here are the contents of columns.jsx file:

Next imports are:

Let me explain it a bit. First three imports are icons used for sorting. Next to it is ReactTablePagination component I have created for pagination links and last one UsersFilter is the search area where I place search box with a submit link. I may also want to add more filters later on.

I will post ReactTablePagination and UsersFilter code down the page. Let’s first work with our current UsersIndex.jsx file and its main component DataTable but before that let me post some declarations I have made outside of DataTable component.

Okay, once all the imports are done at the top of this page. Let start with structure of rest of this file.

Since I am using react-query, and you should also consider using it if your app is doing ajax requests for data extensively, I will wrap my DataTable component within QueryClientProvider which is exported from react-query library if you noticed it at the top of the page.

So after imports I initialise the queryClient

… and wrap my DataTable with QueryClientProvider by passing client to it and export it at the end of the page. You may also consider to wrap you main <App> within this client, I have just added it in my this one page only.

This is the overall structure of UsersIndex.jsx file

Lets dive into the ...other file code first. This is the code which is before the main DataTable component.

New thing to notice in the code above is the use of reducer. If you are not sure how reducers work you should check [this post](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) or a simplified [post here](https://www.robinwieruch.de/javascript-reducer/)

Also there is _fetchUsersData_ function which is responsible for fetching user data and most of it is self-explaining.

React Table Server Side Pagination Component

And finally here is the React Table Server Side Pagination DataTable component

And there is one helper component which is outside of DataTable component. I just placed it at the bottom, just before the TableWrapper.

It is not possible to explain every line and I hope the code makes sense to you. There is one thing I want to mention though. Notice the last three settings in the block:

I had to set them in order to get rid of “Maximum update depth exceeded” error after I turned manualPagination on and implemented server side pagination with sorting and search in my reactjs application. ([See ref here](https://github.com/tannerlinsley/react-table/issues/2369))

– Full code here at my github repo.

Leave a Reply