Re-rendering Custom Table

Hi! I am currently learning filament it seems that my custom component isn't re-rendering.. how you can help me with this..

I set select as reactive

Forms\Components\Select::make('section_id')
                    ->relationship('section', 'name')
                    ->reactive()
                    ->afterStateUpdated(fn ($state, Forms\Set $set) => $set('sectionId', $state))
                    ->required(),
                Forms\Components\Livewire::make(SchedulesTable::class)
                    ->columnSpanFull()
                    ->hidden(fn (Forms\Get $get) => empty($get('sectionId')))

My ScheduleTable

<?php

namespace App\Livewire;

use App\Models\Schedule;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;

class SchedulesTable extends Component implements HasTable, HasForms
{
    use InteractsWithForms;
    use InteractsWithTable;

    use InteractsWithForms;
    use InteractsWithTable;

    public $sectionId; // Make sectionId public

    public function render()
    {
        return view('livewire.schedules-table');
    }

    public function table(Table $table): Table
    {
        return $table
            ->heading('Subject')
            ->query(Schedule::query()
                ->where('section_id', $this->sectionId)
            )
            ->columns([
                TextColumn::make('subject.code')->label('Subject Code'),
                TextColumn::make('subject.name')->label('Subject Name'),
                TextColumn::make('start_time')->time('h:i A'),
                TextColumn::make('end_time')->time('h:i A'),
                TextColumn::make('day'),
                TextColumn::make('teacher.name')->label('Teacher'), // Access teacher's name through relationship
            ]);
    }
}

eskiesirius

1 year ago

Level 7

I was able to fix this by:

Forms\Components\Select::make('section_id')
                    ->relationship('section', 'name')
                    ->reactive()
                    ->afterStateUpdated(function (Component $livewire, $state) {
                        $livewire->dispatch('refreshSchedules', $state);
                    })
                    ->required(),
                Forms\Components\Livewire::make(SchedulesTable::class, fn (Forms\Get $get) => ['sectionId' => $get('section_id')])
                    ->columnSpanFull()
                    ->hidden(fn (Forms\Get $get) => empty($get('section_id')))

My Schedule Table

<?php

namespace App\Livewire;

use App\Models\Schedule;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Attributes\On;
use Livewire\Component;

class SchedulesTable extends Component implements HasTable, HasForms
{
    use InteractsWithForms;
    use InteractsWithTable;

    public $sectionId;

    public function render()
    {
        return view('livewire.schedules-table');
    }

    #[On('refreshSchedules')]
    public function updateTable($newSectionId)
    {
        $this->sectionId = $newSectionId;
        $this->resetTable();
    }

    public function table(Table $table): Table
    {
        return $table
            ->heading('Subject')
            ->query(Schedule::query()
                ->where('section_id', $this->sectionId)
            )
            ->columns([
                TextColumn::make('subject.code')->label('Subject Code'),
                TextColumn::make('subject.name')->label('Subject Name'),
                TextColumn::make('start_time')->time('h:i A'),
                TextColumn::make('end_time')->time('h:i A'),
                TextColumn::make('day'),
                TextColumn::make('teacher.name')->label('Teacher'),
            ]);
    }
}

the only problem is that it calls the table function twice. This is the flow: table -> receive event -> table

Please or to participate in this conversation.