Index tables allow you to present structured data. This is the type of data that typically comes from JSON or databases where the data structure is predictable.
This differs from the @uol-rich-text-table for use in Rich Text Areas where authors can edit the table content.
If the data can be presented with a single heading row and does not rely on column headings there is the option to present a “stacked” view for smaller screens. See Options for tables.
| Name | Type | Description |
|---|---|---|
| tables | array | An array of tables. |
| Name | Type | Description |
|---|---|---|
| stackable | boolean | Provides a “stacked” view for smaller screens. Only use when date has a single heading row. |
| caption | string | Provides a title for the table, renders as a <h2>. Recommended unless preceded by an alternative semantic title. |
| headings | array | The table headings, includes a “label: string that provides the cell data and boolean options for ‘image_column’ ‘sortable’ and ‘numeric’ which affect layout and functionality. |
| rows | array | Each table row contains an array of ‘cells’ with the following required or optional fields: Required: ‘content’ string. Optional: ‘type’ that currently accepts a value of ‘numeric’. Optional: ‘img’ object that can have a ‘src’, ‘alt’ and ‘type’ (currently accepts ‘profile’). Optional: ‘link’ URL which acts as an active link. Optional: ‘sortBy’ string can be added for when the data is to be sorted by a value other than the displayed content (eg. ‘content’: ‘Dr Richard Ansell’, ‘sortBy’: ‘Ansell Richard Dr’). This should also be used when the displayed content is a mixture of text and numerical data and the content is to be sorted by the numerical value (eg. ‘content’: ‘£8’, ‘sortBy’: ‘8’). |
{% for table in tables %}
{% if table.caption %}<h2 class="uol-index-table-caption">{{ table.caption }}</h2>{% endif %}
{% if table.search_results and table.search_results.term %}
<div class="uol-index-table--results-container">
<h2 class="uol-index-table--results">{{ table.rows.length }} results for <strong>'{{ table.search_results.term }}'</strong></h2>
</div>
{% endif %}
<table class="uol-index-table{{ ' js-uolTableStackable' if table.stackable}} {{ ' uol-index-table--search-results' if table.search_results}}">
{# Currently unused due to Safari position: sticky bug #}
{# {% if table.caption %}<caption>{{ table.caption }}</caption>{% endif %} #}
{% if table.headings.length > 0 %}
<thead>
<tr>
{% for heading in table.headings%}
<th
class="uol-index-table__th {{ 'uol-index-table__th--numeric' if heading.numeric }} {{ 'uol-index-table__th--image-column' if heading.image_column }}"
{{ ' data-sortable=true' if heading.sortable }}>
{{ heading.label }}
</th>
{% endfor %}
</tr>
</thead>
{% endif %}
{% if table.rows.length > 0%}
<tbody>
{% for row in table.rows %}
<tr>
{% for cell in row.cells %}
<td
class="uol-index-table__td {{ 'uol-index-table__td--type-img' if cell.img }} {{ 'uol-index-table__td--type-numeric' if cell.type=='numeric' }}"
data-value="{{ cell.content }}"
{% if cell.sortBy %}
data-sortby="{{ cell.sortBy }}"
{% endif%}
>
{% if cell.link %}<a href="{{ cell.link }}">{% endif %}
{{ cell.content }}
{% if cell.img %}
<span
class="uol-index-table__td__img uol-index-table__td__img--profile"
{% if cell.img.src %}
role="img"
aria-label="{{ cell.img.alt }}"
style="background-image: url({{ cell.img.src }})"
{% endif%}
{% if cell.sortBy %}
data-sortkey="{{ cell.sortBy }}"
{% endif%}
>
</span>
{% endif %}
{% if cell.link %}</a>{% endif %}
{% if cell.email %}
<a href="mailto:{{cell.email}}">{{cell.email}}</a>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
{% endfor %}
<div class="uol-index-table--results-container">
<h2 class="uol-index-table--results">11 results for <strong>'ab'</strong></h2>
</div>
<table class="uol-index-table js-uolTableStackable uol-index-table--search-results">
<thead>
<tr>
<th class="uol-index-table__th " data-sortable=true>
Name
</th>
<th class="uol-index-table__th ">
Description
</th>
<th class="uol-index-table__th ">
Country of origin
</th>
<th class="uol-index-table__th uol-index-table__th--numeric " data-sortable=true>
Fat percentage
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uol-index-table__td " data-value="Cheddar">
Cheddar
</td>
<td class="uol-index-table__td " data-value="Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world">
Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world
</td>
<td class="uol-index-table__td " data-value="UK">
UK
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="16%" data-sortby="16">
16%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Brie">
Brie
</td>
<td class="uol-index-table__td " data-value="Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment">
Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment
</td>
<td class="uol-index-table__td " data-value="France">
France
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="2%" data-sortby="2">
2%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Edam">
Edam
</td>
<td class="uol-index-table__td " data-value="Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens">
Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens
</td>
<td class="uol-index-table__td " data-value="Netherlands">
Netherlands
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="11%" data-sortby="11">
11%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Manchego">
Manchego
</td>
<td class="uol-index-table__td " data-value="Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets">
Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets
</td>
<td class="uol-index-table__td " data-value="Spain">
Spain
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="25%" data-sortby="25">
25%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano">
Parmigiano-Reggiano
</td>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.">
Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.
</td>
<td class="uol-index-table__td " data-value="Italy">
Italy
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="29.7%" data-sortby="29.7">
29.7%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cashel Blue">
Cashel Blue
</td>
<td class="uol-index-table__td " data-value="Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.">
Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.
</td>
<td class="uol-index-table__td " data-value="Ireland">
Ireland
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="45%" data-sortby="45">
45%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stilton">
Stilton
</td>
<td class="uol-index-table__td " data-value="Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.">
Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="35%" data-sortby="35">
35%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Shropshire Blue">
Shropshire Blue
</td>
<td class="uol-index-table__td " data-value="Shropshire Blue is a cow's milk cheese made in the United Kingdon">
Shropshire Blue is a cow's milk cheese made in the United Kingdon
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%" data-sortby="48">
48%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Wensleydale">
Wensleydale
</td>
<td class="uol-index-table__td " data-value="Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale">
Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="32%" data-sortby="32">
32%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cornish Yarg">
Cornish Yarg
</td>
<td class="uol-index-table__td " data-value="Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.">
Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="30%" data-sortby="30">
30%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stinking Bishop">
Stinking Bishop
</td>
<td class="uol-index-table__td " data-value="Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.">
Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%" data-sortby="48">
48%
</td>
</tr>
</tbody>
</table>
.uol-index-table-caption {
@extend %text-size-heading-4;
color: $color-font--dark;
margin: $spacing-4 0 0;
padding: $spacing-4;
@include media("<uol-media-m") {
border: 1px solid $color-border--light;
border-radius: 6px 6px 0 0;
}
}
.uol-index-table--results-container {
padding: $spacing-4;
@include media(">uol-media-m") {
text-align: right;
}
}
.uol-index-table--results {
@include font-size-responsive(1rem);
}
.uol-index-table {
@extend %text-size-paragraph--small;
border-collapse: unset;
margin-bottom: $spacing-4;
border: 1px solid $color-border--light;
font-variant-numeric: lining-nums;
@include media(">=uol-media-m") {
margin: $spacing-4;
position: relative;
border-radius: 12px;
}
// Currently unused due to Safari position: sticky bug
// caption {
// font-size: 18px;
// font-weight: 600;
// color: $color-font--dark;
// }
thead {
border-radius: 6px 6px 0 0;
@include media(">=uol-media-m") {
z-index: 2;
border-radius: 0;
}
}
th,
td {
vertical-align: top;
@include media(">=uol-media-m") {
padding: $spacing-4;
}
}
th {
font-weight: $font-weight-medium--sans-serif;
@include media(">=uol-media-m") {
text-align: left;
position: sticky;
top: 0;
padding-bottom: 20px;
background: $color-white;
z-index: 2;
// transform: translateZ(0) scaleX(1.01);
&:first-of-type {
border-radius: 12px 0 0 0;
}
&:last-of-type {
border-radius: 0 12px 0 0;
}
.csspositionsticky & {
&::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: -4px;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(#000, 0) 0, rgba(#000, 0.4) 4px, rgba(#000, 0) 4px);
opacity: 0;
transition: opacity 0.7s ease;
}
}
&.uol-index-table__th--numeric {
text-align: right;
}
&.uol-index-table__th--image-column {
@include media(">=uol-media-m") {
padding-left: 6.5rem;
}
}
}
}
.thead--stuck th {
@include media(">=uol-media-m") {
&::before {
opacity: 1;
}
&:first-of-type,
&:last-of-type {
border-radius: 0;
}
}
}
td {
color: $color-font;
a {
color: $color-font;
text-decoration: underline;
&:hover,
&:focus {
text-decoration-color: $color-brand;
}
}
}
tbody {
line-height: 1.5;
@include media(">=uol-media-m") {
z-index: 1;
}
tr {
transition: all 0.3s ease;
@include media(">=uol-media-m") {
&:nth-child(odd) {
background: $color-grey--faded;
}
&:last-of-type {
td {
&:first-of-type {
border-radius: 0 0 0 12px;
}
&:last-of-type {
border-radius: 0 0 12px 0;
}
}
}
}
}
td {
@include media(">=uol-media-m") {
border-bottom: 1px solid $color-border--light;
}
}
tr:last-of-type td {
border-bottom: none;
}
}
.uol-index-table__td--type-numeric {
@include media(">=uol-media-m") {
text-align: right;
}
}
.uol-index-table__td--type-img {
position: relative;
margin-top: -#{$spacing-4};
margin-left: -#{$spacing-4};
margin-right: -#{$spacing-4};
padding: $spacing-4 $spacing-4 $spacing-4 6.5rem;
&::before {
content: "";
float: left;
overflow: hidden;
height: $spacing-8;
font-size: 0;
}
}
.uol-index-table__td__img {
position: absolute;
top: 8px;
left: 8px;
display: block;
width: 80px;
height: 80px;
background-color: $color-white;
border-radius: 50%;
overflow: hidden;
@include media(">=uol-media-m") {
width: 64px;
height: 64px;
top: 16px;
}
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: inherit;
height: inherit;
border-radius: inherit;
}
&::before {
background: 50% / cover;
background-image: inherit;
}
&::after {
box-shadow: inset 0 2px 5px rgba($color-black, 0.16);
}
}
.uol-index-table__td__img--profile {
background: $color-white url("../img/avatar-missing.png");
}
.uol-index-table__sort-select {
display: block;
font-weight: $font-weight-bold--sans-serif;
width: 100%;
margin: 0;
padding: $spacing-4;
border-color: $color-border;
border-radius: 0;
@supports (-webkit-appearance:none) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/sort.svg") no-repeat right $spacing-4 top 50%;
}
@media (-ms-high-contrast: active) {
-webkit-appearance: menulist;
-moz-appearance: menulist;
appearance: menulist;
background: initial;
}
@include media(">=uol-media-m") {
display: none;
}
}
.uol-index-table__th-inner {
display: flex;
}
.uol-index-table__btn-sort {
position: relative;
width: 25px;
height: 24px;
background: transparent;
border: none;
@include media("<uol-media-m") {
display: none;
}
&::before,
&::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 8px;
border: 0.35rem solid transparent;
border-bottom: none;
border-top: 0.4rem solid $color-black--dark;
@media (forced-colors: active) {
border: 0.35rem solid canvas;
border-top: 0.4rem solid $color-black--dark;
}
@media (-ms-high-contrast: active) {
border: 0.35rem solid window;
border-top: 0.4rem solid windowText;
}
}
&::before {
transform: rotate(180deg) translateY(120%);
}
&::after {
transform: translateY(20%);
}
&.sorted--asc {
&::after {
opacity: 0;
}
}
&.sorted--desc {
&::before {
opacity: 0;
}
}
}
}
// uol-index-table--stacked class added with javascript
.uol-index-table--stacked {
margin: 0 0 $spacing-4;
border-radius: 12px;
@include media("<uol-media-m") {
display: block;
border-collapse: separate;
border-radius: 0 0 6px 6px;
// Currently unused due to Safari position: sticky bug
// caption {
// padding: 16px;
// line-height: 1.333;
// background-color: $color-cream--dark;
// border-bottom: 4px solid hotpink;
// }
thead {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
left: -9999px;
}
tbody {
display: block;
tr {
display: block;
margin-bottom: 0;
}
td {
display: block;
padding: $spacing-4;
color: $color-font--dark;
&:first-of-type {
background: $color-grey--faded;
}
&:not(:first-child):not(:last-child) {
border-bottom: 1px solid $color-border--light;
}
}
.uol-index-table__td--type-img {
position: relative;
background: $color-cream--dark;
padding: $spacing-5 $spacing-4 $spacing-5 7rem;
margin: 0;
}
.uol-index-table__td__img {
position: absolute;
top: $spacing-4;
left: $spacing-4;
display: block;
width: $spacing-9;
height: $spacing-9;
background-color: $color-white;
border-radius: 50%;
overflow: hidden;
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: inherit;
height: inherit;
border-radius: inherit;
}
&::before {
background: 50% / cover;
background-image: inherit;
}
&::after {
box-shadow: inset 0 2px 5px rgba($color-black, 0.16);
}
img {
width: 100%;
height: auto;
}
}
}
}
}
.uol-index-table--search-results {
@include media("<uol-media-m") {
border-radius: 6px;
.uol-index-table__sort-select {
border-radius: 6px 6px 0 0;
}
}
}
.uol-index-table__pseudo-th {
display: block;
font-weight: $font-weight-bold--sans-serif;
color: $color-font;
margin-bottom: $spacing-1;
@include media(">=uol-media-m") {
display: none;
}
}
// TODO: Add colspan support
export const uolTableStackable = () => {
// Config
const
stackableTableClass = '.js-uolTableStackable',
stackableTablePseudoThClass = 'uol-index-table__pseudo-th',
stackedTableClass = 'uol-index-table--stacked';
// Get tables
const tables = document.querySelectorAll(stackableTableClass);
// Process tables
tables.forEach( (table) => {
const ths = table.querySelectorAll('thead th');
const rows = table.querySelectorAll('tbody tr');
rows.forEach( (row) => {
const cells = row.querySelectorAll('td')
cells.forEach( (cell, i) => {
cell.innerHTML = `
<span
class="${stackableTablePseudoThClass}"
aria-hidden="true">
${ths.item(i).innerText}
</span>
${cell.innerHTML}
`;
})
})
table.classList.add(stackedTableClass);
})
}
export const uolTablesSortable = () => {
let ascending;
const sortRowsByIndex = (table, colNumber) => {
const tBody = table.querySelector('tbody');
const rows = tBody.rows;
let newTableArray = [];
for (let i = 0; i < (rows.length); i++) {
newTableArray[i] = rows[i];
}
/**
* Sort function - switches through adjacent table elements
* Sorts in array, no swapping in DOM
* @param {element} a - first element to compare
* @param {element} b - second element to compare
* @returns {number} if -ve a is sorted before b, +ve b before a, 0 no change
*/
newTableArray.sort(function(a, b){
let aElement = a.getElementsByTagName("TD")[colNumber];
let bElement = b.getElementsByTagName("TD")[colNumber];
let aItem = aElement.dataset.sortby ?
aElement.dataset.sortby :
aElement.innerText;
let bItem = bElement.dataset.sortby ?
bElement.dataset.sortby :
bElement.innerText;
/**
* Nested ternary return statement
* Outer checks if both values are number or not
* Inner checks ascending boolean
* Returns -ve, +ve or 0
*/
return (!isNaN(parseFloat(aItem)) && !isNaN(parseFloat(bItem)) ?
ascending ? aItem - bItem : bItem - aItem :
ascending ? ('' + aItem).localeCompare(bItem) : ('' + bItem).localeCompare(aItem)
);
});
/** after sort completed build new table body from sorted array */
let newTBody = '';
for (let i = 0; i < (newTableArray.length); i++) {
newTBody += '<tr>' + newTableArray[i].innerHTML + '</tr>';
}
/** update DOM with new sorted table body content */
tBody.innerHTML = newTBody;
}
const tables = document.querySelectorAll('.uol-index-table');
tables.forEach( (table) => {
const tableHeadings = table.querySelectorAll('thead th');
/** Create map for mobile dropdown */
let mobileSortableColumns = new Map();
tableHeadings.forEach( (th, index) => {
if (th.dataset.sortable) {
const thValue = th.innerText;
th.innerHTML = `<span class="uol-index-table__th-inner"><span class="uol-index-table__sortable-label">${thValue}</span></span>`
// Add value to mobile dropdown map
mobileSortableColumns.set(index, thValue);
const sortButton = document.createElement('button');
sortButton.classList.add('uol-index-table__btn-sort');
sortButton.type = 'button';
sortButton.setAttribute('aria-label', 'Sort column');
sortButton.onclick = () => {
const allTh = table.querySelectorAll('thead th');
const thisBtn = allTh[index].querySelector('button');
if (thisBtn.classList.contains('sorted--asc')) {
ascending = false;
thisBtn.classList.add('sorted');
thisBtn.classList.add('sorted--desc');
thisBtn.classList.remove('sorted--asc');
} else {
ascending = true;
thisBtn.classList.add('sorted');
thisBtn.classList.remove('sorted--desc');
thisBtn.classList.add('sorted--asc');
}
// Reset all the other buttons
allTh.forEach( (th, i) => {
// Don't reset the button just clicked
if (i != index) {
// Get the button
const otherBtn = th.querySelector('button');
// Not all th have buttons
if (otherBtn) {
otherBtn.classList.remove('sorted');
otherBtn.classList.remove('sorted--asc');
otherBtn.classList.remove('sorted--desc');
}
}
})
sortRowsByIndex(table, index);
}
th.querySelector('.uol-index-table__th-inner').appendChild(sortButton);
}
})
if (mobileSortableColumns.size > 0) {
let selectSort = document.createElement('select');
selectSort.classList.add('uol-index-table__sort-select');
selectSort.setAttribute('aria-label', 'Sort table columns');
let selectSortOptions = `<option value="">Sort by</option>`;
mobileSortableColumns.forEach( (value, key) => {
selectSortOptions += `
<option data-sort_index="${key}" data-sort_dir="asc" value="${key}">${value} - ascending</option>
<option data-sort_index="${key}" data-sort_dir="desc" value="${key}">${value} - descending</option>
`;
})
selectSort.innerHTML = selectSortOptions;
selectSort.addEventListener('change', (e) => {
const selected = e.target.options[e.target.selectedIndex],
selectedIndex = selected.dataset.sort_index,
selectedDir = selected.dataset.sort_dir;
ascending = (selectedDir == "asc") ? true: false;
sortRowsByIndex(table, selectedIndex);
})
// Insert select
const thead = table.querySelector('thead');
thead.parentNode.insertBefore(selectSort, thead);
}
})
}
export const uolTableSticky = () => {
require('intersection-observer');
const tHeads = document.querySelectorAll('.uol-index-table thead')
tHeads.forEach( (thead) => {
(new IntersectionObserver(function(e,options){
if(e[0].intersectionRatio>0){
thead.classList.remove('thead--stuck');
} else {
thead.classList.add('thead--stuck');
};
})).observe(thead);
})
}
{
"tables": [
{
"stackable": true,
"search_results": {
"term": "ab"
},
"headings": [
{
"sortable": true,
"label": "Name"
},
{
"label": "Description"
},
{
"label": "Country of origin"
},
{
"sortable": true,
"numeric": true,
"label": "Fat percentage"
}
],
"rows": [
{
"cells": [
{
"content": "Cheddar"
},
{
"content": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
},
{
"content": "UK"
},
{
"type": "numeric",
"content": "16%",
"sortBy": "16"
}
]
},
{
"cells": [
{
"content": "Brie"
},
{
"content": "Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment"
},
{
"content": "France"
},
{
"type": "numeric",
"content": "2%",
"sortBy": "2"
}
]
},
{
"cells": [
{
"content": "Edam"
},
{
"content": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens"
},
{
"content": "Netherlands"
},
{
"type": "numeric",
"content": "11%",
"sortBy": "11"
}
]
},
{
"cells": [
{
"content": "Manchego"
},
{
"content": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets"
},
{
"content": "Spain"
},
{
"type": "numeric",
"content": "25%",
"sortBy": "25"
}
]
},
{
"cells": [
{
"content": "Parmigiano-Reggiano"
},
{
"content": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months."
},
{
"content": "Italy"
},
{
"type": "numeric",
"content": "29.7%",
"sortBy": "29.7"
}
]
},
{
"cells": [
{
"content": "Cashel Blue"
},
{
"content": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
},
{
"content": "Ireland"
},
{
"type": "numeric",
"content": "45%",
"sortBy": "45"
}
]
},
{
"cells": [
{
"content": "Stilton"
},
{
"content": "Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "35%",
"sortBy": "35"
}
]
},
{
"cells": [
{
"content": "Shropshire Blue"
},
{
"content": "Shropshire Blue is a cow's milk cheese made in the United Kingdon"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%",
"sortBy": "48"
}
]
},
{
"cells": [
{
"content": "Wensleydale"
},
{
"content": "Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term \"Yorkshire Wensleydale\" can only be used for cheese that is made in Wensleydale"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "32%",
"sortBy": "32"
}
]
},
{
"cells": [
{
"content": "Cornish Yarg"
},
{
"content": "Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "30%",
"sortBy": "30"
}
]
},
{
"cells": [
{
"content": "Stinking Bishop"
},
{
"content": "Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%",
"sortBy": "48"
}
]
}
]
}
]
}