@props([
    'data' => [
        [
            'col1' => 1,
            'col2' => 2,
            'col3' => 3,
        ],
    ],
    'showIndex' => false,
])

@php
    // we derived the table heading based on each object key
    $columns = count($data) > 0 ? array_keys($data[0]) : [];
@endphp

<table class="w-full text-sm text-left text-gray-700 border-collapse">
    <thead class="bg-gray-100">
        <tr>
            @if ($showIndex)
                <th class="px-4 py-2 border">Bil</th>
            @endif

            @foreach ($columns as $column)
                <th class="px-4 py-2 border">{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $index => $row)
            <tr>
                @if ($showIndex)
                    <td class="px-4 py-2 border">{{ $index + 1 }}</td>
                @endif

                @foreach ($columns as $column)
                    <td class="px-4 py-2 border">{{ $row[$column] }}</td>
                @endforeach
            </tr>
        @endforeach
    </tbody>
</table>