<livewire:actions-demo-table />
<livewire:restore-all model="App\User" />
<?php
namespace App\Http\Livewire;
use App\User;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\DateColumn;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
class ActionsDemoTable extends LivewireDatatable
{
public $model = User::class;
public function columns()
{
return [
NumberColumn::name('id')->filterable(),
Column::name('name')->filterable()->searchable(),
Column::name('email')->truncate()->filterable()->searchable(),
DateColumn::name('created_at')->filterable(),
Column::callback(['id', 'name'], function ($id, $name) {
return view('table-actions', ['id' => $id, 'name' => $name]);
})->unsortable()
];
}
}
<div class="flex space-x-1 justify-around">
<a href="{{ route('users.show', [$name]) }}" target="_blank" class="p-1 text-teal-600 hover:bg-teal-600 hover:text-white rounded">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
</a>
<x-modal :value="$id">
<x-slot name="trigger">
<button class="p-1 text-blue-600 hover:bg-blue-600 hover:text-white rounded">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path></svg>
</button>
</x-slot>
<h1 class="text-2xl text-purple-700">{{ $name }}</h1>
</x-modal>
@include('datatables::delete', ['value' => $id])
</div>
<div x-data="{ open: {{ isset($open) && $open ? 'true' : 'false' }}, working: false }" x-cloak wire:key="{{ $value }}">
<span x-on:click="open = true">
{{ $trigger }}
</span>
<div x-show="open"
class="fixed z-50 bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
<div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="open" x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative bg-gray-100 rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full sm:p-6">
<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
<button @click="open = false" type="button"
class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="w-full">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900">
{{ __('Edit') }} {{ $value }}
</h3>
<div class="mt-2">
{{ $slot }}
</div>
</div>
</div>
</div>
</div>
</div>