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.
import React, {useState, useEffect, useMemo} from "react"
import { useTable, usePagination, useSortBy } from "react-table"
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import axios from 'axios'Next I import user columns which I place in another file named `columns.jsx`
import { USERS_COLUMNS } from "./columns"And here are the contents of `columns.jsx` file:
export const USERS_COLUMNS = [
{ Header: "Email", accessor: "email", },
{ Header: "Name", accessor: "name", },
{ Header: "Phone", accessor: "phone", },
{ Header: "Role", accessor: "role", },
{ Header: "Employee Number", accessor: "employee_number" },
]Next imports are:
import SortIcon from 'mdi-react/SortIcon' import SortAscendingIcon from 'mdi-react/SortAscendingIcon' import SortDescendingIcon from 'mdi-react/SortDescendingIcon' import ReactTablePagination from '@/shared/components/table/components/ReactTablePagination' import UsersFilter from "./UsersFilter"
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
const queryClient = new 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
... imports at the top of the file
const queryClient = new QueryClient()
... other file code const DataTable = () => { ... component code } const TableWrapper = () => { return ( <QueryClientProvider client={queryClient}> <DataTable /> </QueryClientProvider> ) } export default TableWrapper;Lets dive into the `…other file code first`. This is the code which is before the main `DataTable` component.
const initialState = {
queryPageIndex: 0,
queryPageSize: 10,
totalCount: 0,
queryPageFilter: "",
queryPageSortBy: [],
};
const PAGE_CHANGED = 'PAGE_CHANGED'
const PAGE_SIZE_CHANGED = 'PAGE_SIZE_CHANGED'
const PAGE_SORT_CHANGED = 'PAGE_SORT_CHANGED'
const PAGE_FILTER_CHANGED = 'PAGE_FILTER_CHANGED'
const TOTAL_COUNT_CHANGED = 'TOTAL_COUNT_CHANGED'
const reducer = (state, { type, payload }) =& gt; {
switch (type) {
case PAGE_CHANGED:
return {
...state,
queryPageIndex: payload,
};
case PAGE_SIZE_CHANGED:
return {
...state,
queryPageSize: payload,
};
case PAGE_SORT_CHANGED:
return {
...state,
queryPageSortBy: payload,
};
case PAGE_FILTER_CHANGED:
return {
...state,
queryPageFilter: payload,
};
case TOTAL_COUNT_CHANGED:
return {
...state,
totalCount: payload,
};
default:
throw new Error(`Unhandled action type: ${type}`)
}
};
const fetchUsersData = async(page, pageSize, pageFilter, pageSortBy) =& gt; {
let paramStr = ''
if (pageFilter.trim().length & gt; 1 ) {
paramStr = `&keyword=${pageFilter}`
}
if (pageSortBy.length & gt; 0 ) {
const sortParams = pageSortBy[0];
const sortyByDir = sortParams.desc ? 'desc' : 'asc'
paramStr = `${paramStr}&sortby=${sortParams.id}&direction=${sortyByDir}`
}
try {
const response = await axios.get(
`/users?page=${page + 1}&limit=${pageSize}${paramStr}`
);
const results = response.data.data;
const data = {
results: results,
count: response.data.total
};
return data;
} catch (e) {
throw new Error(`API error:${e?.message}`)
}
}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
const DataTable = () => {
const [keyword, setKeyword] = useState('');
const [useFilter, setUseFilter] = useState(false);
const onClickFilterCallback = (filter) => {
if (filter.trim() === "") {
alert('Please enter a keyword to search!')
return
}
if (filter === keyword) {
alert('No change in search')
return
}
setUseFilter(true)
setKeyword(filter)
}
let columns = useMemo(() => USERS_COLUMNS, [])
const [{ queryPageIndex, queryPageSize, totalCount, queryPageFilter, queryPageSortBy }, dispatch] =
useReducer(reducer, initialState);
const { isLoading, error, data, isSuccess } = useQuery(
['users', queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy],
() => fetchUsersData(queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy),
{
keepPreviousData: false,
staleTime: Infinity,
}
);
const totalPageCount = Math.ceil(totalCount / queryPageSize)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
page,
pageCount,
pageOptions,
gotoPage,
previousPage,
canPreviousPage,
nextPage,
canNextPage,
setPageSize,
state: { pageIndex, pageSize, sortBy }
} = useTable({
columns,
data: data?.results || [],
initialState: {
pageIndex: queryPageIndex,
pageSize: queryPageSize,
sortBy: queryPageSortBy,
},
manualPagination: true,
pageCount: data ? totalPageCount : null,
autoResetSortBy: false,
autoResetExpanded: false,
autoResetPage: false
},
useSortBy,
usePagination,
);
const manualPageSize = []
useEffect(() => {
dispatch({ type: PAGE_CHANGED, payload: pageIndex });
}, [pageIndex]);
useEffect(() => {
dispatch({ type: PAGE_SIZE_CHANGED, payload: pageSize });
gotoPage(0);
}, [pageSize, gotoPage]);
useEffect(() => {
dispatch({ type: PAGE_SORT_CHANGED, payload: sortBy });
gotoPage(0);
}, [sortBy, gotoPage]);
useEffect(() => {
if (useFilter) {
dispatch({ type: PAGE_FILTER_CHANGED, payload: keyword });
gotoPage(0);
}
}, [keyword, gotoPage, useFilter]);
useEffect(() => {
if (data?.count) {
dispatch({
type: TOTAL_COUNT_CHANGED,
payload: data.count,
});
}
}, [data?.count]);
if (error) {
return < p > Error </p>;
}
if (isLoading) {
return < p >Loading...</p>;
}
if (isSuccess)
return (
<>
<div className='table react-table' >
<form className="form form--horizontal" >
<div className="form__form-group" >
<div className="col-md-9 col-lg-9" >
<UsersFilter onClickFilterCallback={onClickFilterCallback} defaultKeyword={keyword} />
</div>
<div className="col-md-3 col-lg-3 text-right pr-0" >
<Link style={{ maxWidth: '200px' }
}
className="btn btn-primary account__btn account__btn--small"
to="/users/add"
>Add new user
</Link>
</div>
</div>
</form>
{
typeof data?.count === 'undefined' & amp;& amp; < p >No results found </p>
}
{
data?.count & amp;& amp;
<>
<table {...getTableProps()} className="table" >
< thead >
{
headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
{column.isSorted ? <Sorting column={column} /> : ''}
</th>
))
}
</tr>
))
}
</thead>
<tbody className="table table--bordered" {...getTableBodyProps()}>
{
page.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{
row.cells.map(cell => {
return <td {...cell.getCellProps()}>< span > {cell.render('Cell')}</span></td >
})
}
</tr>
)
})
}
</tbody>
</table>
</>
}
</div>
{
(rows.length > 0) & amp;& amp; (
<>
< ReactTablePagination
page={page}
gotoPage={gotoPage}
previousPage={previousPage}
nextPage={nextPage}
canPreviousPage={canPreviousPage}
canNextPage={canNextPage}
pageOptions={pageOptions}
pageSize={pageSize}
pageIndex={pageIndex}
pageCount={pageCount}
setPageSize={setPageSize}
manualPageSize={manualPageSize}
dataLength={totalCount}
/>
<div className="pagination justify-content-end mt-2" >
< span >
Go to page: {' '}
< input
type="number"
value={pageIndex + 1
}
onChange={(e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(page);
}}
style={{ width: '100px' }}
/>
</span>{' '}
< select
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{
[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize} >
Show {pageSize}
</option>
))
}
</select>
</div>
</>
)}
</>
)
}And there is one helper component which is outside of `DataTable` component. I just placed it at the bottom, just before the `TableWrapper`.
const Sorting = ({ column }) => (
<span className="react-table__column-header sortable">
{column.isSortedDesc === undefined ? (
<SortIcon />
) : (
<span>
{column.isSortedDesc
? <SortAscendingIcon />
: <SortDescendingIcon />}
</span>
)}
</span>
);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:
manualPagination: true, pageCount: data ? totalPageCount : null, autoResetSortBy: false, autoResetExpanded: false, autoResetPage: false
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.
