This component is provided to illustrate how tables within WYSIWYG areas will display.
Any <table> element within a container with the class of uol-rich-text will have the styling applied.
{% for table in tables %}
<table>
{% if table.caption %}<caption>{{ table.caption }}</caption>{% endif %}
{% if table.headings.length > 0 %}
<thead>
<tr>
{% for heading in table.headings%}
<th>{{ 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>
{{ cell.content | safe }}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
{% endfor %}
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Country of origin</th>
<th>Fat percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cheddar
</td>
<td>
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>
UK
</td>
<td>
16%
</td>
</tr>
<tr>
<td>
Brie
</td>
<td>
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>
France
</td>
<td>
28%
</td>
</tr>
<tr>
<td>
Edam
</td>
<td>
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>
Netherlands
</td>
<td>
11%
</td>
</tr>
<tr>
<td>
Manchego
</td>
<td>
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>
Spain
</td>
<td>
25%
</td>
</tr>
<tr>
<td>
Parmigiano-Reggiano
</td>
<td>
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>
Italy
</td>
<td>
29.7%
</td>
</tr>
<tr>
<td>
Cashel Blue
</td>
<td>
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>
Ireland
</td>
<td>
45%
</td>
</tr>
<tr>
<td>
Stilton
</td>
<td>
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>
Uk
</td>
<td>
35%
</td>
</tr>
<tr>
<td>
Shropshire Blue
</td>
<td>
Shropshire Blue is a cow's milk cheese made in the United Kingdon
</td>
<td>
Uk
</td>
<td>
48%
</td>
</tr>
<tr>
<td>
Wensleydale
</td>
<td>
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>
Uk
</td>
<td>
32%
</td>
</tr>
<tr>
<td>
Cornish Yarg
</td>
<td>
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>
Uk
</td>
<td>
30%
</td>
</tr>
<tr>
<td>
Stinking Bishop
</td>
<td>
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>
Uk
</td>
<td>
48%
</td>
</tr>
</tbody>
</table>
$tableScrollIndicatorWidth: $spacing-7;
$stackable-table-breakpoint: "uol-media-xs";
.uol-table-outer {
position: relative;
overflow: hidden;
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: $tableScrollIndicatorWidth;
transition: all 0.7s ease;
}
&::before {
left: -#{$tableScrollIndicatorWidth};
background: linear-gradient(to left, rgba(95, 87, 84, 0), rgba(95, 87, 84, 0.2) 67%, rgba(95, 87, 84, 0.3) 100%);
z-index: 2;
}
&::after {
right: -#{$tableScrollIndicatorWidth};
background: linear-gradient(to right, rgba(95, 87, 84, 0), rgba(95, 87, 84, 0.2) 67%, rgba(95, 87, 84, 0.3) 100%);
}
&.scrollable-left {
&::before {
left: 0;
}
}
&.scrollable-right {
&::after {
right: 0;
}
}
}
.uol-table-container {
position: relative;
max-width: 100%;
overflow-x: auto;
}
.uol-rich-text table {
@include font-size-responsive(1.125rem);
border-collapse: collapse;
margin-bottom: $spacing-4;
font-variant-numeric: lining-nums;
caption {
@extend %text-size-heading-5;
font-weight: $font-weight-bold--sans-serif;
margin-bottom: $spacing-4;
text-align: left;
@include media(">#{$stackable-table-breakpoint}") {
margin-bottom: 0;
}
}
thead {
th {
font-weight: $font-weight-bold--sans-serif;
color: $color-font--dark;
border-bottom: 2px solid $color-border;
}
}
th,
td {
padding: $spacing-4 $spacing-6 $spacing-4 0;
}
th {
text-align: left;
@include media(">#{$stackable-table-breakpoint}") {
&[scope=row] {
border-bottom: 1px solid $color-border--light;
}
&:empty {
border-bottom: none;
}
}
}
td {
vertical-align: top;
border-bottom: 1px solid $color-border--light;
}
}
/*
* Stackable tables
*/
// uol-table--stacked class added with javascript
.uol-table--stacked {
@include media("<=#{$stackable-table-breakpoint}") {
border-collapse: collapse;
border-top: 0.123rem solid $color-border;
min-width: 100%;
thead {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
left: -9999px;
}
tbody {
tr {
display: block;
margin-bottom: 0;
// padding: 16px 16px 8px;
border-bottom: 1px solid $color-border--light;
&:first-of-type {
border-top: 1px solid $color-border--light;
}
}
td {
display: block;
color: $color-font--dark;
padding: $spacing-4 0 $spacing-2;
border-bottom: none;
}
}
}
}
.uol-table__pseudo-th {
display: block;
font-weight: $font-weight-bold--sans-serif;
color: $color-font--dark;
margin-bottom: 4px;
@include media(">#{$stackable-table-breakpoint}") {
display: none;
}
}
/*
* Handle tables that are wider than their containers
*/
export const richTextTablesScrollable = () => {
// Get the tables
const tables = document.querySelectorAll('.uol-rich-text table')
tables.forEach( (table) => {
// Wrap tables
table.outerHTML = `<div class="uol-table-outer"><div class="uol-table-container">${table.outerHTML}</div></div>`
})
const tableContainers = document.querySelectorAll('.uol-table-container')
const tablesScrollIndicator = () => {
tableContainers.forEach( (tableContainer) => {
let containerWidth = tableContainer.clientWidth
let tableWidth = tableContainer.querySelector('table').clientWidth
/*
* Visually indicate the "scrollability" of a table
*/
// if scrollable
if (tableWidth > containerWidth) {
tableContainer.parentNode.classList.add('scrollable-right')
tableContainer.querySelector('table').setAttribute('tabIndex', 0)
} else {
tableContainer.parentNode.classList.remove('scrollable-right')
tableContainer.querySelector('table').removeAttribute('tabIndex')
}
tableContainer.addEventListener('scroll', (e) => {
let scrollLeft = e.target.scrollLeft
// if Right scrollable
let maxScroll = tableWidth - containerWidth;
if (maxScroll !== scrollLeft) {
tableContainer.parentNode.classList.add('scrollable-right')
}
// if Left scrollable
if (scrollLeft > 0) {
tableContainer.parentNode.classList.add('scrollable-left')
} else {
tableContainer.parentNode.classList.remove('scrollable-left')
}
// Fully right scrolled
if (maxScroll == scrollLeft) {
tableContainer.parentNode.classList.remove('scrollable-right')
}
});
})
}
window.onresize = tablesScrollIndicator;
const resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
}
export const richTextTablesStackable = () => {
// Config
const
stackableTableClass = '.uol-rich-text table',
stackableTablePseudoThClass = 'uol-table__pseudo-th',
stackedTableClass = 'uol-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) => {
// If there is a th and it has an innerText
if (ths.item(i) && ths.item(i).innerText) {
cell.innerHTML = `
<span
class="${stackableTablePseudoThClass}"
aria-hidden="true">
${ths.item(i).innerText}
</span>
${cell.innerHTML}
`
}
})
})
table.classList.add(stackedTableClass)
})
}
{
"tables": [
{
"headings": [
{
"label": "Name"
},
{
"label": "Description"
},
{
"label": "Country of origin"
},
{
"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"
},
{
"content": "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"
},
{
"content": "28%"
}
]
},
{
"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"
},
{
"content": "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"
},
{
"content": "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"
},
{
"content": "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"
},
{
"content": "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"
},
{
"content": "35%"
}
]
},
{
"cells": [
{
"content": "Shropshire Blue"
},
{
"content": "Shropshire Blue is a cow's milk cheese made in the United Kingdon"
},
{
"content": "Uk"
},
{
"content": "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"
},
{
"content": "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"
},
{
"content": "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"
},
{
"content": "48%"
}
]
}
]
}
]
}