Added support for dynamic column headers

database/migrations/2025_04_12_024027_add_column_headers_column_to_datatables_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('datatables', function (Blueprint $table) {
+            $table->json('column_headers');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('datatables', function (Blueprint $table) {
+            $table->dropColumn('column_headers');
+        });
+    }
+};

resources/js/datatables.js

@@ -26,6 +26,8 @@ document.addEventListener('livewire:init', function () {
             responsive: true,
             processing: true,
             serverSide: true,
+            orderCellsTop: true, // Allows inputs in the header
+            fixedHeader: true,   // Optional: keeps header fixed while scrolling
             ajax: {
                 url: '/api/report-data/' + dataTableName, // Dynamically construct the URL with the datatable name
                 type: 'GET', // HTTP method

resources/views/livewire/show-reports.blade.php

@@ -12,6 +12,12 @@
             <th wire:key="{{$headerConfig['header']}}" class="border border-gray-300 px-4 py-2">{{$headerConfig['header']}}</th>
         @endforeach
         </tr>
+
+        <tr>
+            @foreach($datatableHeadersConfig as $headerConfig)
+                <th wire:key="{{$headerConfig['header']}}" class="border border-gray-300 px-4 py-2"><input type="text" id="nameFilter" placeholder="Search Name" /></th>
+            @endforeach
+        </tr>
         </thead>
         <tbody></tbody>