In the previous article we have enabled paging and sorting in our Spring Boot backend and extended our React UI to make use of these features. So the obvious next feature is searching. Extending the backend In contrast to paging and sorting which was already automatically supported by Spring Data REST we need to do a bit of legwork in order to add the support for search. We will be using QueryDsl which has a very nice integration with Spring Data REST.

In the previous two articles part 2, part 3 we have built a Spring Boot application with a React and Svelte frontend that allowed us to list and edit clubs stored in a database. Previously, we focused on validation and the frontend applications. In this article, I want to focus more on sorting and paging in the React version of the client app. For Svelte, most of the changes should be equivalent.

In the previous installment of this series we created a spring boot based backend for managing Club entities. Here, we will create a React based frontend that allows us to edit individual Clubs. Creating the client We will scaffold an empty project with vite: 1 pnpm create vite In the options choose React TypeScript Then we add the necessary dependencies 1 2 3 pnpm add primereact primeicons pnpm add react-hook-form @hookform/resolvers zod react-query @tanstack/react-router@beta pnpm add -D sass Now we can already start the dev server and see our generated application: