Laravel livewire datatables look alike component

custom-pagination.blade.php

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link"
                       wire:click="setPage('{{$paginator->previousPageURL()}}')"
                       href="#"
                       rel="prev"
                       aria-label="@lang('pagination.previous')">&lsaquo;</a>
                </li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                        @else
                            <li class="page-item">
                                <a class="page-link"
                                   wire:click="setPage('{{ $url }}')"
                                   href="#">{{ $page }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link"
                       href="#"
                       rel="next"
                       wire:click="setPage('{{$paginator->nextPageUrl()}}')"
                       aria-label="@lang('pagination.next')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

sort_icon.blade.php

@if($sortField !== $field)
    <i class="text-muted fas fa-sort"></i>
@elseif($sortAsc)
    <i class="fas fa-sort-up"></i>
@else
    <i class="fas fa-sort-down"></i>
@endif

user-pagination.blade.php

<div>
    <div class="card-body">
        <div style="display: flex">
            <h4 class="card-title">Staff List</h4>
        </div>
        <div class="m-1" style="display: flex">
            <span class="mr-2">Show</span>
            <select wire:model="perPage">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
            <div style="margin-left: auto">
                <input wire:model="search" type="search" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th width="2%">#</th>
                    <th width="5%">Staff</th>
                    <th width="18%"><a role='button' wire:click.prevent="sortBy('full_name')" href="#">
                            Full Name
                            @include('sort_icon', ['field'=>'full_name'])
                        </a></th>
                    <th width="10%"><a role='button' wire:click.prevent="sortBy('contact')" href="#">
                            Phone
                            @include('sort_icon', ['field'=>'contact'])
                        </a></th>
                    <th width="10%"><a role='button' wire:click.prevent="sortBy('email')" href="#">
                            Email
                            @include('sort_icon', ['field'=>'email'])
                        </a></th>
                    @canany(['update', 'delete'], new \App\SOSC\Models\User())
                        <th width="20%">Actions</th>
                    @endcan
                </tr>
                </thead>
                <tbody>
                @forelse($staffs as $staff)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td class="py-1">
                            <img src="{{ $staff->profileImagePath }}" alt="image">
                        </td>
                        <td>{{ $staff->full_name }}</td>
                        <td>{{ $staff->contact }}</td>
                        <td>{{ $staff->email ?? \App\SOSC\Constants\General::NA }}</td>
                        <td>
                            @can('update', $staff)
                                <a href="{{ route('backend.staffs.edit', $staff->id) }}" class="btn btn-primary btn-rounded">
                                    <i class="mdi mdi-tooltip-edit"></i> Edit
                                </a>
                            @endcan
                            @can('delete', $staff)
                                <a href="#"
                                   class="btn btn-danger btn-rounded btn-fw delete-confirmation"
                                   data-body="Are you sure you want to delete the staff?"
                                   data-title="Confirmation Required"
                                   data-target-url="{{ route('backend.staffs.destroy',$staff->id) }}"
                                   data-request-method="delete"
                                   style="cursor: pointer">
                                    <i class="mdi mdi-delete-forever"></i> Delete
                                </a>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">{{ \App\SOSC\Constants\Messages::NO_DATA_FOUND }}</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
            {{ $staffs->links() }}
        </div>
        Showing {{ $staffs->firstItem() }} to {{ $staffs->lastItem() }} out of {{ $staffs->total() }} results
    </div>
</div>

UserPagination.php

<?php

namespace App\Http\Livewire;

use App\SOSC\Models\User;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Pagination\Paginator;
use Illuminate\View\View;
use Livewire\Component;
use Livewire\WithPagination;

/**
 * Class StaffList
 * @package App\Http\Livewire
 */
class StaffList extends Component
{
    use WithPagination;


    /**
     * @var
     */
    public $search;
    /**
     * @var int
     */
    public $currentPage = 1;

    /**
     * @var int
     */
    public $perPage = 10;

    /**
     * @var string
     */
    public $sortField = 'full_name';
    /**
     * @var bool
     */
    public $sortAsc = true;

    /**
     * @var string[]
     */
//    protected $updatesQueryString = ['search', 'perPage', 'currentPage'];

    protected $updatesQueryString = ['search' => ['except' => '']];


    /**
     * @param $sortField
     */
    public function sortBy($sortField)
    {
        if ( $this->sortField === $sortField ) {
            $this->sortAsc = !$this->sortAsc;
        } else {
            $this->sortAsc = true;
        }

        $this->sortField = $sortField;
    }

    /**
     * Mount method
     */
    public function mount()
    {
        $this->search = request()->query('search', $this->search);
    }

    /**
     * @return Application|Factory|View
     */
    public function render()
    {
        return view(
            'livewire.staff-list',
            [
                'staffs' => User::where('full_name', 'ilike', '%'.$this->search.'%')
                                ->orWhere('email', 'ilike', '%'.$this->search.'%')
                                ->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
                                ->paginate($this->perPage),
            ]
        );
    }

    /**
     * @param string $targetUrl
     */
    public function setPage(string $targetUrl)
    {
        $this->currentPage = explode('page=', $targetUrl)[1];

        Paginator::currentPageResolver(
            function () {
                return $this->currentPage;
            }
        );
    }

//    /**
//     * @return string
//     */
//    public function paginationView()
//    {
//        return 'livewire.pagination';
//    }
}

web.php

<?php

/** @var Router $router */

use Illuminate\Routing\Router;

$router->livewire('livewire/staffs', 'staff-list')->layout('app_layouts.base_layout');