41 lines
820 B
Vue
41 lines
820 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
headings: string[];
|
|
data: string[][];
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<table class="data-table">
|
|
<thead class="data-table__head">
|
|
<tr class="data-table__row">
|
|
<th
|
|
class="data-table__heading"
|
|
v-for="(heading, idx) in headings"
|
|
:key="idx"
|
|
>
|
|
{{ $t(heading) }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="data-table__body">
|
|
<tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
|
|
<td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
|
|
{{ $t(cell) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.data-table {
|
|
table-layout: fixed;
|
|
|
|
&__cell:first-child {
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style>
|