Filament with Livewire, sort and search not working
Blade file:
More code in the replies
<div class="relative overflow-x-auto">
{{ $this->table->render() }}
</div>
<div class="relative overflow-x-auto">
{{ $this->table->render() }}
</div>
@filamentStyles
<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" />
<!-- Student Portal Account Tab -->
<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 callback="handleEmailAll" 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>
<!-- PLM Email Tab -->
<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 callback="handleEmailAll" 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>
@vite('resources/js/credential-generation-dashboard.js')
@filamentStyles
<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" />
<!-- Student Portal Account Tab -->
<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 callback="handleEmailAll" 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>
<!-- PLM Email Tab -->
<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 callback="handleEmailAll" 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>
@vite('resources/js/credential-generation-dashboard.js')
1 Reply
Livewire file:
<?php
namespace App\Livewire;
use App\Mail\StudentPortalCredentials;
use App\Models\PendingEmailStudentPortal;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Actions\Action;
use Filament\Tables\Actions\BulkAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Str;
use Livewire\Component;
class ListPendingEmailStudentPortal extends Component implements HasTable, HasForms
{
use InteractsWithTable, InteractsWithForms;
protected $listeners = ['emailAll' => 'emailAll'];
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')
->paginated(false);
}
public function handleClick()
{
$this->dispatchBrowserEvent('emailAll');
}
<?php
namespace App\Livewire;
use App\Mail\StudentPortalCredentials;
use App\Models\PendingEmailStudentPortal;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Actions\Action;
use Filament\Tables\Actions\BulkAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Str;
use Livewire\Component;
class ListPendingEmailStudentPortal extends Component implements HasTable, HasForms
{
use InteractsWithTable, InteractsWithForms;
protected $listeners = ['emailAll' => 'emailAll'];
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')
->paginated(false);
}
public function handleClick()
{
$this->dispatchBrowserEvent('emailAll');
}