<div class="dashboard-table ">
<div class="dashboard-table__header">
<h2 class="dashboard-table__title">
Recent Orders
</h2>
<a class="link dashboard-table__link" href="" title="View All">
View All
</a>
</div>
<div class="dashboard-table__content">
<table class="table margin-0" 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">
Order #
</th>
<th class="" scope="col" role="columnheader">
Date
</th>
<th class="" scope="col" role="columnheader">
Ship To
</th>
<th class="" scope="col" role="columnheader">
Order
</th>
<th class="" scope="col" role="columnheader">
Total
</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">
6/23/12
</td>
<td class="" data-th="Ship To:" role="gridcell">
Store Alpaca
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
$ 123,12
</td>
<td class="" data-th="Status:" role="gridcell">
Pending
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#">View Order</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">
8/23/12
</td>
<td class="" data-th="Ship To:" role="gridcell">
Store Alpaca2
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
$ 1232,12
</td>
<td class="" data-th="Status:" role="gridcell">
Pending
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#">View Order</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">
2/23/12
</td>
<td class="" data-th="Ship To:" role="gridcell">
Store Alpaca3
</td>
<td class="" data-th="Order:" role="gridcell">
Production Facility
</td>
<td class="" data-th="Total:" role="gridcell">
$ 1123,12
</td>
<td class="" data-th="Status:" role="gridcell">
Done
</td>
<td class="" data-th="Action:" role="gridcell">
<a href="#">View Order</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dashboard-table {{ class }}">
{{#if title }}
<div class="dashboard-table__header">
{{ render '@heading' title }}
{{#if link}}
{{ render '@link' link }}
{{/if}}
</div>
{{/if }}
<div class="dashboard-table__content">
{{ render '@table' table }}
</div>
</div>
{
"title": {
"tag": "h2",
"class": "dashboard-table__title",
"text": "Recent Orders"
},
"link": {
"text": "View All",
"class": "dashboard-table__link"
},
"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": "margin-0",
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Order #"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Date"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Ship To"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Order"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Total"
},
{
"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": "6/23/12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Store Alpaca"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "$ 123,12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "Pending"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\">View Order</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": "8/23/12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Store Alpaca2"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "$ 1232,12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "Pending"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\">View Order</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": "2/23/12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Ship To:\" role=\"gridcell\"",
"content": "Store Alpaca3"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Order:\" role=\"gridcell\"",
"content": "Production Facility"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Total:\" role=\"gridcell\"",
"content": "$ 1123,12"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Status:\" role=\"gridcell\"",
"content": "Done"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action:\" role=\"gridcell\"",
"content": "<a href=\"#\">View Order</a>"
}
]
}
]
}
]
}
}
$dashboard-table__header-margin : 0 0 $spacer--semi-medium !default;
$dashboard-table__header-padding : $spacer--medium !default;
$dashboard-table__header-background : $bg-color-secondary !default;
$dashboard-table__header-border : $border-secondary !default;
$dashboard-table__header-border-width : 0 0 $border-width-secondary !default;
$dashboard-table__content-margin : 0 0 $spacer--semi-medium !default;
$dashboard-table__title-margin : 0 $spacer--medium 0 0 !default;
$dashboard-table__title-font-family : $font-family-base !default;
$dashboard-table__title-font-size : $font-size-large !default;
$dashboard-table__title-font-weight : $font-weight-bold !default;
$dashboard-table__title-text-transform : none !default;
$dashboard-table__link-font-size : $font-size-medium !default;
$dashboard-table__link-font-weight : $font-weight-medium !default;
$dashboard-table__text-decoration : underline !default;
@import 'table-variables';
.dashboard-table {
overflow: hidden;
&__header {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin: $dashboard-table__header-margin;
padding: $dashboard-table__header-padding;
background: $dashboard-table__header-background;
border: $dashboard-table__header-border;
border-width: $dashboard-table__header-border-width;
}
&__content {
margin: $dashboard-table__content-margin;
overflow-x: auto;
}
&__title {
margin: $dashboard-table__title-margin;
font-family: $dashboard-table__title-font-family;
font-size: $dashboard-table__title-font-size;
font-weight: $dashboard-table__title-font-weight;
text-transform: $dashboard-table__title-text-transform;
}
&__link {
display: inline-flex;
font-size: $dashboard-table__link-font-size;
font-weight: $dashboard-table__link-font-weight;
text-decoration: $dashboard-table__text-decoration;
}
}
There are no notes for this item.