Source:
styles.scss
, line 67
8.1 tables.desktop Table large screens
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
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
This component is useful for visualizing small amounts of data on small screens.
Example
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD) Sairaus, 15pv
|
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti Sairaus, 2pv
|
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