@php
  $dtColumns = collect($columns)->map(function ($c) {
      return [
          'data' => $c['key'],
          'name' => $c['key'],
          'orderable' => $c['orderable'] ?? true,
          'searchable' => $c['searchable'] ?? true,
      ];
  })->values();
@endphp

<div class="table-responsive">
  <table id="{{ $id }}" class="table table-striped w-100">
    <thead>
      <tr>
        @foreach($columns as $col)
          <th>{{ $col['label'] }}</th>
        @endforeach
      </tr>
    </thead>
  </table>
</div>

@push('custom-scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  $('#{{ $id }}').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ $ajax }}',
    columns: @json($dtColumns),
  });
});
</script>
@endpush