8.1 tables.desktop Table large screens

Toggle example guides Toggle HTML markup

This component is useful for visualizing large amount of data on large screens.

Example
Pvm Diagnoosi Sairasloma Lääkäri Hoito
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD) Sairaus, 15pv Mikko Mikkonen Ohje
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti Sairaus, 2pv Tuukka Tukkanen Ohje
Markup: components/table/table.twig 
<table class="table table--content {{ modifier_class }}">
  <tr>
    {% for header in table.headers %}
      <th class="table__header">{{ header }}</th>
    {% endfor %}
  </tr>
  {% for row in table.rows %}
    <tr class="table__row table__row--{{ cycle(['odd', 'even'], loop.index0) }}">
      {% for item in row %}
        <td class="table__cell">{{ item }}</td>
      {% endfor %}
    </tr>
  {% endfor %}
</table>
Source: components/table/table.scss, line 1