File size: 932 Bytes
0914710 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<template>
<table class="min-w-full divide-y-2 divide-gray-200 border border-gray-200 bg-white text-left p-4">
<caption class="text-2xl bg-blue-100">{{ props.title }}</caption>
<thead class="text-left">
<tr class="text-left">
<th
class="whitespace-nowrap px-1 py-1 text-gray-900 text-left 2md:font-medium 2md:py-2 2md:px-4"
v-for="item in props.header"
:key="item"
>{{ item }}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200" v-for="row in props.rows" :key="props.rows[props.rowKey]">
<tr class="odd:bg-gray-50">
<td v-for="item in row" class="whitespace-nowrap px-1 py-1 text-gray-900 2md:font-medium 2md:py-2 2md:px-4">{{ item }}</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
const props = defineProps<{
header: Array<string>,
rows: Array<Map<string, string>>,
title: string,
rowKey: string
}>()
</script>
|