introduce the ability to define which columns the user should be able to hide (MedicOneSystems#286)

Co-authored-by: Herbert Maschke <thyseus@pm.me>

Author: thyseus

README.md

@@ -140,11 +140,13 @@ class ComplexDemoTable extends LivewireDatatable
             Column::name('name')
                 ->defaultSort('asc')
                 ->searchable()
+                ->hideable()
                 ->filterable(),
 
             Column::name('planet.name')
                 ->label('Planet')
                 ->searchable()
+                ->hideable()
                 ->filterable($this->planets),
 
             DateColumn::name('dob')
@@ -175,6 +177,7 @@ class ComplexDemoTable extends LivewireDatatable
 |**round**|[*Integer* $precision (default: 0)]|Rounds value to given precision|```Column::name('age')->round()```|
 |**defaultSort**|[*String* $direction (default: 'desc')]|Marks the column as the default search column|```Column::name('name')->defaultSort('asc')```|
 |**searchable**| |Includes the column in the global search|```Column::name('name')->searchable()```|
+|**hideable**| |The user is able to toggle the visibility of this column|```Column::name('name')->hideable()```|
 |**filterable**|[*Array* $options], [*String* $filterScope]|Adds a filter to the column, according to Column type. If an array of options is passed it wil be used to populate a select input. If the column is a scope column then the name of the filter scope must also be passed|```Column::name('allegiance')->filterable(['Rebellion', 'Empire'])```|
 |**filterOn**|*String/Array* $statement|Allows you to specify a column name or sql statement upon which to perform the filter (must use SQL syntax, not Eloquent eg. ```'users.name'``` instead of ```'user.name'```). Useful if using a callback to modify the displayed values. Can pass a single string or array of strings which will be combined with ```OR```|```Column::callback(['name', 'allegiance'], function ($name, $allegiance) { return "$name is allied to $allegiance"; })->filterable(['Rebellion', 'Empire'])->filterOn('users.allegiance')```|
 |**view**|*String* $viewName| Passes the column value, whole row of values, and any additional parameters to a view template | _(see below)_|

resources/views/livewire/datatables/datatable.blade.php

@@ -57,10 +57,12 @@
         @if($hideable === 'buttons')
         <div class="p-2 grid grid-cols-8 gap-2">
             @foreach($this->columns as $index => $column)
-            <button wire:click.prefetch="toggle('{{ $index }}')" class="px-3 py-2 rounded text-white text-xs focus:outline-none
-            {{ $column['hidden'] ? 'bg-blue-100 hover:bg-blue-300 text-blue-600' : 'bg-blue-500 hover:bg-blue-800' }}">
-                {{ $column['label'] }}
-            </button>
+                @if ($column['hideable'])
+                    <button wire:click.prefetch="toggle('{{ $index }}')" class="px-3 py-2 rounded text-white text-xs focus:outline-none
+                    {{ $column['hidden'] ? 'bg-blue-100 hover:bg-blue-300 text-blue-600' : 'bg-blue-500 hover:bg-blue-800' }}">
+                        {{ $column['label'] }}
+                    </button>
+            @endif
             @endforeach
         </div>
         @endif

resources/views/livewire/datatables/header-inline-hide.blade.php

@@ -34,8 +34,11 @@ class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leadi
             </span>
         </button>
     @endif
-    <button wire:click.prefetch="toggle('{{ $index }}')"
-        class="absolute bottom-1 right-1 focus:outline-none">
-        <x-icons.arrow-circle-left class="h-3 w-3 text-gray-300 hover:text-blue-400" />
-    </button>
+
+    @if ($column['hideable'])
+        <button wire:click.prefetch="toggle('{{ $index }}')"
+            class="absolute bottom-1 right-1 focus:outline-none">
+            <x-icons.arrow-circle-left class="h-3 w-3 text-gray-300 hover:text-blue-400" />
+        </button>
+    @endif
 </div>

src/Column.php

@@ -17,6 +17,7 @@ class Column
     public $searchable;
     public $filterOn;
     public $filterable;
+    public $hideable;
     public $sort;
     public $unsortable;
     public $defaultSort;
@@ -118,6 +119,13 @@ public function defaultSort($direction = true)
         return $this;
     }
 
+    public function hideable()
+    {
+        $this->hideable = true;
+
+        return $this;
+    }
+
     public function unsortable()
     {
         $this->unsortable = true;

src/Http/Livewire/LivewireDatatable.php

@@ -191,6 +191,7 @@ public function getViewColumns()
                 'align',
                 'type',
                 'filterable',
+                'hideable',
                 'complex',
                 'filterView',
                 'name',
@@ -1347,7 +1348,7 @@ public function getDisplayValue($index, $value)
             : $value;
     }
 
-    /*  This can be called to apply highlting of the search term to some string.
+    /*  This can be called to apply highlighting of the search term to some string.
      *  Motivation: Call this from your Column::Callback to apply highlight to a chosen section of the result.
      */
     public function highlightStringWithCurrentSearchTerm(string $originalString)