Tables

<div class="w-full" wire:init="initialize">
    @if (!$loading)
        <x-lb.element.table>
            <x-slot name="header">
                <x-lb.element.table.header title="Project Dashboard" description="View all of the team projects.">
                    <x-lb.element.table.search-bar />
                    <x-lb.element.table.advanced-filter-dropdown />
                </x-lb.element.table.header>
            </x-slot>
 
            <x-slot name="thead">
                <x-lb.element.table.head>Project</x-lb.element.table.head>
                <x-lb.element.table.head class="hidden lg:table-cell">Status</x-lb.element.table.head>
                <x-lb.element.table.head class="hidden lg:table-cell">Tasks</x-lb.element.table.head>
                <x-lb.element.table.head class="hidden lg:table-cell">Duration</x-lb.element.table.head>
                <x-lb.element.table.head>Created At</x-lb.element.table.head>
            </x-slot>
 
            <x-slot name="tbody">
                @foreach ($records as $project)
                    <x-lb.element.table.row>
                        <x-lb.element.table.cell>
                            <div class="flex space-x-2">
                                <x-lb.extra.avatar size="xs" name="{{ $project->name }}"
                                    color="{{ $project->avatar_color }}" src="{{ $project->avatar_path }}" />
                                <span class="text-sm font-medium leading-7 text-gray-900">
                                    {{ $project->name }}
                                </span>
                            </div>
                        </x-lb.element.table.cell>
                        <x-lb.element.table.cell class="hidden lg:table-cell">
                            @switch($project->status)
                                @case('backlog')
                                    <x-lb.element.badge color="concrete" label="Backlog" />
                                @break
 
                                @case('active')
                                    <x-lb.element.badge color="sunflower" label="Active" />
                                @break
 
                                @case('completed')
                                    <x-lb.element.badge color="emerald" label="Completed" />
                                @break
 
                                @case('paused')
                                    <x-lb.element.badge color="river" label="Paused" />
                                @break
                            @endswitch
                        </x-lb.element.table.cell>
                        <x-lb.element.table.cell class="hidden lg:table-cell">
                            <span class="font-medium">{{ $project->tasks_count }}</span>
                        </x-lb.element.table.cell>
                        <x-lb.element.table.cell class="hidden lg:table-cell">
                            <div class="text-neutral-500 flex space-x-1 items-center">
                                <span class="font-medium">{{ $project->duration }}</span>
                                <x-lb.heroicon.o-clock class="h-4 w-4" />
                            </div>
                        </x-lb.element.table.cell>
                        <x-lb.element.table.cell>
                            {{ $project->created_at->format('M jS, Y') }}
                        </x-lb.element.table.cell>
                    </x-lb.element.table.row>
                @endforeach
            </x-slot>
 
            <x-slot name="footer">
                @include('components.lb.element.table.pagination')
            </x-slot>
 
        </x-lb.element.table>
    @else
        <div class="w-full flex items-center justify-center">
            <x-lb.extra.loading.table-loading-indicator />
        </div>
 
    @endif
</div>

<?php
 
namespace App\Http\Livewire\Elements\Table;
 
use App\Models\Project;
use Livewire\Component;
use App\Http\Livewire\LaraBlade\WithDataTableFeatures;
 
class RegularTableDemo extends Component
{
    use WithDataTableFeatures;
 
    private $view = 'livewire.elements.table.regular-table-demo';
 
    protected $queryString = [
       'searchQuery' => ['except' => '', 'as' => 'search'],
       'page' => ['except' => 1],
    ];
 
    public function refreshTableRecords()
    {
        sleep(1);
        $this->records = Project::paginate($this->resultsPerPage);
    }
 
}

<?php
 
namespace App\Http\Livewire\LaraBlade;
 
use Livewire\WithPagination;
 
/**
 * Trait WithDataTableFeatures
 *
 * Handles data table settings for Livewire components.
 */
trait WithDataTableFeatures
{
    use WithPagination;
    protected $records;
 
    public bool $loading = true;
    public $searchQuery = '';
    public $resultsPerPage = 10;
 
    /**
     * Initialize the data table settings.
     */
    public function initialize()
    {
        $this->refreshTableRecords();
        $this->loading = false;
    }
 
    /**
     * Clear the search query.
     */
    public function clearSearch()
    {
        $this->searchQuery = '';
    }
 
    /**
     * Handle updated search query and reset pagination.
     */
    public function updatedSearchQuery()
    {
        $this->resetPage();
    }
 
    public function render()
    {
        if ($this->loading) {
 
            return view($this->view);
 
        } else {
 
            $this->refreshTableRecords();
 
            return view($this->view, [
                'records' => $this->records
            ]);
        }
 
    }
}