8 tables Tables

Source: styles.scss, line 67

8.1 tables.desktop Table large screens

Toggle full screen Open in new window 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

8.2 tables.mobile Table small screens

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

Examples
Default styling
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD)
Sairasloma Sairaus, 15pv
Lääkäri Mikko Mikkonen
Hoito Ohje
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti
Sairasloma Sairaus, 2pv
Lääkäri Tuukka Tukkanen
Hoito Ohje
.table--mobile-headers
Table that requires labels visible on the mobile.
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD)
Sairasloma Sairaus, 15pv
Lääkäri Mikko Mikkonen
Hoito Ohje
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti
Sairasloma Sairaus, 2pv
Lääkäri Tuukka Tukkanen
Hoito Ohje
Markup: components/table/table-mobile.twig 
<table class="table table--content table--mobile table--two-column {{ modifier_class }}">
  {% for row in table.rows %}
    <tbody class="table__row table__row--{{ cycle(['odd', 'even'], loop.index0) }}">
      {% for item in row %}
        {% if loop.index == 1 %}
          <tr class="table__sub-row">
            <td class="table__cell">
              {{- item -}}
            </td>
          {% if loop.length == 1 %}
            </tr>
          {% endif %}
        {% elseif loop.index == 2 %}
            <td class="table__cell">
              <strong>{{ item }}</strong>
            </td>
          </tr>
        {% else -%}
          <tr class="table__sub-row">
            <td class="table__cell">
              <span class="table__label">{{- table.headers[loop.index0] -}}</span>
            </td>
            <td class="table__cell">
              {{- item -}}
            </td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  {% endfor %}
</table>
Source: components/table/table.scss, line 66

8.3 tables.single-column Table small screen single column

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This component is useful for visualizing small amounts of data on small screens.

Example
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-single-column.twig 
<table class="table table--content table--mobile table--single-column {{ modifier_class }}">
  {% for row in table.rows %}

    <tr class="table__row table__row--{{ cycle(['odd', 'even'], loop.index0) }}">
      <td class="table__cell">
        {% for item in row %}
          <div class="table__content">
            {{- item -}}
          </div>
        {% endfor %}

      </td>
    </tr>
  {% endfor %}
</table>
Source: components/table/table.scss, line 104