Tabs bootstrap with Thymeleaf

Question

I receive from controller:

public Mono<String> getShops(){

.....
  model.addAttribute("shops", shops);
  
return Mono.just("shoppage");

}

in my shoppage.html I have tab with table:

  <ul class="nav nav-tabs">
   <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#active-tab"
                       aria-current="page">ACTIVE</a>
                </li>
   <li class="nav-item">
     <a class="nav-link" data-bs-toggle="tab" data-bs-target="#unactive-tab"
                       aria-current="page">NON_ACTIVE</a>
                </li>
            </ul>

    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade active show" id="active-tab">
       <div>
         <table class="table table-hover">
           <thead>
           <tr>
           <th scope="col">Id</th>
           </tr>
            </thead>
            <tbody>
            <tr th:each="shop : ${shops}" th:if="${shop.status} == 'ACTIVE'">
           <th class="clickable-row" th:id="${shop.id}" th:text="${shop.id}" scope="row">d</th>
           </tr>
            </tbody>
            </table>
            </div>
           </div>

                <div class="tab-pane fade" id="unactive-tab">
           <div>
         <table class="table table-hover">
           <thead>
           <tr>
           <th scope="col">Id</th>
           </tr>
            </thead>
            <tbody>
            <tr th:each="shop : ${shops}" th:if="${shop.status} == 'NON_ACTIVE'">
           <th class="clickable-row" th:id="${shop.id}" th:text="${shop.id}" scope="row">d</th>
           </tr>
            </tbody>
            </table>
            </div>

I need the elements when the shop's status (shop.status == ACTIVE) is active, reflected in the first tab, when not active (shop.status == NON_ACTIVE), then in the second. But the table in the second tab is always empty, regardless of the data.

----------------------------- solved

the problem was that I was using

IReactiveDataDriverContextVariable shops = new ReactiveDataDriverContextVariable(shopService. getShopByUserId(userPrincipal.getId()), 1, 1); 

in my controller.

Answer 1

try this but i think the problem in the data received from controller can you check if the NON_ACTIVE is received correctly

    <table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">Id</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="shop : ${shops}" th:if="${#strings.equals(shop.status, 'ACTIVE')}">
            <td class="clickable-row" th:id="${shop.id}" th:text="${shop.id}" scope="row">d</td>
        </tr>
    </tbody>
</table>

<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">Id</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="shop : ${shops}" th:if="${#strings.equals(shop.status, 
    'NON_ACTIVE')}">
            <td class="clickable-row" th:id="${shop.id}" th:text="${shop.id}" 
    scope="row">d</td>
        </tr>
    </tbody>
</table>