Creating search filters with react and spring boot

Introduction

The goal of this article is to use one of the most used tecnologies in web development to implement search filters in a way that makes it easier to create new ones and display results.

This tutorial will be divided in two parts, first we will use spring boot to retrieve results from the database, and second we will use react to display that results.

Retrieving results

The initial projects and all it’s dependencies can be found in: https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.2.6.RELEASE&packaging=jar&jvmVersion=11&groupId=com.example&artifactId=demo&name=demo&description=Search%20filter%20example%20application&packageName=com.example.demo&dependencies=lombok,data-rest,web,jersey.

We will use a single table called employees, that have 4 columns: age, name, hire date and gender, and all these columns will be used in the search.

First we will create create the model for employees with those 4 columns:

As shown in the code snippet, the class represents the database entity employees, now we need a way to populate these instance with a database model, and we well use CRUD repository for that.

The spring-data package provides CRUD Repositories that already have Create, Read, Update and Delete operations, so we don’t need to create these operations ourselves, and we can go to the next step, create the service that is responsible for filtering the results of the read operation according to one or more of the 4 columns.

Now the last part is to create the controller that will receive the HTTP request:

This controller receives the 4 columns of the table and returns the instances that have those values.

Displaying results

To display the results we will use material-ui lib, and for that we have to download it using npm i @material-ui/core.

First we will create the generic form responsible for making the search:

Now we will create the controller responsible for controlling the pagination of our results:

After creating the controller we will create the table responsible for displaying the results:

Now that we have the exhibitor and the form we will join both to create the search filter:

And in our App.js we will create the search filter with the fields for our search