introduce column groups

Author: Herbert Maschke

README.md

@@ -138,18 +138,21 @@ class ComplexDemoTable extends LivewireDatatable
 
             Column::name('name')
                 ->defaultSort('asc')
+                ->group('group1')
                 ->searchable()
                 ->hideable()
                 ->filterable(),
 
             Column::name('planet.name')
                 ->label('Planet')
+                ->group('group1')
                 ->searchable()
                 ->hideable()
                 ->filterable($this->planets),
 
             DateColumn::name('dob')
                 ->label('DOB')
+                ->group('group2')
                 ->filterable()
                 ->hide(),
 
@@ -171,6 +174,7 @@ class ComplexDemoTable extends LivewireDatatable
 |_static_ **delete**|[*String* $primaryKey default: 'id']|Adds a column with a delete button, which will call ```$this->model::destroy($primaryKey)```|```Column::delete()```|
 |_static_ **checkbox**|[*String* $column default: 'id']|Adds a column with a checkbox. The component public property ```$selected``` will contain an array of the named column from checked rows, |```Column::checkbox()```|
 |**label**|*String* $name|Changes the display name of a column|```Column::name('id')->label('ID)```|
+|**group**|*String* $group|Assign the column to a group. Allows to toggle the visibility of all columns of a group at once|```Column::name('id')->group('my-group')```|
 |**format**|[*String* $format]|Formats the column value according to type. Dates/times will use the default format or the argument |```Column::name('email_verified_at')->filterable(),```|
 |**hide**| |Marks column to start as hidden|```Column::name('id')->hidden()```|
 |**sortBy**|*String\|Expression* $column|Changes the query by which the column is sorted|```Column::name('dob')->sortBy('DATE_FORMAT(users.dob, "%m%d%Y")'),```|
@@ -209,6 +213,10 @@ NumberColumn::name('students.age:min')->label('Student Min'),
 NumberColumn::name('students.age:max')->label('Student Max'),
 ```
 
+### Column Groups
+
+When you have a very big table with a lot of columns, it is possible to create 'column groups' that allows the user to toggle the visibility of a whole group at once. Use `->group('NAME')` at any column to achieve this.
+
 ### Custom column names
 It is still possible to take full control over your table, you can define a ```builder``` method using whatever query you like, using your own joins, groups whatever, and then name your columns using your normal SQL syntax:
 

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

@@ -51,6 +51,11 @@
                 @if($hideable === 'select')
                 @include('datatables::hide-column-multiselect')
                 @endif
+
+                @foreach ($columnGroups as $name => $group)
+                    <button wire:click="toggleGroup('{{ $name }}')" class="flex items-center space-x-2 px-3 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none"><span>{{ __('Toggle :group', ['group' => $name]) }}</span>
+                        </button>
+                @endforeach
             </div>
         </div>
 

src/Column.php

@@ -9,6 +9,7 @@ class Column
 {
     public $type = 'string';
     public $label;
+    public $group;
     public $name;
     public $select;
     public $joins;
@@ -333,6 +334,16 @@ public function field()
         return Str::afterLast($this->name, '.');
     }
 
+    /**
+     * You can use group(null) to revoke a column from a group, if necessary.
+     */
+    public function group($group)
+    {
+        $this->group = $group;
+
+        return $this;
+    }
+
     public function relations()
     {
         return $this->isBaseColumn() ? null : collect(explode('.', Str::beforeLast($this->name, '.')));

src/Http/Livewire/LivewireDatatable.php

@@ -59,6 +59,7 @@ class LivewireDatatable extends Component
     public $complexQuery;
     public $title;
     public $name;
+    public $columnGroups = [];
     public $userFilter;
     public $persistComplexQuery;
     public $persistHiddenColumns = true;
@@ -176,6 +177,7 @@ public function mount(
         $this->initialiseHiddenColumns();
         $this->initialiseFilters();
         $this->initialisePerPage();
+        $this->initialiseColumnGroups();
     }
 
     public function columns()
@@ -189,6 +191,7 @@ public function getViewColumns()
             return collect($column)->only([
                 'hidden',
                 'label',
+                'group',
                 'content',
                 'align',
                 'type',
@@ -537,6 +540,15 @@ public function initialisePerPage()
         }
     }
 
+    public function initialiseColumnGroups()
+    {
+        array_map(function ($column) {
+            if ($column['group'] ?? false) {
+                $this->columnGroups[$column['group']][] = $column['name'] ?? $column['label'];
+            }
+        }, $this->columns);
+    }
+
     public function initialiseFilters()
     {
         if (! $this->persistFilters) {
@@ -652,6 +664,15 @@ public function toggle($index)
         }
     }
 
+    public function toggleGroup($group)
+    {
+        foreach ($this->columns as $key => $column) {
+            if ($column['group'] === $group) {
+                $this->toggle($key);
+            }
+        }
+    }
+
     public function doBooleanFilter($index, $value)
     {
         $this->activeBooleanFilters[$index] = $value;