Added support for dynamic column headers

app/Livewire/ShowReports.php

@@ -11,6 +11,7 @@ class ShowReports extends Component
 {
     public $datatableName;
     public $datatableColumnsConfig;
+    public $datatableHeadersConfig;
 
     public function mount($datatableName)
     {
@@ -26,6 +27,7 @@ class ShowReports extends Component
 
         // Store the decoded JSON as a plain array
         $this->datatableColumnsConfig = json_decode($datatableConfigQuery->columns_config, true);
+        $this->datatableHeadersConfig = json_decode($datatableConfigQuery->column_headers, true);
     }
 
     public function render()

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

@@ -7,11 +7,11 @@
 
     <table id="{{$datatableName}}-table" class="bg-white border border-gray-300">
         <thead>
-        <th class="border border-gray-300 px-4 py-2">Name</th>
-        <th class="border border-gray-300 px-4 py-2">Email</th>
-        <th class="border border-gray-300 px-4 py-2">Position</th>
-        <th class="border border-gray-300 px-4 py-2">Office Name</th>
-        <th class="border border-gray-300 px-4 py-2">Office Location</th>
+        <tr>
+        @foreach($datatableHeadersConfig as $headerConfig)
+            <th wire:key="{{$headerConfig['header']}}" class="border border-gray-300 px-4 py-2">{{$headerConfig['header']}}</th>
+        @endforeach
+        </tr>
         </thead>
         <tbody></tbody>