Use the table component to let users compare information in rows and columns.
A table is a great way to present things such as:
Do not use the table component for layout.
Furthermore, do not use a table component:
For presenting simple, non-tabular data, consider using a list instead. For presenting teasers of content, use the collection of teasers instead.
A table organizes information in rows and columns:
The table styling features alternating row colors.
On desktop resolutions, when it is desired, individual rows, columns or even individual cells can be highlighted by overriding the background color. The colors that can be used are success, warning and error. To override the background color with one of these colors, apply the desired CSS class to a row or cell.
On tablets in portrait mode and mobile resolutions, the table component is rendered as a swiper, with arrows to swipe through the different columns. Highlighting cannot be used here. The first column is always fixed, the rest of the “slides” swipe under the first column.
{# Table (desktop). #}
<div class="responsive-table">
<div class="table-wrapper">
<table>
{% for row in table.rows %}
<tr {{ row.attributes }}>
{% for cell in row.cells %}
{% if cell.header %}
<th {{ cell.attributes }}>{{ cell.text }}</th>
{% else %}
<td {{ cell.attributes }}>{{ cell.text }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
<caption>
{{ caption }}
</caption>
</table>
</div>
</div>
{# Fixed column with swiper (mobile). #}
<div class="table-swiper-wrapper">
<div class="table-swiper">
<div class="table-swiper__fixed-column">
<dl>
{% if table.columns[0].header is defined and table.columns[0].header.text is not empty %}
<dt class="column-header">{{ table.columns[0].header.text }}</dt>
{% endif %}
{% for cell in table.columns[0].cells %}
{% set rowIndex = loop.index0 %}
{% if cell.header %}
<dt {{ cell.attributes }} class="cell-row" data-row-index="{{ rowIndex }}">{{ cell.text }}</dt>
{% else %}
<dd {{ cell.attributes }} class="cell-row{% if rowIndex is odd %} row-even{% endif %}" data-row-index="{{ rowIndex }}">{{ cell.text }}</dd>
{% endif %}
{% endfor %}
</dl>
</div>
<div class="swiper">
<div class="swiper-wrapper">
{% for column in table.columns|slice(1) %}
<div class="swiper-slide">
<dl>
{% if column.header %}
<dt class="column-header">{{ column.header.text }}</dt>
{% endif %}
{% for cell in column.cells %}
{% set rowIndex = loop.index0 %}
<dd
{{ cell.attributes }}
class="cell-row{% if rowIndex is odd %} row-even{% endif %}"
data-row-index="{{ rowIndex }}"
>
{{ cell.text }}
</dd>
{% endfor %}
</dl>
</div>
{% endfor %}
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev custom-prev">
<i class="icon icon-arrow-left"></i>
</div>
<div class="swiper-button-next custom-next">
<i class="icon icon-arrow-right"></i>
</div>
</div>
<div class="caption">{{ caption }}</div>
</div>
<div class="responsive-table">
<div class="table-wrapper">
<table>
<tr>
<th scope="col">Header column 1</th>
<th scope="col">Header column 2</th>
<th scope="col">Header column 3</th>
<th scope="col">Header column 4</th>
<th scope="col">Header column 5</th>
<th scope="col">Header column 6</th>
</tr>
<tr>
<td>Row 2, column 1</td>
<td class="cell-row success">Row 2, column 2</td>
<td>Row 2, column 3</td>
<td>Row 2, column 4</td>
<td>Row 2, column 5</td>
<td>Row 2, column 6</td>
</tr>
<tr>
<td>Row 3, column 1</td>
<td>Row 3, column 2</td>
<td>Row 3, column 3</td>
<td>Row 3, column 4</td>
<td>Row 3, column 5</td>
<td>Row 3, column 6</td>
</tr>
<tr>
<td>Row 4, column 1</td>
<td>Row 4, column 2</td>
<td>Row 4, column 3</td>
<td>Row 4, column 4</td>
<td class="cell-row error">Row 4, column 5</td>
<td>Row 4, column 6</td>
</tr>
<tr>
<td>Row 5, column 1</td>
<td>Row 5, column 2</td>
<td>Row 5, column 3</td>
<td>Row 5, column 4</td>
<td>Row 5, column 5</td>
<td>Row 5, column 6</td>
</tr>
<tr>
<td>Row 6, column 1</td>
<td>Row 6, column 2</td>
<td>Row 6, column 3</td>
<td class="cell-row warning">Row 6, column 4</td>
<td>Row 6, column 5</td>
<td>Row 6, column 6</td>
</tr>
<tr>
<td>Row 7, column 1</td>
<td>Row 7, column 2</td>
<td>Row 7, column 3</td>
<td>Row 7, column 4</td>
<td>Row 7, column 5</td>
<td>Row 7, column 6</td>
</tr>
<tr>
<td>Row 8, column 1</td>
<td>Row 8, column 2</td>
<td>Row 8, column 3</td>
<td>Row 8, column 4</td>
<td>Row 8, column 5</td>
<td>Row 8, column 6</td>
</tr>
<tr class="cell-row success">
<td>Row 9, column 1</td>
<td>Row 9, column 2</td>
<td>Row 9, column 3</td>
<td>Row 9, column 4</td>
<td>Row 9, column 5</td>
<td>Row 9, column 6</td>
</tr>
<tr>
<td>Row 10, column 1</td>
<td>Row 10, column 2</td>
<td>Row 10, column 3</td>
<td>Row 10, column 4</td>
<td>Row 10, column 5</td>
<td>Row 10, column 6</td>
</tr>
<caption>
This is a table caption that describes the table content.
</caption>
</table>
</div>
</div>
<div class="table-swiper-wrapper">
<div class="table-swiper">
<div class="table-swiper__fixed-column">
<dl>
<dt class="column-header">Header column 1</dt>
<dd class="cell-row" data-row-index="0">Row 2, column 1</dd>
<dd class="cell-row row-even" data-row-index="1">Row 3, column 1</dd>
<dd class="cell-row" data-row-index="2">Row 4, column 1</dd>
<dd class="cell-row row-even" data-row-index="3">Row 5, column 1</dd>
<dd class="cell-row" data-row-index="4">Row 6, column 1</dd>
<dd class="cell-row row-even" data-row-index="5">Row 7, column 1</dd>
<dd class="cell-row" data-row-index="6">Row 8, column 1</dd>
<dd class="cell-row row-even" data-row-index="7">Row 9, column 1</dd>
<dd class="cell-row" data-row-index="8">Row 10, column 1</dd>
</dl>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<dl>
<dt class="column-header">Header column 2</dt>
<dd class="cell-row success" class="cell-row" data-row-index="0">
Row 2, column 2
</dd>
<dd class="cell-row row-even" data-row-index="1">
Row 3, column 2
</dd>
<dd class="cell-row" data-row-index="2">
Row 4, column 2
</dd>
<dd class="cell-row row-even" data-row-index="3">
Row 5, column 2
</dd>
<dd class="cell-row" data-row-index="4">
Row 6, column 2
</dd>
<dd class="cell-row row-even" data-row-index="5">
Row 7, column 2
</dd>
<dd class="cell-row" data-row-index="6">
Row 8, column 2
</dd>
<dd class="cell-row row-even" data-row-index="7">
Row 9, column 2
</dd>
<dd class="cell-row" data-row-index="8">
Row 10, column 2
</dd>
</dl>
</div>
<div class="swiper-slide">
<dl>
<dt class="column-header">Header column 3</dt>
<dd class="cell-row" data-row-index="0">
Row 2, column 3
</dd>
<dd class="cell-row row-even" data-row-index="1">
Row 3, column 3
</dd>
<dd class="cell-row" data-row-index="2">
Row 4, column 3
</dd>
<dd class="cell-row row-even" data-row-index="3">
Row 5, column 3
</dd>
<dd class="cell-row" data-row-index="4">
Row 6, column 3
</dd>
<dd class="cell-row row-even" data-row-index="5">
Row 7, column 3
</dd>
<dd class="cell-row" data-row-index="6">
Row 8, column 3
</dd>
<dd class="cell-row row-even" data-row-index="7">
Row 9, column 3
</dd>
<dd class="cell-row" data-row-index="8">
Row 10, column 3
</dd>
</dl>
</div>
<div class="swiper-slide">
<dl>
<dt class="column-header">Header column 4</dt>
<dd class="cell-row" data-row-index="0">
Row 2, column 4
</dd>
<dd class="cell-row row-even" data-row-index="1">
Row 3, column 4
</dd>
<dd class="cell-row" data-row-index="2">
Row 4, column 4
</dd>
<dd class="cell-row row-even" data-row-index="3">
Row 5, column 4
</dd>
<dd class="cell-row warning" class="cell-row" data-row-index="4">
Row 6, column 4
</dd>
<dd class="cell-row row-even" data-row-index="5">
Row 7, column 4
</dd>
<dd class="cell-row" data-row-index="6">
Row 8, column 4
</dd>
<dd class="cell-row row-even" data-row-index="7">
Row 9, column 4
</dd>
<dd class="cell-row" data-row-index="8">
Row 10, column 4
</dd>
</dl>
</div>
<div class="swiper-slide">
<dl>
<dt class="column-header">Header column 5</dt>
<dd class="cell-row" data-row-index="0">
Row 2, column 5
</dd>
<dd class="cell-row row-even" data-row-index="1">
Row 3, column 5
</dd>
<dd class="cell-row error" class="cell-row" data-row-index="2">
Row 4, column 5
</dd>
<dd class="cell-row row-even" data-row-index="3">
Row 5, column 5
</dd>
<dd class="cell-row" data-row-index="4">
Row 6, column 5
</dd>
<dd class="cell-row row-even" data-row-index="5">
Row 7, column 5
</dd>
<dd class="cell-row" data-row-index="6">
Row 8, column 5
</dd>
<dd class="cell-row row-even" data-row-index="7">
Row 9, column 5
</dd>
<dd class="cell-row" data-row-index="8">
Row 10, column 5
</dd>
</dl>
</div>
<div class="swiper-slide">
<dl>
<dt class="column-header">Header column 6</dt>
<dd class="cell-row" data-row-index="0">
Row 2, column 6
</dd>
<dd class="cell-row row-even" data-row-index="1">
Row 3, column 6
</dd>
<dd class="cell-row" data-row-index="2">
Row 4, column 6
</dd>
<dd class="cell-row row-even" data-row-index="3">
Row 5, column 6
</dd>
<dd class="cell-row" data-row-index="4">
Row 6, column 6
</dd>
<dd class="cell-row row-even" data-row-index="5">
Row 7, column 6
</dd>
<dd class="cell-row" data-row-index="6">
Row 8, column 6
</dd>
<dd class="cell-row row-even" data-row-index="7">
Row 9, column 6
</dd>
<dd class="cell-row" data-row-index="8">
Row 10, column 6
</dd>
</dl>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev custom-prev">
<i class="icon icon-arrow-left"></i>
</div>
<div class="swiper-button-next custom-next">
<i class="icon icon-arrow-right"></i>
</div>
</div>
<div class="caption">This is a table caption that describes the table content.</div>
</div>
{
"table": {
"rows": [
{
"attributes": null,
"cells": [
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 1"
},
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 2"
},
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 3"
},
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 4"
},
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 5"
},
{
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 1"
},
{
"header": false,
"attributes": "class=\"cell-row success\"",
"text": "Row 2, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 2, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 2, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 2, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 2, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 3, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 4, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 4"
},
{
"header": false,
"attributes": "class=\"cell-row error\"",
"text": "Row 4, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 5, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 6, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 3"
},
{
"header": false,
"attributes": "class=\"cell-row warning\"",
"text": "Row 6, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 7, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 8, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 6"
}
]
},
{
"attributes": "class=\"cell-row success\"",
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 9, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 6"
}
]
},
{
"attributes": null,
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 10, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 6"
}
]
}
],
"columns": [
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 1"
},
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 1"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 1"
}
]
},
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 2"
},
"cells": [
{
"header": false,
"attributes": "class=\"cell-row success\"",
"text": "Row 2, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 2"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 2"
}
]
},
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 3"
},
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 3"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 3"
}
]
},
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 4"
},
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 4"
},
{
"header": false,
"attributes": "class=\"cell-row warning\"",
"text": "Row 6, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 4"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 4"
}
]
},
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 5"
},
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 5"
},
{
"header": false,
"attributes": "class=\"cell-row error\"",
"text": "Row 4, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 5"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 5"
}
]
},
{
"header": {
"header": true,
"attributes": "scope=\"col\"",
"text": "Header column 6"
},
"cells": [
{
"header": false,
"attributes": null,
"text": "Row 2, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 3, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 4, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 5, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 6, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 7, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 8, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 9, column 6"
},
{
"header": false,
"attributes": null,
"text": "Row 10, column 6"
}
]
}
],
"columnHeaders": true,
"rowHeaders": false
},
"caption": "This is a table caption that describes the table content."
}
div.responsive-table,
div.table-swiper-wrapper {
position: relative;
padding-bottom: 1.4rem;
hyphens: auto;
caption,
.caption {
@include theme('color', 'help-text-color', 'table-caption-color');
@include small-text();
}
}
div.responsive-table {
@include focus-style;
display: none;
@include tablet {
display: block;
max-width: 100%;
overflow: hidden;
}
.table-wrapper {
overflow-x: auto;
}
table {
border-bottom: 1px solid color('gray', -5);
border-collapse: collapse;
caption-side: bottom;
th {
@include semi-bold-text;
font-size: .9rem;
}
td {
font-size: .8rem;
&:nth-of-type(n) {
@include table-backgrounds;
}
}
tr {
&:nth-of-type(even) th:not([scope="col"]) th:not([scope="row"]),
&:nth-of-type(even) td {
@include theme('background-color', 'color-secondary-light', 'table-row-color');
}
&:nth-of-type(n) {
@include table-backgrounds(td);
}
th {
@include theme('background-color', 'color-secondary', 'table-header-color');
}
}
// Tables with a thead should have the same color scheme.
thead ~ tbody tr {
[class*="cs--"] &:nth-of-type(even) th:not([scope="col"]),
[class*="cs--"] &:nth-of-type(even) td {
background-color: transparent;
}
&:nth-of-type(odd) th:not([scope="col"]),
&:nth-of-type(odd) td {
@include theme('background-color', 'color-secondary-light', 'table-row-color');
}
}
th,
td {
@include theme('color', 'color-zero', 'table-content-color');
padding: 20px;
text-align: left;
}
caption {
margin-top: 10px;
text-align: right;
}
}
}
// Swiper styling for mobile.
$fixed-col-width: 130px;
$pag-nav-wrapper-size: 50px;
div.table-swiper-wrapper {
display: block;
width: 100%;
@include tablet {
display: none;
}
.table-swiper__fixed-column,
.swiper {
padding-bottom: $pag-nav-wrapper-size;
&::before,
&::after {
position: absolute;
right: 0;
left: 0;
height: 1px;
background-color: color('gray-light');
content: "";
}
&::before {
top: 0;
}
&::after {
bottom: $pag-nav-wrapper-size;
}
}
.table-swiper {
display: flex;
position: relative;
width: 100%;
overflow: hidden;
dl,
dt,
dd {
margin: 0;
}
dt,
dd {
display: block;
width: 100%;
padding: 20px;
}
.swiper {
width: calc(100vw - #{$fixed-col-width} - 40px);
margin-right: 0;
margin-left: 0;
padding-left: 0;
overflow: hidden;
}
.swiper-wrapper {
display: flex;
width: 100%;
margin: 0;
padding: 0;
gap: 0;
box-sizing: border-box;
}
.swiper-slide {
width: auto;
max-width: 190px; // = 360px - 2 x 20px - 130px (for fixed column).
margin-right: -1px;
}
.swiper-pagination {
top: calc(100% - $pag-nav-wrapper-size + 8px);
}
.swiper-pagination-bullet-active,
.swiper-button-next,
.swiper-button-prev {
@include theme('color', 'color-primary');
}
.swiper-pagination-bullet {
@include theme('background-color', 'bullet-inactive-color');
width: 10px;
height: 10px;
margin: 0 7.5px;
opacity: 1;
}
.swiper-pagination-bullet-active {
@include theme('background-color', 'color-primary');
}
.swiper-button-next,
.swiper-button-prev {
top: calc(100% - $pag-nav-wrapper-size);
height: $pag-nav-wrapper-size;
margin-top: 0;
&::after {
display: none;
}
.icon {
&::before {
font-size: 1.6rem;
line-height: $pag-nav-wrapper-size;
}
}
}
}
.table-swiper__fixed-column {
position: sticky;
left: 0;
flex-shrink: 0;
width: $fixed-col-width;
z-index: 2;
pointer-events: none;
&::after {
position: absolute;
top: 0;
bottom: $pag-nav-wrapper-size;
left: 100%;
width: 25px;
height: auto;
background: linear-gradient(90deg, rgba(2, 0, 36, .25) 0%, rgba(0, 0, 0, 0) 100%);
content: "";
z-index: 4;
}
}
dt {
@include theme('background-color', 'color-secondary', 'table-header-color');
@include theme('border-color', 'color-secondary', 'table-header-color');
@include semi-bold-text();
}
dd {
&:nth-of-type(n) {
@include table-backgrounds();
}
}
}
// Global bindings for ResponsiveTable, Swiper, equalizeTableSwiperHeights.
'use strict';
(function () {
const tablesNodeList = document.querySelectorAll('.responsive-table .table-wrapper');
for (let i = 0; i < tablesNodeList.length; i++) {
const table = tablesNodeList[i];
new ResponsiveTable(table, { // eslint-disable-line no-undef
scrollableText: '(scroll to see more)'
});
}
// Initialize each Swiper separately.
document.querySelectorAll('.table-swiper-wrapper .swiper').forEach((swiperElement, index) => {
const swiperWrapper = swiperElement.closest('.table-swiper-wrapper');
const paginationEl = swiperWrapper.querySelector('.swiper-pagination');
const nextEl = swiperWrapper.querySelector('.swiper-button-next');
const prevEl = swiperWrapper.querySelector('.swiper-button-prev');
const slideCount = swiperElement.querySelectorAll('.swiper-slide').length;
new Swiper(swiperElement, { // eslint-disable-line no-undef
slidesPerView: 'auto',
spaceBetween: 0,
loop: slideCount > 1,
pagination: {
el: paginationEl,
type: 'bullets',
clickable: true
},
navigation: {
nextEl: nextEl,
prevEl: prevEl
},
on: {
init: function () {
if (typeof equalizeTableSwiperHeights === 'function') {
equalizeTableSwiperHeights(); // eslint-disable-line no-undef
}
// fallback update after render.
setTimeout(() => this.update(), 100);
},
resize: function () {
if (typeof equalizeTableSwiperHeights === 'function') {
equalizeTableSwiperHeights(); // eslint-disable-line no-undef
}
}
}
});
});
if (typeof equalizeTableSwiperHeights === 'function') {
window.addEventListener('load', equalizeTableSwiperHeights); // eslint-disable-line no-undef
window.addEventListener('resize', equalizeTableSwiperHeights); // eslint-disable-line no-undef
}
})();
'use strict';
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
}
else {
if (typeof exports === 'object') {
module.exports = factory();
}
else {
root.ResponsiveTable = factory();
}
}
}(this || window, function () {
return function (element, options) {
let caption = null;
const determineFocusable = () => {
var scrollableWidth = element.parentNode.querySelector('table').scrollWidth;
var containerWidth = element.parentNode.clientWidth;
if (scrollableWidth <= containerWidth) {
element.removeAttribute('tabindex');
}
else if (caption) {
caption.innerText += ' ' + options.scrollableText;
}
};
const setupResponsiveTable = () => {
if (caption && !caption.hasAttribute('id')) {
const tableUid = Math.random().toString(36).substr(2, 16);
caption.setAttribute('id', 'responsive-table-caption-caption-' + tableUid);
element.setAttribute('aria-labelledby', caption.getAttribute('id'));
}
element.setAttribute('tabindex', '0');
element.setAttribute('role', 'group');
let firstRow = element.querySelector('tr');
let tableHeadingsNodeList = firstRow.querySelectorAll('th');
if (firstRow.getElementsByTagName('th').length === firstRow.querySelectorAll('*').length) {
for (let i = 0; i < tableHeadingsNodeList.length; i++) {
if (!tableHeadingsNodeList[i].hasAttribute('scope')) {
tableHeadingsNodeList[i].setAttribute('scope', 'col');
}
}
}
let tableRowsNodeList = element.querySelectorAll('tr');
for (let i = 0; i < tableRowsNodeList.length; i++) {
let firstChild = tableRowsNodeList[i].firstElementChild;
if (firstChild && !firstChild.hasAttribute('scope')) {
firstChild.setAttribute('scope', 'row');
}
}
determineFocusable();
};
const equalizeColumnHeaderHeights = () => {
const headers = document.querySelectorAll('.table-swiper .column-header');
let maxHeaderHeight = 0;
headers.forEach(header => {
header.style.height = 'auto';
const height = Math.round(header.offsetHeight);
if (height > maxHeaderHeight) {
maxHeaderHeight = height;
}
});
headers.forEach(header => {
header.style.height = `${maxHeaderHeight}px`;
});
const rows = document.querySelectorAll('.table-swiper .cell-row');
const groupedByIndex = {};
rows.forEach(row => {
const index = row.getAttribute('data-row-index');
if (!groupedByIndex[index]) {
groupedByIndex[index] = [];
}
groupedByIndex[index].push(row);
});
Object.values(groupedByIndex).forEach(rowGroup => {
let maxHeight = 0;
rowGroup.forEach(row => {
row.style.height = 'auto';
const height = Math.round(row.offsetHeight);
if (height > maxHeight) {
maxHeight = height;
}
});
rowGroup.forEach(row => {
row.style.height = `${maxHeight}px`;
});
});
};
const init = () => {
if (!element) {
return;
}
caption = element.querySelector('caption');
setupResponsiveTable();
equalizeColumnHeaderHeights();
};
init();
window.equalizeTableSwiperHeights = equalizeColumnHeaderHeights;
return {};
};
}));