<div class="dashboard-table ">
<div class="dashboard-table__header">
<h5 class="heading heading--fifth-level heading--red dashboard-table__title">
Recente bestellingen
</h5>
<a href="#" class="link--red dashboard-table__link">
Alles weergeven
</a>
</div>
<div class="dashboard-table__content">
<table class="table dashboard-table__table" tabindex="0" role="table">
<caption class="table__caption">
This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
</caption>
<thead>
<tr role="row">
<th class="" scope="col" role="columnheader">
Bestelling #
</th>
<th class="" scope="col" role="columnheader">
Datum
</th>
<th class="" scope="col" role="columnheader">
Verzonden aan
</th>
<th class="" scope="col" role="columnheader">
Bestelling
</th>
<th class="" scope="col" role="columnheader">
Totaal
</th>
<th class="" scope="col" role="columnheader">
Status
</th>
<th class="" scope="col" role="columnheader">
<span class="table__visually-hidden">
Action
</span>
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Order #:" role="gridcell">
<a href="#">000000000123</a>
</td>
<td class="" data-th="Date:" role="gridcell">
27/07/2020
</td>
<td class="" data-th="Ship To:" role="gridcell">
Vechtsportonline
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
€ 125,-
</td>
<td class="" data-th="Status:" role="gridcell">
<span class="dashboard-table__status--orange"> Verwerken </span>
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#" class="link--red">Bekijken</a>
</td>
</tr>
<tr role="row">
<td class="" data-th="Order #:" role="gridcell">
<a href="#">000000000124</a>
</td>
<td class="" data-th="Date:" role="gridcell">
24/07/2020
</td>
<td class="" data-th="Ship To:" role="gridcell">
Klaas Akkerman
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
€ 64,49
</td>
<td class="" data-th="Status:" role="gridcell">
<span class="dashboard-table__status--green"> Verzonden </span>
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#" class="link--red">Bekijken</a>
</td>
</tr>
<tr role="row">
<td class="" data-th="Order #:" role="gridcell">
<a href="#">000000000125</a>
</td>
<td class="" data-th="Date:" role="gridcell">
22/07/2020
</td>
<td class="" data-th="Ship To:" role="gridcell">
Nick van Bruggen
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
€ 1299,99
</td>
<td class="" data-th="Status:" role="gridcell">
<span class="dashboard-table__status--green"> Verzonden </span>
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#" class="link--red">Bekijken</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dashboard-table {{ class }}">
{{#if title }}
<div class="dashboard-table__header">
<h5 class="heading heading--fifth-level heading--red dashboard-table__title">
{{ title }}
</h5>
<a href="#" class="link--red dashboard-table__link">
{{ link }}
</a>
</div>
{{/if }}
<div class="dashboard-table__content">
{{ render '@table' table }}
</div>
</div>
{
"title": "Recente bestellingen",
"link": "Alles weergeven",
"table": {
"captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
"class": "dashboard-table__table",
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Bestelling #"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Datum"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Verzonden aan"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Bestelling"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Totaal"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Status"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Action",
"contentVisuallyHidden": true
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
"content": "<a href=\"#\">000000000123</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
"content": "27/07/2020"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Vechtsportonline"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "€ 125,-"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "<span class=\"dashboard-table__status--orange\"> Verwerken </span>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\" class=\"link--red\">Bekijken</a>"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
"content": "<a href=\"#\">000000000124</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
"content": "24/07/2020"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Klaas Akkerman"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "€ 64,49"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "<span class=\"dashboard-table__status--green\"> Verzonden </span>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\" class=\"link--red\">Bekijken</a>"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order #:\" role=\"gridcell\"",
"content": "<a href=\"#\">000000000125</a>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Date:\" role=\"gridcell\"",
"content": "22/07/2020"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Nick van Bruggen"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "€ 1299,99"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "<span class=\"dashboard-table__status--green\"> Verzonden </span>"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\" class=\"link--red\">Bekijken</a>"
}
]
}
]
}
]
}
}
$dashboard-table-margin: $spacer--medium !default;
.dashboard-table {
overflow: hidden;
&--tab {
padding: 10px;
margin-bottom: $dashboard-table-margin;
border: 1px solid $gray;
.dashboard-table__content {
margin-bottom: 0;
}
}
&__header {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
margin-bottom: $dashboard-table-margin;
padding-bottom: 10px;
border-bottom: 1px solid $gray;
}
&__content {
margin-bottom: $dashboard-table-margin;
overflow-x: auto;
}
&__table {
margin: 0;
}
&__link {
display: inline-flex;
}
&__spacer {
margin-right: $spacer;
}
&__title {
margin-bottom: 0;
margin-right: $dashboard-table-margin;
}
&__status {
&--red {
color: $red;
}
&--orange {
color: $orange;
}
&--green {
color: $green;
}
}
}
There are no notes for this item.