@props([
    'headers' => [],
    'id' => 'datatable',
    'route' => '',
])
<div class="overflow-x-auto">
<table id="{{ $id }}" {{ $attributes->merge(['class' => 'min-w-full divide-y divide-gray-200 dark:divide-gray-700']) }}>
    <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
            @foreach($headers as $header)
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    {{ $header }}
                </th>
            @endforeach
        </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
    </tbody>
</table>
</div>
@include('partials.datatable-script', ['id' => $id, 'route' => $route, 'headers' => $headers])