F
Filament•7mo ago
Vhelkhana

->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
Vhelkhana
VhelkhanaOP•7mo ago
app/Livewire/ListPendingEmailStudentPortal.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');
    }
}
resources/views/credential-generation-dashboard.blade.php: 
@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>
Want results from more Discord servers?
Add your server