<div class="u-ox-auto">
<figure id="responsive-table-wrapper" class="o-rspnsv-table-wrapper js-responsive-table js-flight-table-operators c-flight-table-operators" data-rows="15">
<table class="c-flight-table-operators__inner o-rspnsv-table ">
<thead>
<tr>
<th>A/D</th>
<th>Nr.volo</th>
<th>A/M</th>
<th>Registr</th>
<th>Prov/Dest</th>
<th>Sch</th>
<th>Status</th>
<th>Date</th>
<th>STA</th>
<th>Dep</th>
<th>ETA</th>
<th>TMO</th>
<th>LND</th>
<th>ATA</th>
<th>STD</th>
<th>ETD</th>
<th>Board</th>
<th>De-icing</th>
<th>SEQ</th>
<th>ATD</th>
<th>H/A</th>
<th>!Stand</th>
<th>!Check</th>
<th>!Gate</th>
<th>!Molo</th>
<th>!Belt</th>
<th>ONST</th>
<th>ARDT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td>1036</td>
<td></td>
<td></td>
<td></td>
<td class="warning">AS</td>
<td>108</td>
<td class="warning">C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</figure>
</div>
<div class="u-text-center u-my-space-24">
<button type="button" class="c-button" id="load-more-rows-btn" data-rows-per-load="5">
Carica altre righe
</button>
</div>
<aside id="responsive-table-offcanvas" class="c-flight-table-operators-offcanvas o-rspnsv-table-offcanvas" aria-hidden="true">
<header class="c-flight-table-operators-offcanvas__header o-rspnsv-table-offcanvas__header">
<p class="c-flight-table-operators-offcanvas__title">Dettagli</p>
<button tabindex="-1" class="c-flight-table-operators-offcanvas__close-btn js-rspnsv-table-offcanvas-close-btn" aria-label="Torna alla tabella">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</header>
<dl id="offcanvas-list">
</dl>
</aside>
{{!-- Table --}}
<div class="u-ox-auto">
<figure id="responsive-table-wrapper" class="o-rspnsv-table-wrapper js-responsive-table js-flight-table-operators c-flight-table-operators" data-rows="15">
<table class="c-flight-table-operators__inner o-rspnsv-table {{modifier}}">
<thead>
<tr>
<th>A/D</th>
<th>Nr.volo</th>
<th>A/M</th>
<th>Registr</th>
<th>Prov/Dest</th>
<th>Sch</th>
<th>Status</th>
<th>Date</th>
<th>STA</th>
<th>Dep</th>
<th>ETA</th>
<th>TMO</th>
<th>LND</th>
<th>ATA</th>
<th>STD</th>
<th>ETD</th>
<th>Board</th>
<th>De-icing</th>
<th>SEQ</th>
<th>ATD</th>
<th>H/A</th>
<th>!Stand</th>
<th>!Check</th>
<th>!Gate</th>
<th>!Molo</th>
<th>!Belt</th>
<th>ONST</th>
<th>ARDT</th>
</tr>
</thead>
<tbody>
{{#repeat 10}}
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">EN 8239</td>
<td class="to-show">E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show is-relevant">TK 1322</td>
<td class="to-show">32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td></td>
<td class="to-show"><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="to-show"><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
{{/repeat}}
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td>1036</td>
<td></td>
<td></td>
<td></td>
<td class="warning">AS</td>
<td>108</td>
<td class="warning">C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
{{#repeat 5}}
<tr>
<td class="to-show">D</td>
<td class="to-show">EN 8239</td>
<td>E95</td>
<td></td>
<td class="to-show">MUC</td>
<td></td>
<td class="to-show">C</td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>0955</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>MH</td>
<td>CL</td>
<td>B2-32 - B2-33</td>
<td></td>
<td>B2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="to-show">D</td>
<td class="to-show">TK 1322</td>
<td>32B</td>
<td>TCJSK <a href="#"><img src="https://placehold.co/16x16" alt=""></a></td>
<td class="to-show">IST</td>
<td>NO Sch</td>
<td class="to-show"></td>
<td><strong>05.10</strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><strong>1055</strong></td>
<td>1115</td>
<td class="alert">1036</td>
<td></td>
<td></td>
<td></td>
<td>AS</td>
<td>108</td>
<td>C2-61 - C2-64</td>
<td>19</td>
<td>E2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
{{/repeat}}
</tbody>
</table>
</figure>
</div>
{{!-- End table --}}
<div class="u-text-center u-my-space-24">
<button type="button" class="c-button" id="load-more-rows-btn" data-rows-per-load="5">
Carica altre righe
</button>
</div>
{{!-- Panel --}}
<aside id="responsive-table-offcanvas" class="c-flight-table-operators-offcanvas o-rspnsv-table-offcanvas" aria-hidden="true">
<header class="c-flight-table-operators-offcanvas__header o-rspnsv-table-offcanvas__header">
<p class="c-flight-table-operators-offcanvas__title">Dettagli</p>
<button tabindex="-1" class="c-flight-table-operators-offcanvas__close-btn js-rspnsv-table-offcanvas-close-btn" aria-label="Torna alla tabella">
{{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--24" }}
</button>
</header>
<dl id="offcanvas-list">
{{!-- List built via JS --}}
</dl>
</aside>
{{!-- End panel --}}
{
"load-more-btn": {
"type": "button",
"text": "Carica altre righe",
"modifier": "c-button",
"id": "load-more-rows-btn"
}
}
/*------------------------------------*
These are only the CSS styles for the skin of the table.
The CSS styles of the table structure are into 'src/sass/05-objects/_objects.responsive-table.scss'
*------------------------------------*/
.c-flight-table-operators {
@include max-screen(remify(1260px)) {
width: clamp(remify(0px), 100%, remify(740px) );
}
}
.c-flight-table-operators__inner {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
text-align: left;
@include font-scale(level-1);
@include max-screen(remify(1260px)) {
@include font-scale(level-1-5)
}
thead {
background-color: primary(night, 100);
color: #fff;
}
td {
img {
margin-left: remify(8px);
}
}
th, td {
padding: remify(8px);
white-space: nowrap;
@include max-screen(remify(1260px)) {
padding: remify(1px) 0;
}
}
td.alert {
background-color: status(negative);
color: #fff;
}
td.warning {
background-color: primary(sun, 120);
color: #000;
}
td.is-relevant {
font-weight: bold;
@include max-screen(remify(1260px)) {
color: primary(sky, 120);
}
}
.to-show:before {
color: #000;
}
tbody tr:nth-of-type(even) {
@include min-screen(remify(1260px)) {
background-color: secondary(page, 100);
}
}
tbody tr {
border-bottom: 1px solid primary(night, 20);
@include max-screen(remify(1260px)) {
border-radius: remify(16px);
padding: remify(12px);
@include shadow(medium);
cursor: pointer;
border: 1px solid primary(night, 20);
}
}
tbody tr + tr {
@include max-screen(remify(1260px)) {
margin-top: 20px;
}
}
tr::after {
@include max-screen(remify(1260px)) {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
padding: 12px;
}
}
}
.c-flight-table-operators-offcanvas__header {
background-color: primary(night, 80);
color: #FFF;
}
.c-flight-table-operators-offcanvas__title {
@include font-scale(level-3);
color: currentColor;
}
.c-flight-table-operators-offcanvas__close-btn {
svg * {
fill: #FFF;
}
}
.c-flight-table-operators-offcanvas dd {
border-bottom: remify(1px) solid primary(night, 10);
padding-bottom: remify(16px);
&:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Check if the element with the specified class exists
const table = document.querySelector('.js-flight-table-operators');
if (!table) return; // If it does not exist, stop code execution here
// Get the initial number of rows to display
const initialRowsToShow = parseInt(table.getAttribute('data-rows'));
// Focus only on the rows within <tbody>
const rows = table.querySelectorAll('tbody tr');
rows.forEach((row, index) => {
if (index >= initialRowsToShow) {
row.style.display = 'none'; // Hide rows exceeding the initial limit
}
});
// Update the button
const loadMoreButton = document.getElementById('load-more-rows-btn');
const rowsPerLoad = parseInt(loadMoreButton.getAttribute('data-rows-per-load'));
updateButton(loadMoreButton, rowsPerLoad, rows.length - initialRowsToShow);
// Add event listener to the button
loadMoreButton.addEventListener('click', function() {
let shownRows = 0;
let totalShown = 0;
// Count how many rows are currently displayed
rows.forEach(row => {
if (row.style.display !== 'none') totalShown++;
});
// Display the specified number of additional rows
rows.forEach(row => {
if (row.style.display === 'none' && shownRows < rowsPerLoad) {
row.style.display = '';
shownRows++;
}
});
// Update the button after loading rows
updateButton(this, rowsPerLoad, rows.length - totalShown - shownRows);
});
});
function updateButton(button, rowsPerLoad, remainingRows) {
const rowsToShowNext = Math.min(rowsPerLoad, remainingRows);
if (rowsToShowNext > 0) {
button.textContent = `Carica altre ${rowsToShowNext} righe`;
} else {
button.style.display = 'none'; // Hide the button if no more rows to load
}
}
document.addEventListener("DOMContentLoaded", function () {
// Check if the element with class "js-responsive-table" exists
if (!document.querySelector(".js-responsive-table")) {
// If it does not exist, exit the function and do not execute the rest of the code
return;
}
function AddTableARIA() {
try {
var allTables = document.querySelectorAll("table");
for (var i = 0; i < allTables.length; i++) {
allTables[i].setAttribute("role", "table");
}
var allRowGroups = document.querySelectorAll("thead, tbody, tfoot");
for (var i = 0; i < allRowGroups.length; i++) {
allRowGroups[i].setAttribute("role", "rowgroup");
}
var allRows = document.querySelectorAll("tr");
for (var i = 0; i < allRows.length; i++) {
allRows[i].setAttribute("role", "row");
}
var allHeaders = document.querySelectorAll("th");
for (var i = 0; i < allHeaders.length; i++) {
allHeaders[i].setAttribute("role", "columnheader");
}
var allCells = document.querySelectorAll("td");
for (var i = 0; i < allCells.length; i++) {
allCells[i].setAttribute("role", "cell");
}
// this accounts for scoped row headers
var allRowHeaders = document.querySelectorAll("th[scope=row]");
for (var i = 0; i < allRowHeaders.length; i++) {
allRowHeaders[i].setAttribute("role", "rowheader");
}
// caption role not needed as it is not a real role and
// browsers do not dump their own role with display block
var headerValues = []; // Array per memorizzare i testi delle intestazioni
// Ciclo che raccoglie i testi delle intestazioni
for (var i = 0; i < allHeaders.length; i++) {
allHeaders[i].setAttribute("role", "columnheader");
headerValues.push(allHeaders[i].textContent);
}
for (var i = 0; i < allCells.length; i++) {
// Usa l'array headerValues per assegnare "data-colHead" a tutte le celle di ogni riga
allCells[i].setAttribute("role", "cell");
allCells[i].setAttribute("data-colHead", headerValues[i % headerValues.length]);
}
} catch (e) {
console.log("AddTableARIA(): " + e);
}
}
AddTableARIA();
const allRows = document.querySelectorAll("tbody > tr");
const offcanvas = document.getElementById("responsive-table-offcanvas");
// Verifica se l'offcanvas esiste prima di eseguire il codice relativo
if (offcanvas) {
// Funzione per costruire offcanvasData in base ai <th> della tabella
function buildOffcanvasData() {
// const headers = document.querySelectorAll(".o-rspnsv-table th");
const headers = document.querySelectorAll(".o-rspnsv-table th");
return Array.from(headers).map(th => {
return { title: th.textContent.trim(), slots: 1 }; // Assumendo un solo slot per ogni titolo
});
}
// Funzione per costruire dl
function buildOffcanvasList() {
const offcanvasData = buildOffcanvasData();
const dl = document.getElementById("offcanvas-list");
let html = '';
let slotCounter = 1;
offcanvasData.forEach(item => {
html += `<dt>${item.title}</dt>`;
for (let i = 0; i < item.slots; i++) {
html += `<dd id="slot-${slotCounter}"></dd>`;
slotCounter++;
}
});
dl.innerHTML = html;
}
buildOffcanvasList(); // Costruisci <dl> all'avvio
function populateAndToggleOffcanvas(row) {
const columns = Array.from(row.children);
columns.forEach(function (child, i) {
const id = `slot-${i + 1}`;
const cellContent = child.innerText.trim();
// document.getElementById(id).innerHTML = child.innerText;
// Se la cella è vuota, usa "---" come contenuto, altrimenti usa il testo della cella
document.getElementById(id).innerHTML = cellContent === '' ? '---' : cellContent;
});
// Se il pannello è già aperto, chiudilo prima di riaprirlo
if (offcanvas.classList.contains("is-active")) {
offcanvas.classList.remove("is-active");
// Aggiungi un breve ritardo prima di riaprire per rendere l'interazione visibile
setTimeout(function() {
offcanvas.classList.add("is-active");
}, 300);
} else {
offcanvas.classList.add("is-active");
}
offcanvas.removeAttribute("aria-hidden");
offcanvas.querySelector("button").tabIndex = undefined;
offcanvas.focus();
}
function closeOffcanvas() {
offcanvas.setAttribute("aria-hidden", "true");
offcanvas.classList.remove("is-active");
offcanvas.querySelector("button").tabIndex = -1;
document.getElementById("responsive-table-wrapper").focus();
}
allRows.forEach(function (row) {
row.addEventListener("click", function() {
populateAndToggleOffcanvas(row);
});
});
var closeButton = document.querySelector(".js-rspnsv-table-offcanvas-close-btn");
closeButton.addEventListener("click", function () {
closeOffcanvas();
});
}
});
No notes defined.