update

resources/views/components/data-table.blade.php

@@ -0,0 +1,35 @@
+@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