Skip to content

Commit 5a122c7

Browse files
rappasoftrappasoft
committed
Remove multi column sorting status and just default to it
- Bootstrap 4 WIP
1 parent 79b459a commit 5a122c7

19 files changed

+406
-117
lines changed

‎README.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,19 @@ php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLi
2727
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views
2828
```
2929

30+
This is the contents of the published config file:
31+
32+
```php
33+
<?php
34+
35+
return [
36+
/**
37+
* Options: tailwind | bootstrap-4.
38+
*/
39+
'theme' => 'tailwind',
40+
];
41+
```
42+
3043
## Usage
3144

3245
[Skip to a full example](#example-table)
@@ -53,11 +66,9 @@ class Table extends DataTableComponent
5366
{
5467
return [
5568
Column::make('Type')
56-
->sortable()
57-
->multiColumn(),
69+
->sortable(),
5870
Column::make('Name')
59-
->sortable()
60-
->multiColumn(),
71+
->sortable(),
6172
Column::make('Permissions'),
6273
Column::blank(),
6374
];
@@ -79,7 +90,6 @@ If you would like to format the cell inline, you can use the format helper:
7990
```php
8091
Column::make('Name')
8192
->sortable()
82-
->multiColumn()
8393
->format(function($value) {
8494
return timezone()->convertToLocal($value);
8595
}),
@@ -92,7 +102,6 @@ If you would like to render HTML from the format method, you may call `asHtml` o
92102
```php
93103
Column::make('Name')
94104
->sortable()
95-
->multiColumn()
96105
->format(function($value) {
97106
return '<strong>'.timezone()->convertToLocal($value).'</strong>';
98107
})
@@ -175,14 +184,11 @@ public function columns(): array
175184
return [
176185
Column::make('Type') // Column text and optional column name, column name will be snake case of text if not defined
177186
->sortable() // Whether or not the heading can be clicked to sort
178-
->multiColumn(),
179187
Column::make('Name')
180188
->sortable()
181-
->multiColumn(),
182189
Column::make('Permissions'),
183190
Column::make('Other', 'my_other_column')
184191
->sortable() // Allows the column to interact with the sorting methods
185-
->multiColumn() // Adds visual cues for multi sorting this column with other columns
186192
->addClass('hidden md:table-cell'), // Adds to the existing class list
187193
Column::blank(), // Generates a blank cell
188194
];
@@ -463,25 +469,19 @@ class UsersTable extends DataTableComponent
463469
return [
464470
Column::make('Type')
465471
->sortable()
466-
->multiColumn()
467472
->addClass('hidden md:table-cell'),
468473
Column::make('Name')
469-
->sortable()
470-
->multiColumn(),
474+
->sortable(),
471475
Column::make('E-mail', 'email')
472-
->sortable()
473-
->multiColumn(),
476+
->sortable(),
474477
Column::make('Active')
475478
->sortable()
476-
->multiColumn()
477479
->addClass('hidden md:table-cell'),
478480
Column::make('Verified', 'email_verified_at')
479481
->sortable()
480-
->multiColumn()
481482
->addClass('hidden md:table-cell'),
482483
Column::make('2FA', 'two_factor_secret')
483484
->sortable()
484-
->multiColumn()
485485
->addClass('hidden md:table-cell'),
486486
Column::blank(),
487487
];

‎config/livewire-tables.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
return [
44
/**
5-
* Options: tailwind.
5+
* Options: tailwind | bootstrap-4.
66
*/
77
'theme' => 'tailwind',
88
];

‎resources/views/bootstrap-4/datatable.blade.php

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div
2+
@if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
3+
class="container-fluid"
4+
>
5+
@include('livewire-tables::bootstrap-4.includes.sorting-pills')
6+
@include('livewire-tables::bootstrap-4.includes.filter-pills')
7+
8+
<div class="d-flex justify-content-between mb-3 p-3 p-md-0">
9+
<div class="d-flex">
10+
@include('livewire-tables::bootstrap-4.includes.search')
11+
12+
<div class="ml-3">
13+
@include('livewire-tables::bootstrap-4.includes.filters')
14+
</div>
15+
</div>
16+
17+
<div class="d-flex">
18+
@include('livewire-tables::bootstrap-4.includes.bulk-actions')
19+
20+
<div class="ml-3">
21+
@include('livewire-tables::bootstrap-4.includes.per-page')
22+
</div>
23+
</div>
24+
</div>
25+
26+
@include('livewire-tables::bootstrap-4.includes.table')
27+
@include('livewire-tables::bootstrap-4.includes.pagination')
28+
</div>

‎resources/views/bootstrap-4/includes/bulk-actions.blade.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@if (count($bulkActions))
2+
<div class="dropdown">
3+
<button class="btn dropdown-toggle" type="button" id="bulkActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4+
{{ __('Bulk Actions') }}
5+
</button>
6+
7+
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActions">
8+
@foreach($bulkActions as $action => $title)
9+
<a href="#" wire:click.prevent="{{ $action }}" class="dropdown-item">{{ $title }}</a>
10+
@endforeach
11+
</div>
12+
</div>
13+
@endif

‎resources/views/bootstrap-4/includes/filter-pills.blade.php

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@if ($showFilters && count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
2+
<div wire:key="filter-badges" class="p-2 p-md-0 mb-3">
3+
<small class="text-secondary">@lang('Applied Filters'):</small>
4+
5+
@foreach($filters as $key => $value)
6+
@if ($key !== 'search' && strlen($value))
7+
<span
8+
wire:key="filter-{{ $key }}"
9+
class="badge badge-pill badge-info d-inline-flex align-items-center"
10+
>
11+
{{ $filterNames[$key] ?? ucwords(strtr($key, ['_' => ' ', '-' => ' '])) }}: {{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
12+
13+
<a
14+
href="#"
15+
wire:click.prevent="removeFilter('{{ $key }}')"
16+
class="text-white ml-2"
17+
>
18+
<span class="sr-only">@lang('Remove sort option')</span>
19+
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
20+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
21+
</svg>
22+
</a>
23+
</span>
24+
@endif
25+
@endforeach
26+
27+
<a
28+
href="#"
29+
wire:click.prevent="resetFilters"
30+
class="badge badge-pill badge-light"
31+
>
32+
@lang('Clear')
33+
</a>
34+
</div>
35+
@endif

‎resources/views/bootstrap-4/includes/filters.blade.php

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@if ($filtersView || count($customFilters))
2+
<div class="btn-group">
3+
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
4+
{{ __('Filters') }}
5+
6+
@if (count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
7+
<span class="badge badge-info">
8+
{{ isset($filters['search']) ? count(array_filter($filters)) - 1 : count(array_filter($filters)) }}
9+
</span>
10+
@endif
11+
12+
<span class="caret"></span>
13+
</button>
14+
<ul class="dropdown-menu" role="menu">
15+
<li>
16+
@if ($filtersView)
17+
@include($filtersView)
18+
@elseif (count($customFilters))
19+
@foreach ($customFilters as $key => $filter)
20+
<div class="p-2">
21+
@if ($filter->isSelect())
22+
<label for="filter-{{ $key }}" class="mb-2">
23+
{{ $filter->name() }}
24+
</label>
25+
26+
<select
27+
onclick="event.stopPropagation();"
28+
wire:model="filters.{{ $key }}"
29+
id="filter-{{ $key }}"
30+
class="form-control"
31+
>
32+
@foreach($filter->options() as $key => $value)
33+
<option value="{{ $key }}">{{ $value }}</option>
34+
@endforeach
35+
</select>
36+
@endif
37+
</div>
38+
@endforeach
39+
@endif
40+
41+
@if (count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
42+
<div class="dropdown-divider"></div>
43+
44+
<a
45+
href="#"
46+
wire:click.prevent="resetFilters"
47+
class="dropdown-item"
48+
>
49+
@lang('Clear')
50+
</a>
51+
@endif
52+
</li>
53+
</ul>
54+
</div>
55+
@endif

‎resources/views/bootstrap-4/includes/header.blade.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<thead>
2+
<tr>
3+
@if (count($bulkActions))
4+
<th>
5+
<input
6+
wire:model="selectPage"
7+
type="checkbox"
8+
/>
9+
</th>
10+
@endif
11+
12+
@foreach($columns as $column)
13+
@if ($column->isBlank())
14+
<th></th>
15+
@else
16+
@include('livewire-tables::bootstrap-4.includes.heading')
17+
@endif
18+
@endforeach
19+
</tr>
20+
</thead>

‎resources/views/bootstrap-4/includes/heading.blade.php

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@unless ($column->isSortable())
2+
<th class="{{ $column->class() ?? '' }}">
3+
{{ $column->text() ?? '' }}
4+
</th>
5+
@else
6+
<th
7+
wire:click="sortBy('{{ $column->column() }}', '{{ $column->text() ?? $column->column() }}')"
8+
class="{{ $column->class() ?? '' }}"
9+
style="cursor:pointer;"
10+
>
11+
<div class="d-flex align-items-center">
12+
<span>{{ $column->text() }}</span>
13+
14+
@php
15+
$direction = $column->column() ? $sorts[$column->column()] ?? null : null;
16+
@endphp
17+
18+
<span class="relative d-flex align-items-center">
19+
@if ($direction === 'asc')
20+
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
21+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
22+
</svg>
23+
@elseif ($direction === 'desc')
24+
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
25+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
26+
</svg>
27+
@else
28+
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
30+
</svg>
31+
@endif
32+
</span>
33+
</div>
34+
</th>
35+
@endif

‎resources/views/bootstrap-4/includes/pagination.blade.php

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@if ($showPagination)
2+
<div class="row">
3+
<div class="col">
4+
{{ $rows->links() }}
5+
</div>
6+
7+
<div class="col text-right text-muted">
8+
@lang('Showing :first to :last out of :total results', [
9+
'first' => $rows->count() ? $rows->firstItem() : 0,
10+
'last' => $rows->count() ? $rows->lastItem() : 0,
11+
'total' => $rows->total()
12+
])
13+
</div>
14+
</div>
15+
@endif

‎resources/views/bootstrap-4/includes/per-page.blade.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@if ($showPerPage)
2+
<select
3+
wire:model="perPage"
4+
id="perPage"
5+
class="form-control"
6+
>
7+
<option value="10">10</option>
8+
<option value="25">25</option>
9+
<option value="50">50</option>
10+
</select>
11+
@endif

0 commit comments

Comments
 (0)