Skip to content

Commit 3c64d97

Browse files
devawebdeveloperdevawebdeveloper
committed
v1.2
1 parent c22fcba commit 3c64d97

File tree

4 files changed

+74
-32
lines changed

4 files changed

+74
-32
lines changed

‎src/Livewire/DataTable.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ class DataTable extends Component
9191

9292
public $filters = [];
9393

94+
//customizable area show or not
95+
public $customize;
96+
9497
public function mount(
9598
$model,
9699
$columns = [],
@@ -100,11 +103,13 @@ public function mount(
100103
$editable = [],
101104
$filterable = [],
102105
$perPage = 15,
103-
$addNew = []
106+
$addNew = [],
107+
$customizable = true
104108
){
105109

106110
//$this->table = (new $this->model())->getTable();
107111

112+
$this->customize = $customizable;
108113

109114
$this->model = $model;
110115
//$this->columns = $columns;

‎src/Traits/ColumnsCache.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ public function upCols(array $data)
8282
*/
8383
public function upSelectedCols(array $data)
8484
{
85-
8685
return $this->updateCache($this->ckeys['selectedCols'], $data);
8786
}
8887

‎src/Traits/InitColumns.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ public function prepareCols($callback = null)
101101
//$this->getExcludedColumns();
102102

103103
foreach($this->columns_all as $col) {
104+
104105
if(!in_array($col, $this->cols['excluded'])) {
105106

106107
$this->final_cols[$col] = $this->columnData(

‎src/views/livewire/data-table.blade.php‎

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
<div class="py-1 bg-white rounded-md shadow">
33
<div class="w-full bg-white rounded-md shadow">
44

5-
<div class="flex items-center px-4 py-2">
6-
<div class="w-4/12">
7-
<h1 class="uppercase">Data Table - {{ $table_name }}</h1>
5+
<div class="flex flex-wrap items-center px-4 py-2">
6+
<div class="w-full md:w-3/12">
7+
<h1 class="uppercase">
8+
{{ $table_name }}
9+
<span class="xs:hidden"> - Data Table</span> <br>
10+
</h1>
811
</div>
9-
<div class="w-full">
12+
<div class="w-full md:w-9/12">
1013
<input wire:model='search' type="text" class="w-full px-4 py-1 bg-white border border-gray-300 rounded-full" placeholder="Search in {{ implode(',', $cols['searchable']) }} ...">
1114
</div>
1215
</div>
@@ -15,26 +18,46 @@
1518

1619
{{-- secont row -------- add new - columns customization - per_page --}}
1720

18-
<div class="flex flex-wrap items-center justify-between py-1 border-t border-b border-gray-200" >
19-
<div class="flex gap-2 px-4">
21+
<div class="flex flex-wrap items-center justify-between border-t py-1" >
22+
<div class="flex gap-2 px-2">
23+
@if (count($addNew) > 0)
2024
<x-btui-smodal title="Add New">
2125
<x-slot name="trigger">
2226
<x-btui-button size="sm">Add New</x-btui-button>
2327
</x-slot>
2428

25-
@if(count($addNew) > 0)
29+
@if(count($addNew) > 0 && $addNew['component'] != '' && count($addNew['params']) > 0)
2630
@livewire($addNew['component'],$addNew['params'])
2731
@else
2832
<div class="p-4 text-sm bg-red-400">No! Livewire Component Not found!</div>
2933
@endif
3034

3135
</x-btui-smodal>
32-
<div wire:click='$set("colbox", {{ !$colbox }})' class="flex items-center justify-start gap-2 px-2 bg-gray-100 rounded-md cursor-pointer">
33-
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
34-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
35-
</svg>
36-
<p class="">Columns</p>
36+
@endif
37+
@if ($customize)
38+
<div wire:click='$set("colbox", {{ !$colbox }})'
39+
class="flex items-center justify-start gap-2 px-2 pt-1 bg-gray-100 rounded-t-md cursor-pointer
40+
{{ ($colbox) ? 'pb-3 -mb-2' : 'rounded-b-md pb-1' }}
41+
">
42+
43+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
44+
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
45+
</svg>
46+
<p class="text-sm">Customize Table</p>
47+
48+
@if ($colbox)
49+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
50+
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
51+
</svg>
52+
@else
53+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
54+
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
55+
</svg>
56+
@endif
57+
3758
</div>
59+
@endif
60+
3861
</div>
3962

4063
<div class="flex items-center justify-end gap-2 px-4">
@@ -65,13 +88,18 @@
6588
@endif
6689

6790
{{-- filterable area -------------------------------------------- --}}
68-
<div class="w-full p-2 shadow-sm">
69-
<div class="flex flex-wrap gap-1">
91+
<div class="w-full shadow-sm border-t border-gray-200 bg-gray-200">
92+
<div class="flex flex-grow gap-2 overflow-x-auto">
93+
94+
@php
95+
//dd($selectedCols)
96+
@endphp
97+
7098
@foreach($columns as $col)
7199
@if($selectedCols[$col]['filterable'])
72-
<div class="w-3/12 bg-gray-100 rounded p-2">
100+
<div class="w-full sm:w-5/12 lg:w-3/12 xl:w-2/12 p-2">
73101

74-
<label class="capitalize">{{ $selectedCols[$col]['label'] }}</label>
102+
<label class="capitalize text-sm">{{ $selectedCols[$col]['label'] }}</label>
75103
<x-btui-select size="sm"
76104
:options="$selectedCols[$col]['filterable_options']"
77105
wire:model="filters.{{$col}}" />
@@ -85,8 +113,8 @@
85113
{{-- table area ------------------------------------------------- --}}
86114

87115
@if($data->count() > 0)
88-
<div class="w-full pb-4 overflow-x-auto">
89-
<table class="w-full bg-white rounded-md shadow-sm">
116+
<div class="w-full overflow-x-auto">
117+
<table class="w-full bg-white rounded-md shadow-inner z-50">
90118
<thead>
91119
<tr class="border-b divide-x bg-gray-50 ">
92120
@foreach ($columns as $col)
@@ -115,7 +143,10 @@
115143

116144
</th>
117145

146+
118147
@endforeach
148+
149+
<th></th>
119150
</tr>
120151
</thead>
121152

@@ -130,6 +161,7 @@
130161
<td wire:key='data-{{ $d->id }}-{{ $col }}' id="cell" class="px-4 py-2 text-sm {{ in_array($col, $lowercase) ? '' : 'capitalize' }} ">
131162

132163
<x-dt-inline-edit>
164+
133165
<div class="">
134166
@if(method_exists(new $this->model(), 'onViewFilter'))
135167
{{ (new $this->model())->onViewFilter($col,$d[$col]) }}
@@ -149,25 +181,30 @@
149181
@endif
150182

151183
@slot('form')
184+
152185
<div class="flex items-center justify-start gap-2 ">
153186

154187
<div style="width:80%;min-width:200px;">
155188

156189
@if($selectedCols[$col]['editable'])
157190

158-
@isset($cols['editable'][$col])
191+
@if($selectedCols[$col]['editable-options']['inputtype'] == 'text' )
159192

160-
@if($cols['editable'][$col]['inputtype'] == 'text' )
161-
<x-btui-input id="editable-content-{{ $d['id'] }}-{{ $col }}" value="{{ $d[$col] }}" size="sm" />
162-
@elseif($cols['editable'][$col]['inputtype'] == 'select')
163-
<x-btui-select size="sm" :options="$cols['editable'][$col]['options']" id="editable-content-{{ $d['id'] }}-{{ $col }}" value="{{ $d[$col] }}" />
164-
@else
165-
<textarea rows="1" class="w-full px-2 border border-gray-300 rounded" id="editable-content-{{ $d['id'] }}-{{ $col }}">{{ $d[$col] }}</textarea>
166-
@endif
193+
<x-btui-input id="editable-content-{{ $d['id'] }}-{{ $col }}"
194+
value="{{ $d[$col] }}" size="sm" />
195+
196+
@elseif($selectedCols[$col]['editable-options']['inputtype'] == 'select')
197+
198+
<x-btui-select size="sm" :options="$selectedCols[$col]['editable-options']['params']"
199+
id="editable-content-{{ $d['id'] }}-{{ $col }}" value="{{ $d[$col] }}" />
200+
201+
@else
202+
203+
<textarea rows="1" class="w-full px-2 border border-gray-300 rounded"
204+
id="editable-content-{{ $d['id'] }}-{{ $col }}">{{ $d[$col] }}</textarea>
205+
206+
@endif
167207

168-
@else
169-
<textarea rows="1" class="w-full px-2 border border-gray-300 rounded" id="editable-content-{{ $d['id'] }}-{{ $col }}">{{ $d[$col] }}</textarea>
170-
@endisset
171208

172209
@endif
173210

@@ -185,7 +222,7 @@
185222
@endforeach
186223

187224
{{-- delete - options ----------------------------- --}}
188-
<td class="pr-1 bg-gray-100">
225+
<td class="pr-1 bg-gray-100 min-w-min">
189226

190227
<x-dt-inline-edit form-width="w-64">
191228
@slot('trigger')

0 commit comments

Comments
 (0)