Skip to content

Commit 4420afa

Browse files
thyseusthyseus
authored
Merge pull request #420 from amvisor/sortable-overhaul
sortable overhaul: rename 'unsortable' to 'sortable' which is more intuitive
2 parents b1b86e6 + 76c20bf commit 4420afa

File tree

7 files changed

+77
-50
lines changed

7 files changed

+77
-50
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
All notable changes to `livewire-datatables` will be documented in this file
44

5-
## 1.0.0 - 201X-XX-XX
5+
## 1.0.0 - 201X-XX-XX ( to be released in the future... )
66

77
- initial release
8+
9+
## 0.9.0 ( 2022-03-22 )
10+
11+
- Breaking Change: 'unsortable' has been renamed to 'sortable', which is more intuitive. Please adjust your overwritten
12+
- views, if any (thyseus).

‎config/livewire-datatables.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@
5656

5757
'model_namespace' => 'App',
5858

59+
/*
60+
|--------------------------------------------------------------------------
61+
| Default Sortable
62+
|--------------------------------------------------------------------------
63+
| Should a column of a datatable be sortable by default ?
64+
|
65+
*/
66+
67+
'default_sortable' => true,
68+
5969
/*
6070
|--------------------------------------------------------------------------
6171
| Default CSS classes

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
<div wire:click.prefetch="toggle('{{ $index }}')"
2-
class="@if($column['hidden']) relative table-cell h-12 w-3 bg-blue-100 hover:bg-blue-300 overflow-none align-top group @else hidden @endif"
3-
style="min-width:12px; max-width:12px"
4-
>
5-
<button class="relative h-12 w-3 focus:outline-none">
6-
<span
7-
class="w-32 hidden group-hover:inline-block absolute z-10 top-0 left-0 ml-3 bg-blue-300 font-medium leading-4 text-xs text-left text-blue-700 tracking-wider transform uppercase focus:outline-none">
8-
{{ str_replace('_', ' ', $column['label']) }}
9-
</span>
10-
</button>
11-
<svg class="absolute text-blue-100 fill-current w-full inset-x-0 bottom-0"
12-
viewBox="0 0 314.16 207.25">
13-
<path stroke-miterlimit="10" d="M313.66 206.75H.5V1.49l157.65 204.9L313.66 1.49v205.26z" />
14-
</svg>
2+
class="@if($column['hidden']) relative table-cell h-12 w-3 bg-blue-100 hover:bg-blue-300 overflow-none align-top group @else hidden @endif"
3+
style="min-width:12px; max-width:12px"
4+
>
5+
<button class="relative h-12 w-3 focus:outline-none">
6+
<span
7+
class="w-32 hidden group-hover:inline-block absolute z-10 top-0 left-0 ml-3 bg-blue-300 font-medium leading-4 text-xs text-left text-blue-700 tracking-wider transform uppercase focus:outline-none">
8+
{{ str_replace('_', ' ', $column['label']) }}
9+
</span>
10+
</button>
11+
<svg class="absolute text-blue-100 fill-current w-full inset-x-0 bottom-0"
12+
viewBox="0 0 314.16 207.25">
13+
<path stroke-miterlimit="10" d="M313.66 206.75H.5V1.49l157.65 204.9L313.66 1.49v205.26z" />
14+
</svg>
1515
</div>
1616
<div class="@if($column['hidden']) hidden @else relative h-12 overflow-hidden align-top flex table-cell @endif" @include('datatables::style-width')>
1717

18-
@if($column['unsortable'])
19-
<div class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex justify-between items-center focus:outline-none">
20-
<span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>
21-
</div>
22-
@else
18+
@if($column['sortable'])
2319
<button wire:click="sort('{{ $index }}')"
24-
class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex justify-between items-center focus:outline-none">
20+
class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex justify-between items-center focus:outline-none">
2521
<span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>
2622
<span class="inline text-xs text-blue-400">
27-
@if($sort === $index)
23+
@if($sort === $index)
2824
@if($direction)
29-
<x-icons.chevron-up class="h-6 w-6 text-green-600 stroke-current" />
25+
<x-icons.chevron-up class="h-6 w-6 text-green-600 stroke-current" />
3026
@else
31-
<x-icons.chevron-down class="h-6 w-6 text-green-600 stroke-current" />
32-
@endif
27+
<x-icons.chevron-down class="h-6 w-6 text-green-600 stroke-current" />
3328
@endif
29+
@endif
3430
</span>
3531
</button>
32+
@else
33+
<div class="w-full h-full px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex justify-between items-center focus:outline-none">
34+
<span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>
35+
</div>
3636
@endif
3737

3838
@if ($column['hideable'])
3939
<button wire:click.prefetch="toggle('{{ $index }}')"
40-
class="absolute bottom-1 right-1 focus:outline-none">
40+
class="absolute bottom-1 right-1 focus:outline-none">
4141
<x-icons.arrow-circle-left class="h-3 w-3 text-gray-300 hover:text-blue-400" />
4242
</button>
4343
@endif

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
@unless($column['hidden'])
22
<div
33
@if (isset($column['tooltip']['text'])) title="{{ $column['tooltip']['text'] }}" @endif
4-
class="relative table-cell h-12 overflow-hidden align-top" @include('datatables::style-width')>
5-
@if($column['unsortable'])
6-
<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['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
7-
<span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
8-
</div>
9-
@else
10-
<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['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
11-
<span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
12-
<span class="inline text-xs text-blue-400">
13-
@if($sort === $index)
14-
@if($direction)
15-
<x-icons.chevron-up wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
16-
@else
17-
<x-icons.chevron-down wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
4+
class="relative table-cell h-12 overflow-hidden align-top" @include('datatables::style-width')>
5+
@if($column['sortable'])
6+
<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['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
7+
<span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
8+
<span class="inline text-xs text-blue-400">
9+
@if($sort === $index)
10+
@if($direction)
11+
<x-icons.chevron-up wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
12+
@else
13+
<x-icons.chevron-down wire:loading.remove class="w-6 h-6 text-green-600 stroke-current" />
14+
@endif
1815
@endif
19-
@endif
20-
</span>
21-
</button>
22-
@endif
23-
</div>
16+
</span>
17+
</button>
18+
@else
19+
<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['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
20+
<span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
21+
</div>
22+
@endif
23+
</div>
2424
@endif

‎src/Column.php‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ class Column
1818
public $base;
1919
public $raw;
2020
public $searchable;
21+
public $sortable;
2122
public $filterOn;
2223
public $filterable;
2324
public $hideable;
2425
public $sort;
25-
public $unsortable;
2626
public $defaultSort;
2727
public $callback;
2828
public $hidden;
@@ -52,6 +52,11 @@ class Column
5252
/** @var array list all column types that are not sortable by SQL here */
5353
public const UNSORTABLE_TYPES = ['label', 'checkbox'];
5454

