<input type="text" id="searchInput" 
       class="form-control mb-3 tableSearch" placeholder="Search for a corridor ...">
<table id="myTable" class="table align-items-center table-flush">
    <thead class="thead-light">
    <tr>
        <th class="border-bottom" scope="col">Corridor #</th>
        <th class="border-bottom" scope="col">Corridor ID</th>
        <th class="border-bottom" scope="col">Rank</th>
    </tr>
    </thead>
    <tbody>
    {% for corridor in corridors %}
    <tr id="corr-{{corridor.id}}" style="cursor: pointer;" 
        onClick="handleCorridorSelection(this.id)">
      <td><code>{{ corridor.id }}</code></td>
      <td><code>{{ corridor.name_new }}</code></td>
  
      <td class="fw-bolder text-gray-800">
        {{ corridor.corridor_rank }}
      </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
<nav>
<ul class="pagination" id="pagination"></ul>
</nav>
