Made the buttons and columndefs datatables JSON dynamically driven from the DB.

app/Livewire/ShowReports.php

@@ -12,6 +12,8 @@ class ShowReports extends Component
     public $datatableName;
     public $datatableColumnsConfig;
     public $datatableHeadersConfig;
+    public $datatableButtonsConfig;
+    public $datatableColumnDefsConfig;
 
 
     public function mount($datatableName)
@@ -29,6 +31,8 @@ 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);
+        $this->datatableColumnDefsConfig = json_decode($datatableConfigQuery->column_defs, true);
+        $this->datatableButtonsConfig = json_decode($datatableConfigQuery->buttons, true);
     }
 
     public function render()

database/migrations/2025_07_24_165629_add_buttons_and_columndefs_columns_to_datatables_table.php

@@ -0,0 +1,49 @@
+<?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) {
+            // Drop 5 old columns
+            $table->dropColumn(['enable_copy', 'enable_csv', 'enable_excel', 'enable_pdf', 'enable_print']);
+
+            // Add new JSON columns for buttons config
+            $buttons = [
+                ['extend' => 'copyHtml5',  'className' => 'dt-button'],
+                ['extend' => 'csvHtml5',   'className' => 'dt-button'],
+                ['extend' => 'excelHtml5', 'className' => 'dt-button'],
+                ['extend' => 'pdfHtml5',   'className' => 'dt-button'],
+                ['extend' => 'print',      'className' => 'dt-button'],
+            ];
+            $table->json('buttons')->default(json_encode($buttons));
+
+            $columnDefs = [
+            ['responsivePriority' => 1, 'targets' => 1],
+            ['responsivePriority' => 2, 'targets' => -1],
+            ['visible' => false, 'targets' => 0]
+        ];
+
+            $table->json('column_defs')->default(json_encode($columnDefs));
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+
+            Schema::table('datatables', function (Blueprint $table) {
+                // Drop the new JSON columns
+                $table->dropColumn(['buttons', 'column_defs']);
+            });
+    }
+};

resources/js/datatables.js

@@ -25,6 +25,8 @@ function initializeDataTable() {
     var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
     var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
     var dataTableHeadersConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableHeadersConfig);
+    var dataTablesButtonsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableButtonsConfig);
+    var dataTablesColumnDefsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnDefsConfig);
 
 
     //Set up any action columns
@@ -130,21 +132,11 @@ function initializeDataTable() {
         },
         columns: dataTableColumnsConfig,
         dom: 'lBfrtip',
-        buttons: [
-            { extend: 'copyHtml5', className: 'dt-button' },
-            { extend: 'csvHtml5', className: 'dt-button' },
-            { extend: 'excelHtml5', className: 'dt-button' },
-            { extend: 'pdfHtml5', className: 'dt-button' },
-            { extend: 'print', className: 'dt-button' },
-        ],
+        buttons: dataTablesButtonsConfig,
         layout: {
             topStart: 'buttons'
         },
-        columnDefs: [
-            { responsivePriority: 1, targets: 1 },
-            { responsivePriority: 2, targets: -1 },
-            {visible:false, targets:0}
-        ]
+        columnDefs: dataTablesColumnDefsConfig
     });
 }
 document.addEventListener('livewire:init', function () {

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

@@ -3,7 +3,9 @@
     <div id="datatable-config"
          data-datatable-name="{{ $datatableName }}"
          data-datatable-columns-config='@json($datatableColumnsConfig)'
-         data-datatable-headers-config='@json($datatableHeadersConfig)'>
+         data-datatable-headers-config='@json($datatableHeadersConfig)'
+         data-datatable-buttons-config='@json($datatableButtonsConfig)'
+         data-datatable-column-defs-config='@json($datatableColumnDefsConfig)'>
     </div>
 
     <table id="{{$datatableName}}-table" class="bg-white border border-gray-300">