Teren-app/resources/js/Components/BasicTable.vue
Simon Pocrnjič 90a5858320 first commit
2024-10-28 21:08:16 +01:00

27 lines
1.0 KiB
Vue

<script setup>
defineProps({
title: String,
description: String,
tableHead: Array,
tableBody: Array
});
</script>
<template>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
<th scope="col" class="px-6 py-3 font-bold" v-for="h in tableHead">{{ h.data }}</th>
</thead>
<tbody>
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-100 hover:bg-gray-100 even:dark:bg-gray-800 border-b dark:border-gray-700" v-for="row in tableBody">
<th scope="row" class="px-6 py-4 font-light text-gray-900 whitespace-nowrap dark:text-white" v-for="col in row.cols">
<a v-if="col.link !== undefined" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
<span v-else>{{ col.data }}</span>
</th>
</tr>
</tbody>
</table>
</div>
</template>