No notes defined.
<!-- Default -->
<div class="tableInset">
<div class="tableInset-table">
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
<tfoot class="table-tfoot">
<tr class="table-tr">
<th class="table-th" scope="col">
Totals
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col" data-column="Total Population">
1819 million
</th>
</tr>
</tfoot>
</table>
</div>
<div class="tableInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<!-- With Backdrop -->
<div class="tableInset has-backdrop">
<div class="tableInset-table">
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<thead class="table-thead">
<tr class="table-tr">
<th class="table-th" scope="col">
Countries
</th>
<th class="table-th" scope="col">
Capital
</th>
<th class="table-th" scope="col">
Languages
</th>
<th class="table-th" scope="col">
Population
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
<tfoot class="table-tfoot">
<tr class="table-tr">
<th class="table-th" scope="col">
Totals
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col">
</th>
<th class="table-th" scope="col" data-column="Total Population">
1819 million
</th>
</tr>
</tfoot>
</table>
</div>
<div class="tableInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tableInset{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}">
<div class="tableInset-table">
{{#table}}
{{render '@table' (contextData '@tableinset' this) merge=true}}
{{/table}}
</div>
{{#description}}
<div class="tableInset-description">
{{{.}}}
</div>
{{/description}}
</div>
/* Default */
{
"table": {
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
},
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"footer": {
"cells": [
{
"data": "Totals"
},
{
"data": null
},
{
"data": null
},
{
"column": "Total Population",
"data": "1819 million"
}
]
}
},
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
}
/* With Backdrop */
{
"table": {
"header": {
"cells": [
{
"data": "Countries"
},
{
"data": "Capital"
},
{
"data": "Languages"
},
{
"data": "Population"
}
]
},
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
],
"footer": {
"cells": [
{
"data": "Totals"
},
{
"data": null
},
{
"data": null
},
{
"column": "Total Population",
"data": "1819 million"
}
]
}
},
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"has-backdrop": true
}
@import "_tableInset.styles";
%tableInset {
&-description {
@extend %richtext;
@include stack-spacing(large);
@include text-size(x-small);
> *:first-child {
@include stack-spacing(0);
}
}
@include only-on-desktop(){
.table {
width: get-columns-width($pageSection_title-columns-span);
margin-left: auto;
margin-right: auto;
}
&-description {
width: get-columns-width($pageSection_title-columns-span);
max-width: 720px;
margin-left: get-columns-indent(2);
}
}
}
%tableInset.has-backdrop {
padding-top: var(--sp-component);
padding-bottom: var(--sp-component);
@include full-width-backdrop();
.table {
&-tr {
@if $table_row_background-color--alt != null {
background-color: $_page-color;
&:nth-child(even) {
background-color: $table_row_background-color;
}
}
}
&-thead + .table-tbody .table-tr {
@if $table_row_background-color--alt != null {
background-color: $table_row_background-color;
&:nth-child(odd) {
background-color: $_page-color;
}
}
}
&[data-highlight*="row"] {
%table-tr {
&:hover {
background-color: $table_background-color--hover;
}
}
}
}
@include only-on-desktop(){
.table {
width: 100%;
}
%tableInset-description {
margin-left: 0;
}
}
}
.tableInset {
&-description {
@extend %tableInset-description;
}
}
%tableInset {
@include stack-spacing(section);
.table {
@include stack-spacing(0);
}
}
.tableInset {
@extend %tableInset;
}