<div class="iastate22-table" role="region" aria-labelledby="caption1" tabindex="0">
<table class="sortable-table">
<caption id="caption1">Table Caption Example</caption>
<thead>
<tr>
<th class="sortable">Long Header Lorem Ipsum Dolor Sit Amet</th>
<th class="sortable">Short Header</th>
<th>Medium Header Lorem Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
<tr>
<td>Aenean massa nulla.</td>
<td>Nulla consequat massa quis enim.</td>
<td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
</tr>
<tr>
<td>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
<td>Aenean commodo ligula eget dolor.</td>
<td>Nulla consequat massa quis enim.</td>
</tr>
</tbody>
</table>
</div>
<div class="iastate22-table" role="region" aria-labelledby="{{ caption_ID }}" tabindex="0">
<table class="sortable-table" >
<caption id="{{ caption_ID }}">{{table_caption}}</caption>
<thead>
<tr>
{% for s_header in sortableHeaders %}
<th class="sortable">{{ s_header }}</th>
{% endfor %}
{% for header in headers %}
<th>{{ header }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% for column in row %}
<td>{{ column }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{
"caption_ID": "caption1",
"table_caption": "Table Caption Example",
"sortableHeaders": [
"Long Header Lorem Ipsum Dolor Sit Amet",
"Short Header"
],
"headers": [
"Medium Header Lorem Ipsum"
],
"rows": [
[
"Donec pede justo, fringilla vel, aliquet nec, vulputate",
"Donec pede justo, fringilla vel, aliquet nec, vulputate",
"Donec pede justo, fringilla vel, aliquet nec, vulputate"
],
[
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
],
[
"Aenean massa nulla.",
"Nulla consequat massa quis enim.",
"Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
],
[
"Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
"Aenean commodo ligula eget dolor.",
"Nulla consequat massa quis enim."
]
]
}
.sortable-table {
thead {
tr {
th {
&.sortable {
position: relative;
cursor: pointer;
&:after {
content: "";
position: absolute;
width: rem(10);
height: rem(10);
right: rem(5);
top: rem(30);
border-right: solid rem(3) $white;
border-bottom: solid rem(3) $white;
transform: rotate(45deg);
}
}
&:last-child {
width: rem(200);
}
}
}
}
tbody {
tr {
td {
&:first-child {
color: $black;
font-weight: 400;
}
}
}
}
}
This is a custom component (the class has been prefaced with .iastate22-[classname]).
index.scss file as @import "../components/table/table";<div class="paragraph-widget paragraph-widget--table">.