55+
public function __construct()
56+
{
57+
$this->sortable = config('livewire-datatables.default_sortable', true);
58+
}
59+
5560
public static function name($name)
5661
{
5762
$column = new static;
@@ -188,9 +193,16 @@ public function hideable()
188193
return $this;
189194
}
190195

196+
public function sortable()
197+
{
198+
$this->sortable = true;
199+
200+
return $this;
201+
}
202+
191203
public function unsortable()
192204
{
193-
$this->unsortable = true;
205+
$this->sortable = false;
194206

195207
return $this;
196208
}

‎src/Http/Livewire/LivewireDatatable.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,14 +282,14 @@ public function getViewColumns()
282282
'type',
283283
'filterable',
284284
'hideable',
285+
'sortable',
285286
'complex',
286287
'filterView',
287288
'name',
288289
'params',
289290
'width',
290291
'minWidth',
291292
'maxWidth',
292-
'unsortable',
293293
'preventExport',
294294
])->toArray();
295295
})->toArray();

‎tests/ColumnTest.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ public function it_returns_an_array_from_column()
8181
'sort' => null,
8282
'defaultSort' => null,
8383
'searchable' => null,
84+
'sortable' => null,
8485
'params' => [],
8586
'additionalSelects' => [],
8687
'scope' => null,
@@ -92,7 +93,6 @@ public function it_returns_an_array_from_column()
9293
'align' => 'left',
9394
'preventExport' => null,
9495
'width' => null,
95-
'unsortable' => null,
9696
'exportCallback' => function () {
9797
},
9898
'filterOn' => null,
@@ -126,6 +126,7 @@ public function it_returns_an_array_from_raw()
126126
'sort' => 'SELECT column FROM table',
127127
'defaultSort' => 'asc',
128128
'searchable' => null,
129+
'sortable' => null,
129130
'params' => [],
130131
'additionalSelects' => [],
131132
'scope' => null,
@@ -136,7 +137,6 @@ public function it_returns_an_array_from_raw()
136137
'align' => 'left',
137138
'preventExport' => null,
138139
'width' => null,
139-
'unsortable' => null,
140140
'exportCallback' => null,
141141
'filterOn' => null,
142142
'group' => null,
@@ -167,6 +167,7 @@ public function it_returns_width_property_from_column()
167167
'sort' => null,
168168
'defaultSort' => null,
169169
'searchable' => null,
170+
'sortable' => null,
170171
'params' => [],
171172
'additionalSelects' => [],
172173
'scope' => null,
@@ -178,7 +179,6 @@ public function it_returns_width_property_from_column()
178179
'align' => 'left',
179180
'preventExport' => null,
180181
'width' => '1em',
181-
'unsortable' => null,
182182
'exportCallback' => null,
183183
'filterOn' => null,
184184
'group' => null,

0 commit comments

Comments
 (0)