Setting up and Displaying a list of objects in a table - THYMELEAF
Introduction to Thymeleaf -
Thymeleaf is a library that ensures templates can be prototyped without a back-end. This which makes development very fast when compared with other popular template engines.
Thymeleaf in Spring Boot -
In Spring boot, there is an auto-configuration done for thymeleaf. All you need to do is add the lines below in your pom.xml file.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.3.3.RELEASE</version>
</dependency>
Now let's code. So easy -
In Java, let's see how to bind a list of objects to a property in the model returned to the Thymeleaf template engine. Then I show you how to iterate over the list to generate an HTML table.
Our goal is to render a list of products from our Product Model (Product.java).
@Getter
@Setter
public class Product{
private String vendor;
private String name;
private String description;
}
We can create a service class ProductService where we make use of the Product Model.
@Service
public interface ProductService{
List<Product> listAllProducts();
}
In your controller method below where we reference the template, we can pass in a list of these products via listAllProducts() from our service into the object we intend rendering on the template.
@Controller
public class ProductController{
@Autowired
private ProductService productService;
@RequestMapping("/products")
private String listProducts(Model model){
model.addAtrribute("products", productService.listAllProducts());
return "products";
}
}
Then pass this model to the template below.
Finally, just render
In your resources folder, create another folder called templates and add this template file (resources/templates/products.html).
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home page</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<p>
<span th:text="List of products"></span>
</p>
<div th:if="${ not#lists.isEmpty(products)}">
<table>
<tr>
<th>Vendor</th>
<th>Product Name</th>
<th>Description</th>
</tr>
<tr th:each="product : ${products}">
<td th:text="${product.vendor}"></td>
<td th:text="${product.name}"></td>
<td th:text="${product.description}"></td>
</tr>
<table>
</div>
</body>
</html>
Hello
Thank You for this tutorial.
It was really helpful.
I love the fact you didn’t use same variable name like other tutorial because it makes it hard to understand.
I will love if you can publish an article on making a post request to a database using thymeleaf.
Thank you.