Adds ability to sort by multiple columns (multisort)

README.md

@@ -6,7 +6,7 @@
 ### Features
 - Use a model or query builder to supply data
 - Mutate and format columns using preset or custom callbacks
-- Sort data using column or computed column
+- Sort data using one or more columns or computed columns
 - Filter using booleans, times, dates, selects or free text
 - Create complex combined filters using the [complex query builder](#complex-query-builder)
 - Show / hide columns
@@ -89,7 +89,8 @@ other as in the example above.
 |**dates**|*String\| Array* of column definitions [ and optional format in \                                                                                        | delimited string]|column values are formatted as per the default date format, or format can be included in string with \| separator | ```:dates="['dob\|lS F y', 'created_at']"```|
 |**times**|*String\| Array* of column definitions [optional format in \                                                                                             | delimited string]|column values are formatted as per the default time format, or format can be included in string with \| separator | ```'bedtime\|g:i A'```|
 |**searchable**|*String\| Array* of column names                                                                                                                         | Defines columns to be included in global search | ```searchable="name, email"```|
-|**sort**|*String* of column definition [and optional 'asc' or 'desc' (default: 'desc') in \| delimited string]                                                                                                                              |Specifies the column and direction for initial table sort. Default is column 0 descending | ```sort="name\|asc"```|
+|**sort**|*String, int or array* of column(s) definition [and optional 'asc' or 'desc' (default: 'desc') Specifies the column and direction for initial table sort. Default is column 0 descending | ```sort="name\|asc"```|
+|**multisort**|*Boolean default: false*|When set to true, sort is done using multiple columns.
 |**hide-header**|*Boolean* default: *false*| The top row of the table including the column titles is removed if this is ```true```                                                          | |
 |**hide-pagination**|*Boolean* default: *false*| Pagination controls are removed if this is ```true```                                                                                          | |
 |**per-page**|*Integer* default: 10| Number of rows per page                                                                                                                        | ```per-page="20"``` |
@@ -100,6 +101,22 @@ other as in the example above.
 |**afterTableSlot**| _String_ | blade view to be included immediately after the table in the component, which can therefore access public properties                           | [demo](https://livewire-datatables.com/complex) |
 ---
 
+## Sorting by multiple columns (multisort)
+![Multisort Demo](http://g.recordit.co/V0FOLGGPjO.gif "Multisort Demo")
+### Enable multisort
+Multisort is disabled by default. To enable it set ```multisort = true``` on your ```livewire-datatable``` component.
+```html
+...
+
+<livewire:datatable model="App\User" multisort=true />
+
+...
+```
+### How does it work?
+There's 3 possible states a column can have when multisort is enabled. Clicking on a column will advance its state.
+- 1st click: column added to the sort with direction `desc`.
+- 2nd click: direction changes to `asc`.
+- 3rd click: column removed from sort. 
 
 ## Component Syntax
 

composer.json

@@ -20,8 +20,8 @@
         }
     ],
     "require": {
-        "php": "^8.0",
-        "illuminate/support": "^7.0|^8.0|^9.0",
+        "php": "^8.2",
+        "illuminate/support": "^9.0|^v10.0",
         "livewire/livewire": "^2.4.4",
         "maatwebsite/excel": "^3.1",
         "reedware/laravel-relation-joins": "^2.4|^3.0"

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

@@ -2,6 +2,14 @@
     @includeIf($beforeTableSlot)
     <div class="relative">
         <div class="flex items-center justify-between mb-1">
+            @if(isset($this->multisort) && $this->multisort === true && count($this->sort) > 1)
+                <button wire:loading.class="opacity-50" wire:click="forgetSortSession"
+                        class="px-3 py-2 border border-blue-400 rounded-md bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">
+                    <div class="flex items-center h-2">
+                        {{ __('Reset Columns Sort')}}
+                    </div>
+                </button>
+            @endif
             <div class="flex items-center h-10">
                 @if($this->searchableColumns()->count())
                     <div class="flex rounded-lg w-96 shadow-sm">
@@ -61,6 +69,32 @@ class="flex items-center px-4 py-2 text-xs font-medium tracking-wider text-green
                     </div>
                 @endif
 
+                @if(count($this->massActionsOptions))
+                    <div class="flex items-center justify-center space-x-1">
+                        <label for="datatables_mass_actions">{{ __('With selected') }}:</label>
+                        <select wire:model="massActionOption" class="px-3 text-xs font-medium tracking-wider uppercase bg-white border border-green-400 space-x-2 rounded-md leading-4 focus:outline-none" id="datatables_mass_actions">
+                            <option value="">{{ __('Choose...') }}</option>
+                            @foreach($this->massActionsOptions as $group => $items)
+                                @if(!$group)
+                                    @foreach($items as $item)
+                                        <option value="{{$item['value']}}">{{$item['label']}}</option>
+                                    @endforeach
+                                @else
+                                    <optgroup label="{{$group}}">
+                                        @foreach($items as $item)
+                                            <option value="{{$item['value']}}">{{$item['label']}}</option>
+                                        @endforeach
+                                    </optgroup>
+                                @endif
+                            @endforeach
+                        </select>
+                        <button
+                            wire:click="massActionOptionHandler"
+                            class="flex items-center px-4 py-2 text-xs font-medium tracking-wider text-green-500 uppercase bg-white border border-green-400 rounded-md leading-4 hover:bg-green-200 focus:outline-none" type="submit" title="Submit"
+                        >Go</button>
+                    </div>
+                @endif
+
                 @if($exportable)
                     <div x-data="{ init() {
                         window.livewire.on('startDownload', link => window.open(link, '_blank'))

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

@@ -2,23 +2,44 @@
     <div
         @if (isset($column['tooltip']['text'])) title="{{ $column['tooltip']['text'] }}" @endif
                                                 class="relative table-cell h-12 overflow-hidden align-top" @include('datatables::style-width')>
-        @if($column['sortable'])
-            <button wire:click="sort('{{ $index }}')" class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex items-center focus:outline-none @if($column['headerAlign'] === 'right') justify-end @elseif($column['headerAlign'] === 'center') justify-center @endif">
+        @if(!$column['sortable'])
+            <div
+                class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex items-center focus:outline-none @if($column['headerAlign'] === 'right') justify-end @elseif($column['headerAlign'] === 'center') justify-center @endif">
                 <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
-                <span class="inline text-xs text-blue-400">
-                    @if($sort === $index)
-                        @if($direction)
-                            <x-icons.chevron-up wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
-                        @else
-                            <x-icons.chevron-down wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
+            </div>
+        @else
+            <button wire:click="sort('{{ $index }}')"
+                    class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex items-center focus:outline-none @if($column['headerAlign'] === 'right') justify-end @elseif($column['headerAlign'] === 'center') justify-center @endif">
+                <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
+                <span class="inline flex text-xs text-blue-400">
+                    @if(! isset($this->multisort) || $this->multisort === false)
+                        @if(isset($sort[0]) && $this->getIndexFromValue($sort[0]) == $index && ($direction = $this->getColumnDirection($sort[0])))
+                            @if($direction === 'asc')
+                                <x-icons.chevron-up wire:loading.remove class="h-6 w-6 text-green-600 stroke-current"/>
+                            @endif
+                            @if($direction === 'desc')
+                                <x-icons.chevron-down wire:loading.remove
+                                                      class="h-6 w-6 text-green-600 stroke-current"/>
+                            @endif
                         @endif
+                    @elseif($this->multisort === true)
+                        @foreach($sort as $key => $value)
+                            @if($this->getIndexFromValue($value) == $index && ($direction = $this->getColumnDirection($value)))
+                                @if($direction === 'asc')
+                                    <x-icons.chevron-up wire:loading.remove
+                                                        class="h-6 w-6 text-green-600 stroke-current"/>
+                                    <div>{{$key + 1}}</div>
+                                @endif
+                                @if($direction === 'desc')
+                                    <x-icons.chevron-down wire:loading.remove
+                                                          class="h-6 w-6 text-green-600 stroke-current"/>
+                                    <div>{{$key + 1}}</div>
+                                @endif
+                            @endif
+                        @endforeach
                     @endif
-                </span>
+            </span>
             </button>
-        @else
-            <div class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex items-center focus:outline-none @if($column['headerAlign'] === 'right') justify-end @elseif($column['headerAlign'] === 'center') justify-center @endif">
-                <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
-            </div>
         @endif
     </div>
 @endif

src/Column.php

@@ -214,7 +214,7 @@ public function sortBy($column)
         return $this;
     }
 
-    public function defaultSort($direction = true)
+    public function defaultSort(?string $direction = 'desc')
     {
         $this->defaultSort = $direction;
 

src/ColumnSet.php

@@ -147,8 +147,16 @@ public function search($searchable)
 
     public function sort($sort)
     {
-        if ($sort && $column = $this->columns->first(function ($column) use ($sort) {
-            return Str::after($column->name, '.') === Str::before($sort, '|');
+        if (is_array($sort)) {
+            foreach ($sort as $arg) {
+                $this->sort($arg);
+            }
+
+            return $this;
+        }
+
+        if ($sort && $column = $this->columns->first(function ($column, $key) use ($sort) {
+            return Str::after($column->name, '.') === ($sort = Str::before($sort, '|')) || $sort === $key;
         })) {
             $column->defaultSort(Str::of($sort)->contains('|') ? Str::after($sort, '|') : null);
         }