<div class="atm-table">
<div class="table-view">
<table>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<th class="head">Header A</th>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<th class="head">Header B</th>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<th class="head">Header C</th>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>
</div>
<div class="list-view">
<ul>
<li>
<span>Header A</span>
<dl>
<dt>Header 1</dt>
<dd>Row 1 Col 1</dd>
<dt>Header 2</dt>
<dd>Row 1 Col 2</dd>
<dt>Header 3</dt>
<dd>Row 1 Col 3</dd>
</dl>
</li>
<li>
<span>Header B</span>
<dl>
<dt>Header 1</dt>
<dd>Row 2 Col 1</dd>
<dt>Header 2</dt>
<dd>Row 2 Col 2</dd>
<dt>Header 3</dt>
<dd>Row 2 Col 3</dd>
</dl>
</li>
<li>
<span>Header C</span>
<dl>
<dt>Header 1</dt>
<dd>Row 3 Col 1</dd>
<dt>Header 2</dt>
<dd>Row 3 Col 2</dd>
<dt>Header 3</dt>
<dd>Row 3 Col 3</dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="atm-table">
<div class="table-view">
<table>
{{#if headerRow}}
<tr>
{{#if headerCol}}
<th></th>
{{/if}}
{{#each headerRow}}
<th {{attributes}}>{{text}}</th>
{{/each}}
</tr>
{{/if}}
{{#each rows}}
<tr>
{{#if ../headerCol}}
{{#with (lookup ../headerCol @index) as |header|}}
<th class="head" {{header.attributes}}>{{header.text}}</th>
{{/with}}
{{/if}}
{{#each cells}}
<td {{{attributes}}}>{{text}}</td>
{{/each}}
</tr>
{{/each}}
</table>
</div>
<div class="list-view">
<ul>
{{#each rows}}
<li>
{{#with (lookup ../headerCol @index) as |header|}}
<span>{{header.text}}</span>
{{/with}}
<dl>
{{#each cells}}
{{#if ../../headerRow}}
{{#with (lookup ../../headerRow @index) as |header|}}
<dt {{header.attributes}}>{{header.text}}</dt>
{{/with}}
{{/if}}
<dd>{{text}}</dd>
{{/each}}
</dl>
</li>
{{/each}}
</ul>
</div>
</div>
{
"rows": [
{
"cells": [
{
"text": "Row 1 Col 1"
},
{
"text": "Row 1 Col 2"
},
{
"text": "Row 1 Col 3"
}
]
},
{
"cells": [
{
"text": "Row 2 Col 1"
},
{
"text": "Row 2 Col 2"
},
{
"text": "Row 2 Col 3"
}
]
},
{
"cells": [
{
"text": "Row 3 Col 1"
},
{
"text": "Row 3 Col 2"
},
{
"text": "Row 3 Col 3"
}
]
}
],
"headerRow": [
{
"text": "Header 1"
},
{
"text": "Header 2"
},
{
"text": "Header 3"
}
],
"headerCol": [
{
"text": "Header A"
},
{
"text": "Header B"
},
{
"text": "Header C"
}
]
}
.atm-table {
.table-view {
@apply hidden md:block w-full;
table {
@apply w-full;
@apply bg-white;
@apply border-solid border-l border-t border-shade;
tr {
th {
@apply bg-cta text-white;
@apply p-4;
@apply font-normal text-left;
@apply border-solid border-r border-b border-shade;
}
.head {
@apply align-top;
@apply bg-cta-100 text-gray;
@apply border-solid border-r border-b border-shade;
}
td {
@apply p-4;
@apply align-top;
@apply border-solid border-r border-b border-shade;
}
&:hover {
@apply cursor-pointer;
@apply bg-cta-100;
}
}
}
}
.list-view {
@apply md:hidden;
ul {
li {
span {
@apply mb-4;
@apply block;
@apply text-left;
}
&:not(:last-child) {
@apply mb-4;
}
dl {
@apply flex flex-wrap;
dt {
@apply p-4;
@apply w-2/6;
@apply font-normal text-left;
@apply bg-cta text-white;
@apply border-solid border-b border-l border-shade;
@apply first:border-t;
}
dd {
@apply p-4;
@apply w-4/6;
@apply border-solid border-t border-l border-r border-shade;
@apply last:border-b;
}
}
}
}
}
}
No notes defined.