Efficient Server-Side Pagination with Advanced Searching and Sorting Techniques in React

In modern web development, implementing server-side pagination, search, and sorting in a React application requires careful consideration of various factors such as performance, user experience, and code maintainability.

In this comprehensive tutorial, we’ll seamlessly implement server-side pagination, search, and sorting functionalities to efficiently manage large datasets with the help of TanStack’s react-table for managing table data, utilizing react-query for fetching data from the server, and integrating react-router for seamless navigation between different views of our application.

Setup

Let’s kick off by creating a new React app with TypeScript, leveraging Vite for rapid development. As for the backend, we’ll swiftly mock the data using json-server. All the essential dependencies required for this project can be found in the package.json file.

package.json

Let’s create a small utility function that merges tailwind-merge with clsx for combining class names. Additionally, we’ll implement a debounce function for optimal performance.

utils.ts

Lets’ create custom hooks useful for our projects.

use-table.ts

use-pagination.ts

Let’s begin by creating essential components to enhance our projects.

data-table.tsx

useEffect hook code ensures that the URL search parameters are updated based on the sorting state, allowing the component to maintain the sorting state in the URL.

pagination.tsx

The useSearchParams hook is used to read and modify the query string in the URL for the current location and The URLSearchParams interface defines utility methods to work with the query string of a URL.

search-input.tsx

Here, we implement the debounce utility function to throttle user input, ensuring smoother interaction. Additionally, we leverage the Form components provided by react-router, which are built on top of HTML forms, to manage form state and submission seamlessly.

Let’s implement a skeleton UI to provide a more visually appealing loading feedback to users.

skeleton.tsx

Now, let’s bridge the gap between the frontend and our mock JSON server backend using TanStack’s react-query.

user-api-slice.ts

This query function utilizes Axios for fetching data from the server. It retrieves a list of users based on the provided parameters such as page number, search query, sorting criteria, and order. The function constructs the appropriate URL for fetching data from the mock JSON server based on the provided parameters.

user-api.ts

A custom hook named useGetAllUsers that utilizes TanStack’s useQuery hook for data fetching. The query parameters directly to the query key ensures that any changes to those parameters will automatically trigger a refetch of the data.

use-column.tsx

Let’s build the custom hook provides a reusable and efficient way to define columns for displaying user data in a table component. It abstracts away the column configuration logic from the Tanstack table, making it easier to maintain and reuse across different parts of the application.

Let’s now render our table component with all its functionalities.

users-page.tsx

Now, you can navigate to this and play with the table.

However, there’s a slight challenge with determining the total count for pagination.😅 Typically, we would retrieve this information from the server’s response. However, since we’re using JSON Server, it doesn’t provide the total count based on applied conditions. Nevertheless, you can still use the total count provided by the server, which should suffice for seamless pagination functionality.

In summary, we’ve explored implementing server-side pagination, search, and sorting in React using react-table, react-query, and react-router.Despite challenges like retrieving total counts from a mock server, we've provided workarounds. With this knowledge, you're ready to create high-performance React applications with seamless user experiences.

For complete code, Please visit to the repository.

Thank you for reading🤞