Controllerから受け取ったListを、同じ日付のデータでグループ化して表示したい

前提・実現したいこと

SpringBootでWEBアプリ、HTML、CSSの勉強をしています。
teratrailから質問をするのは初めてで不慣れなため、ご指摘いただけたら修正・追記します。

下の表のようなListをhtmlがControllerから受け取って、同じ日付のデータでグループ化して、
イメージAのような形で表示したいです。

コードでご回答をいただけるのが理想ですが、考え方のヒントなどをご回答いただけるだけでも幸いです。

↓List

date	name
2021-01-01	AAA
2021-01-01	BBB
2021-01-01	CCC
2021-01-02	DDD
2021-01-02	EEE
2021-01-03	FFF
2021-01-03	GGG
2021-01-03	HHH

↓イメージA

発生している問題

どのようにhtmlを記述してよいか、恥ずかしながら見当がつきません。

試したこと

th:eachでループさせて、イメージBのような単純な表形式で表示することはできました。
しかしながら、同じ日付が並ぶと冗長な印象のため、イメージＡのような形にしたいです。

html
1<div class="box" th:each="item : ${items}">
2  <div class="box-left">[[${item.date}]]</div>
3  <div class="box-right">[[${item.name}]]</div>
4</div>

css
1.box {
2  display:flex;
3}
4.box-left {
5  border:solid 1px #000000;
6}
7.box-right {
8  border:solid 1px #000000;
9}

↓イメージB(Excelで作成した画像のため装飾はCSSとは一致していません）

環境

開発環境：Eclipse 2020-12
フレームワーク：Spring Boot 2.4.0
データベース：MySQL 5.7.33
Java：11
テンプレートエンジン：Thymeleaf

行動規範の内容に同意します

回答1件

ベストアンサー

Thymeleaf側でグループ化するのはキツイので、その手前でグループ化した方が良いと思います。例えば、コントローラの中でグループ化してからThymeleafへ渡すとか。あるいは、DBから取り出す時点でグループ化してしまう、といった方法があります。

コントローラの中でグループ化する場合、
仮にモデルクラスがItemで、dateフィールドがLocalDate型だとすると、

java
1List<Item> items = ... // DBからItemを検索(date, nameでソート)
2Map<LocalDate, List<Item>> groups = items.stream()
3    .collect(Collectors.groupingBy(
4        Item::getDate,
5        LinkedHashMap::new,
6        Collectors.toList()));

こんな感じでグループ化できると思います。んで、このgroupsをThymeleafへ渡します。

Thymeleaf側は、

html
1<div th:each="group: ${groups}">
2
3  <div th:text="${group.key}"></div>
4
5  <div th:each="item: ${group.value}">
6    <div th:text="${item.name}"></div>
7  </div>
8
9</div>