<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>