->sortable(), searchable(), and pagination not working with Livewire
Adding ->sortable() and searchable() in columns adds the sort icon and the search bar but clicking the sort icon does nothing and searching columns doesn't work. I can also see the pagination for the tables but I clicking next page does nothing. I tried adding ->paginated() but it didn't work.
resources/views/livewire/list-pending-email-student-portal.blade.php:
<div class="relative overflow-x-auto">
{{ $this->table->render() }}
</div>
<div class="relative overflow-x-auto">
{{ $this->table->render() }}
</div>
1 Reply
app/Livewire/ListPendingEmailStudentPortal.php:
resources/views/credential-generation-dashboard.blade.php:
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\PendingEmailStudentPortal;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Builder;
class ListPendingEmailStudentPortal extends Component implements HasTable, HasForms
{
use InteractsWithTable, InteractsWithForms;
public function render()
{
return view('livewire.list-pending-email-student-portal');
}
public function table(Table $table): Table
{
return $table
->query(PendingEmailStudentPortal::with('student'))
->columns([
TextColumn::make('student.student_no')
->label('Student Number')
->sortable(),
TextColumn::make('student.last_name')
->label('Last Name'),
TextColumn::make('student.first_name')
->label('First Name'),
TextColumn::make('student.middle_name')
->label('Middle Name'),
TextColumn::make('student.personal_email')
->label('Personal Email'),
TextColumn::make('Status')
->default('Pending'),
])
->defaultSort('student.student_no', 'asc');
}
}
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\PendingEmailStudentPortal;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Builder;
class ListPendingEmailStudentPortal extends Component implements HasTable, HasForms
{
use InteractsWithTable, InteractsWithForms;
public function render()
{
return view('livewire.list-pending-email-student-portal');
}
public function table(Table $table): Table
{
return $table
->query(PendingEmailStudentPortal::with('student'))
->columns([
TextColumn::make('student.student_no')
->label('Student Number')
->sortable(),
TextColumn::make('student.last_name')
->label('Last Name'),
TextColumn::make('student.first_name')
->label('First Name'),
TextColumn::make('student.middle_name')
->label('Middle Name'),
TextColumn::make('student.personal_email')
->label('Personal Email'),
TextColumn::make('Status')
->default('Pending'),
])
->defaultSort('student.student_no', 'asc');
}
}
@filamentStyles
<div wire:init="$refresh">
<x-app-layout>
<!-- Header -->
<x-header title="Credential Generation" />
<div x-data="{ activeTab: 'student-portal-account' }">
<x-tab-navigation tab1Title="Student Portal Account" tab2Title="PLM Email" />
<!-- Tab Contents -->
<div x-show="activeTab === 'student-portal-account'">
<section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="student-portal-account-tab">
<!-- Buttons Container -->
<div class="flex items-center justify-between mb-4">
<x-email-all-button student-count="2000" button-text="Email all" />
<x-edit-email-template-button modal-id="sp-account-modal"
modal-title="Student Portal Account Email Template" />
</div>
<!-- Pending Credentials Table -->
<livewire:list-pending-email-student-portal />
</section>
</div>
<div x-show="activeTab === 'plm-email'">
<section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="plm-email-tab">
<!-- Buttons Container -->
<div class="flex items-center justify-between mb-4">
<x-email-all-button student-count="2000" button-text="Email all" />
<x-edit-email-template-button modal-id="plm-email-modal"
modal-title="PLM Email Credentials Email Template" />
</div>
<!-- Pending Credentials Table -->
<livewire:list-pending-email-p-l-m-email />
</section>
</div>
</div>
</x-app-layout>
</div>
@filamentStyles
<div wire:init="$refresh">
<x-app-layout>
<!-- Header -->
<x-header title="Credential Generation" />
<div x-data="{ activeTab: 'student-portal-account' }">
<x-tab-navigation tab1Title="Student Portal Account" tab2Title="PLM Email" />
<!-- Tab Contents -->
<div x-show="activeTab === 'student-portal-account'">
<section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="student-portal-account-tab">
<!-- Buttons Container -->
<div class="flex items-center justify-between mb-4">
<x-email-all-button student-count="2000" button-text="Email all" />
<x-edit-email-template-button modal-id="sp-account-modal"
modal-title="Student Portal Account Email Template" />
</div>
<!-- Pending Credentials Table -->
<livewire:list-pending-email-student-portal />
</section>
</div>
<div x-show="activeTab === 'plm-email'">
<section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="plm-email-tab">
<!-- Buttons Container -->
<div class="flex items-center justify-between mb-4">
<x-email-all-button student-count="2000" button-text="Email all" />
<x-edit-email-template-button modal-id="plm-email-modal"
modal-title="PLM Email Credentials Email Template" />
</div>
<!-- Pending Credentials Table -->
<livewire:list-pending-email-p-l-m-email />
</section>
</div>
</div>
</x-app-layout>
</div>