@props([
    'columns' => [], // [['title' => 'Name', 'key' => 'name', 'sortable' => false],]
    'data' => [], // [['name' => 'John Doe', 'email' => 'john@gmail.com', 'created_at' => '2021-10-10',],]
    'useNumbering' => false,
])

<x-stack class="w-full ring-inset relative overflow-x-auto rounded-lg border-b-[1px]">

    <table
        class="table min-w-full"
        cellpadding="5"
    >
        <thead class="rounded-t-lg">

            <tr
                class="bg-primary-100 text-white [&>th]:leading-4 [&>th]:tracking-wider border text-sm">

                @if ($useNumbering)
                    <th
                        scope="col"
                        class="w-0 min-w-12"
                    >
                        <span>
                            No
                        </span>
                    </th>
                @endif

                @foreach ($columns as $item)
                    <th
                        scope="col"
                        role="header"
                        class="p-3 {{ $item['class'] ?? '' }}"
                    >
                        <x-group
                            class="w-full flex-nowrap"
                            justify="between"
                        >
                            <span
                                class="font-bold flex flex-wrap text-start">{{ $item['title'] }}</span>

                            @if (isset($item['sortable']) && $item['sortable'])
                                <x-button
                                    class="w-fit h-fit bg-transparent text-accent py-0 px-2 hover:text-warning-100"
                                >
                                    <i class="ph-bold ph-caret-up-down text-lg "></i>
                                </x-button>
                            @endif

                        </x-group>
                    </th>
                @endforeach

            </tr>

        </thead>

        <tbody>
            @if (!empty($data) && count($data) > 0)
                @foreach ($data as $item)
                    <tr class="border text-sm">

                        @if ($useNumbering)
                            <td class="table-number text-center border-r-[1px]">
                                {{ $loop->iteration }}.
                            </td>
                        @endif

                        @foreach ($columns as $column)
                            <td
                                role="data"
                                class="p-2"
                            >
                                {!! $item[$column['key']] !!}
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            @else
                <tr>
                    <td
                        class="text-sm w-full h-24 text-center"
                        colspan="{{ count($columns) + ($useNumbering ? 1 : 0) }}"
                    >
                        <span class="w-full text-center text-gray-700">
                            Tidak terdapat data yang cocok/tersedia.
                        </span>
                    </td>
                </tr>
            @endif
        </tbody>

    </table>

</x-stack>