<div> @if($searchable || $showColumnSelect || $showPageSizeSelect) <div class="table-controls pb-2 d-flex justify-content-between align-items-center"> <div> @if($searchable) <input class="form-control border-secondary" type="search" wire:model.live.debounce.{{ $searchDebounce}}="search" placeholder="{{ __('Search') }}..." /> @endif </div> <div class="d-flex gap-3"> @if($showColumnSelect) <div class="dropdown"> <button type="button" class="btn btn-outline-secondary border-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"> {{ __('Columns') }} </button> <div class="dropdown-menu p-4"> @foreach($allColumns->filter(fn($c) => $c->getShowInSelect()) as $column) <label class="d-block"> <input type="checkbox" wire:model.live="activeColumns" value="{{ $column->name }}" /> {{ $column->getTitle() }} </label> @endforeach </div> </div> @endif @if($showPageSizeSelect) <select wire:model.live="pageSize" class="form-select border-secondary"> @foreach($pageSizes as $size) <option value="{{ $size }}">{{ $size }}</option> @endforeach </select> @endif </div> </div> @endif <table class="table"> <colgroup> @foreach($columns as $column) <col @class([$column->getColClass()]) /> @endforeach </colgroup> <thead> <tr> @foreach($columns as $column) <th scope="col">{{ $column->getTitle() }}</th> @endforeach </tr> </thead> <tbody> @foreach($data as $row) <tr> @foreach($columns as $column) {{ $column->view($row) }} @endforeach </tr> @endforeach </tbody> </table> <div class="table-pagination d-flex justify-content-between align-items-center"> {{ $data->links() }} <div> {{ __('Showing') }} {{ $data->count() }} {{ __('of') }} {{ $data->total() }} </div> </div> </div>