Spring WebFlux+Thymeleaf How to display reactive collection size - spring-webflux

Question

I am developing a spring boot service to manage a REST server.
The service displays a reactive list on one of the forms.
It is very simple code.
Table in thymeleaf template
<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Alive</td>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td th:text="${item.counterpartID}" />
<td th:text="${item.counterpartName}" />
<td th:text="${item.alive}"/>
</tr>
</tbody>
</table>
Controller
#GetMapping("/counterparties")
public String init(Model model) {
IReactiveDataDriverContextVariable reactiveDataDrivenMode =
new ReactiveDataDriverContextVariable(
webClient
.get()
.uri(uriBuilder -> uriBuilder
.path("/findAllCounterpart")
.build())
.retrieve()
.bodyToFlux(Counterpart.class)
, 1);
model.addAttribute("items", reactiveDataDrivenMode);
return "counterparties.html";
}
Now I want to display collection size (numbers of rows in table).
I added to the html temlate tag
<label th:text="'total rows: ' + ${#lists.size(items)}">rows number in table</label>
And I got an unexpected result
total rows: 1
How to display the real number of rows in a reactive collection ?
Thanks.

Answer 1

I decided to use javascript.
<script language="JavaScript">
function countLoadedRows() {
var table = document.getElementById('tableId');
var tbodyRowCount = table.tBodies[0].rows.length;
console.log('total rows: ' + tbodyRowCount);
document.getElementById('totalRowsId').textContent = tbodyRowCount
}
document.addEventListener('readystatechange', countLoadedRows)
</script>
and html tags is
<input type = "button" onclick = "countLoadedRows()" value = "Total rows: "><label id="totalRowsId">???</label>
<table id="tableId">
...
</table>