<link media="screen" rel="stylesheet" href="/assets/themes/default/css/table.css?cb=">
<div class="table">
<h2 class="table__title">Table Header</h2>
<table class="table__content">
<thead>
<tr>
<th>
id</th>
<th>
password</th>
<th>
email</th>
<th>
createdAt</th>
<th>
category</th>
</tr>
</thead>
<tbody>
<tr>
<td>
462.00
</td>
<td>
40.00
</td>
<td>
860.00
</td>
<td>
268.00
</td>
<td>
984.00
</td>
</tr>
<tr>
<td>
206.00
</td>
<td>
988.00
</td>
<td>
251.00
</td>
<td>
340.00
</td>
<td>
618.00
</td>
</tr>
<tr>
<td>
798.00
</td>
<td>
19.00
</td>
<td>
223.00
</td>
<td>
275.00
</td>
<td>
631.00
</td>
</tr>
<tr>
<td>
382.00
</td>
<td>
202.00
</td>
<td>
292.00
</td>
<td>
795.00
</td>
<td>
287.00
</td>
</tr>
<tr>
<td>
660.00
</td>
<td>
376.00
</td>
<td>
189.00
</td>
<td>
455.00
</td>
<td>
764.00
</td>
</tr>
<tr>
<td>
392.00
</td>
<td>
861.00
</td>
<td>
869.00
</td>
<td>
393.00
</td>
<td>
564.00
</td>
</tr>
<tr>
<td>
81.00
</td>
<td>
973.00
</td>
<td>
379.00
</td>
<td>
111.00
</td>
<td>
338.00
</td>
</tr>
<tr>
<td>
780.00
</td>
<td>
469.00
</td>
<td>
129.00
</td>
<td>
465.00
</td>
<td>
306.00
</td>
</tr>
<tr>
<td>
71.00
</td>
<td>
92.00
</td>
<td>
339.00
</td>
<td>
140.00
</td>
<td>
858.00
</td>
</tr>
<tr>
<td>
936.00
</td>
<td>
718.00
</td>
<td>
649.00
</td>
<td>
951.00
</td>
<td>
66.00
</td>
</tr>
<tbody>
</table>
</div>
{{#if firstInstance}}
<link media="screen" rel="stylesheet" href="/assets/themes/{{theme}}/css/table.css?cb={{cacheBuster}}">
{{/if}}
<div class="table">
{{#if title}}
<h2 class="table__title">{{title}}</h2>
{{/if}}
<table class="table__content">
{{#if headerRow}}
<thead>
<tr>
{{#each headerRow.columns}}
<th>
{{{ value }}}</th>
{{/each}}
</tr>
</thead>
{{/if}}
<tbody>
{{#each rows}}
<tr>
{{#each columns}}
<td>
{{ value }}
</td>
{{/each}}
</tr>
{{/each}}
<tbody>
</table>
</div>
{
"theme": "default",
"firstInstance": true,
"title": "Table Header",
"headerRow": {
"columns": [
{
"value": "id"
},
{
"value": "password"
},
{
"value": "email"
},
{
"value": "createdAt"
},
{
"value": "category"
}
]
},
"rows": [
{
"columns": [
{
"value": "462.00"
},
{
"value": "40.00"
},
{
"value": "860.00"
},
{
"value": "268.00"
},
{
"value": "984.00"
}
]
},
{
"columns": [
{
"value": "206.00"
},
{
"value": "988.00"
},
{
"value": "251.00"
},
{
"value": "340.00"
},
{
"value": "618.00"
}
]
},
{
"columns": [
{
"value": "798.00"
},
{
"value": "19.00"
},
{
"value": "223.00"
},
{
"value": "275.00"
},
{
"value": "631.00"
}
]
},
{
"columns": [
{
"value": "382.00"
},
{
"value": "202.00"
},
{
"value": "292.00"
},
{
"value": "795.00"
},
{
"value": "287.00"
}
]
},
{
"columns": [
{
"value": "660.00"
},
{
"value": "376.00"
},
{
"value": "189.00"
},
{
"value": "455.00"
},
{
"value": "764.00"
}
]
},
{
"columns": [
{
"value": "392.00"
},
{
"value": "861.00"
},
{
"value": "869.00"
},
{
"value": "393.00"
},
{
"value": "564.00"
}
]
},
{
"columns": [
{
"value": "81.00"
},
{
"value": "973.00"
},
{
"value": "379.00"
},
{
"value": "111.00"
},
{
"value": "338.00"
}
]
},
{
"columns": [
{
"value": "780.00"
},
{
"value": "469.00"
},
{
"value": "129.00"
},
{
"value": "465.00"
},
{
"value": "306.00"
}
]
},
{
"columns": [
{
"value": "71.00"
},
{
"value": "92.00"
},
{
"value": "339.00"
},
{
"value": "140.00"
},
{
"value": "858.00"
}
]
},
{
"columns": [
{
"value": "936.00"
},
{
"value": "718.00"
},
{
"value": "649.00"
},
{
"value": "951.00"
},
{
"value": "66.00"
}
]
}
]
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.table {
@extend %spacer-large;
.grid-layout & {
margin-bottom: 0;
}
&__title {
@extend %heading02;
}
}