95 lines
1.8 KiB
Vue
95 lines
1.8 KiB
Vue
<template>
|
|
<table class="datatable">
|
|
<thead class="datatable__head">
|
|
<tr class="datatable__row datatable__row--head">
|
|
<th
|
|
class="datatable__heading"
|
|
v-for="(header, idx) in dataset.headers"
|
|
:key="idx"
|
|
>
|
|
{{ header }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="datatable__body">
|
|
<tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
|
|
<td
|
|
class="datatable__cell"
|
|
v-for="(cell, idx) in row"
|
|
:key="idx"
|
|
:colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
|
|
>
|
|
{{ cell }}
|
|
</td>
|
|
<td
|
|
v-if="isHexValue(row[1])"
|
|
class="datatable__cell--colorpick"
|
|
:style="`background-color: ${row[1]}`"
|
|
></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DataTable",
|
|
props: {
|
|
dataset: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
methods: {
|
|
isHexValue(value) {
|
|
return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@scss/_variables.scss";
|
|
|
|
.datatable {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
|
|
&__heading,
|
|
&__cell {
|
|
padding: 0.25em 0.5em;
|
|
|
|
@media (min-width: 35em) {
|
|
padding: 0.5em 1em;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
.datatable__row {
|
|
background-color: rgba($bg-color-dark, 0.7);
|
|
|
|
&:nth-child(odd) {
|
|
background-color: rgba(lighten($bg-color-dark, 15%), 0.7);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__row {
|
|
&--head {
|
|
background-color: $bg-color-light;
|
|
color: $copy-color;
|
|
}
|
|
}
|
|
|
|
&__cell {
|
|
&:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
&--colorpick {
|
|
margin-top: 0.1em;
|
|
border: 0.1em solid #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|