43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
headers: {
|
|
type: Array as () => string[],
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
rows: {
|
|
type: Array as () => string[][],
|
|
required: true,
|
|
default: () => []
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<table class="min-w-full border-collapse mt-4 bg-white shadow rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-100 text-left">
|
|
<tr>
|
|
<th v-for="(header, i) in headers" :key="i" class="px-4 py-2 font-medium border-b">
|
|
{{ header }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(row, rowIndex) in rows"
|
|
:key="rowIndex"
|
|
:class="[
|
|
'hover:bg-gray-50',
|
|
row.isSubRow ? 'text-xs bg-gray-100' : '' // Применяем text-xs только для подстрок
|
|
]"
|
|
>
|
|
<td
|
|
v-for="(cell, cellIndex) in row"
|
|
:key="cellIndex"
|
|
class="px-4 py-2 border-b"
|
|
>
|
|
{{ cell }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template> |