8.2 tables.mobile Table small screens
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