How can I create dynamic table in Thymeleaf..? - spring-boot

Question

I am new to Thymeleaf and trying to create a dynamic table on Themeleaf template.
How can I do it..??
I have been googling by I didn't got any proper answer. The issue is I cannot iterate List< Map< String,Object >>. I can have any number of columns and columns name could be any thing.
<tr class="headings">
<th class="column-title">ID</th>
<th class="column-title">Name</th>
<th class="column-title">Salary</th>
<th class="column-title">Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row:${rows}" id = "tablerow">
<td class=" " th:text="${row.getId()}">Id</td>
<td class=" " th:text="${row.getName()}">Name</td>
<td class=" " th:utext="${row.getSalary()}">Salary</td>
<td class=" " th:text="${row.getStatus()}">Active</td>
</tr>
</tbody>
I need to set values dynamically since if query of result will keep changing . right now column name are hard coded and value are also getting by row.getId what if there is no Id, it could be anything in rows what shall I use than..? example row.<>.
rows is obtained as List< Map< String, Object>>.
Thanks in advance.

Answer 1

You can iterative over a Map just as easily as you can a List. The simplest form of this would be:
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="field: ${row}" th:text="${field.value}" />
</tr>
</tbody>
However, since Maps don't have a specific ordering (unless you're using something like a TreeMap), the way I would do it would be something like this (complete example should match your example table):
Controller
List<String> headers = Arrays.asList("ID", "Name", "Salary", "Status");
List<Map<String, Object>> rows = new ArrayList<>();
rows.add(Map.of("ID", "1", "Name", "Jim", "Salary", "50000", "Status", "active"));
rows.add(Map.of("ID", "2", "Name", "Sally", "Salary", "50000", "Status", "inactive"));
Template
<table>
<thead>
<tr class="headings">
<th th:each="header: ${headers}" class="column-title" th:text="${header}" />
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="header: ${headers}" th:text="${row.get(header)}" />
</tr>
</tbody>
</table>
Which will produce:
<table>
<thead>
<tr class="headings">
<th class="column-title" >ID</th>
<th class="column-title" >Name</th>
<th class="column-title" >Salary</th>
<th class="column-title" >Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" id="tablerow">
<td >1</td>
<td >Jim</td>
<td >50000</td>
<td >active</td>
</tr>
<tr class="even pointer" id="tablerow">
<td >2</td>
<td >Sally</td>
<td >50000</td>
<td >inactive</td>
</tr>
</tbody>
</table>