Filament•7mo ago

Loading a table widget on (form) select change.

Hi I made a table widget that is displayed under my form. When I change a select, I would like it to appear and load data (preferably without reloading the page). Is there any way to easily achieve this?

4 Replies

Dennis Koch•7mo ago

Not sure whether table widgets are separate Livewire components. You would send an event between them in that case.

ToonVDOP•7mo ago

Thanks for the idea, will look into it and come back here.

         return $form
             ->schema([
                 Forms\Components\Select::make('scoped')
                     ->label('Is scoped')
                     ->options([1 => 'Ja', 0 => 'Nee'])
                     ->reactive()
                     ->afterStateUpdated(fn ($state, $livewire) => $livewire->dispatch('toggleTableWidget', $state))
             ]);

         return $form
             ->schema([
                 Forms\Components\Select::make('scoped')
                     ->label('Is scoped')
                     ->options([1 => 'Ja', 0 => 'Nee'])
                     ->reactive()
                     ->afterStateUpdated(fn ($state, $livewire) => $livewire->dispatch('toggleTableWidget', $state))
             ]);

 <?php
 
 namespace App\Filament\Resources\UserResource\Widgets;
 
 use Filament\Tables\Columns\TextColumn;
 use Filament\Widgets\TableWidget as BaseWidget;
 use Illuminate\Database\Eloquent\Builder;
 use App\Models\Account;
 use Illuminate\Database\Eloquent\Model;
 
 class UserAccounts extends BaseWidget
 {
     public ?Model $record = null;
     public bool $showTableWidget;
     protected static string $view = 'toon.widgets.table-widget';
 
     protected $listeners = ['toggleTableWidget'];
 
     public function toggleTableWidget($showTableWidget) {
         $this->showTableWidget = $showTableWidget;
     }
 
     protected function getTableQuery(): Builder
     {
         return Account::where('user_id', '=', $this->record->client_id);
     }
 
     protected function getTableColumns(): array
     {
         return [
             TextColumn::make('id'),
             TextColumn::make('name'),
             TextColumn::make('description')
         ];
     }

 <?php
 
 namespace App\Filament\Resources\UserResource\Widgets;
 
 use Filament\Tables\Columns\TextColumn;
 use Filament\Widgets\TableWidget as BaseWidget;
 use Illuminate\Database\Eloquent\Builder;
 use App\Models\Account;
 use Illuminate\Database\Eloquent\Model;
 
 class UserAccounts extends BaseWidget
 {
     public ?Model $record = null;
     public bool $showTableWidget;
     protected static string $view = 'toon.widgets.table-widget';
 
     protected $listeners = ['toggleTableWidget'];
 
     public function toggleTableWidget($showTableWidget) {
         $this->showTableWidget = $showTableWidget;
     }
 
     protected function getTableQuery(): Builder
     {
         return Account::where('user_id', '=', $this->record->client_id);
     }
 
     protected function getTableColumns(): array
     {
         return [
             TextColumn::make('id'),
             TextColumn::make('name'),
             TextColumn::make('description')
         ];
     }

 <x-filament-widgets::widget class="fi-wi-table">
     @if($showTableWidget)
         {{ \Filament\Support\Facades\FilamentView::renderHook('widgets::table-widget.start', scopes: static::class) }}
         {{ $this->table }}
 
         {{ \Filament\Support\Facades\FilamentView::renderHook('widgets::table-widget.end', scopes: static::class) }}
     @endif
 </x-filament-widgets::widget>

 <x-filament-widgets::widget class="fi-wi-table">
     @if($showTableWidget)
         {{ \Filament\Support\Facades\FilamentView::renderHook('widgets::table-widget.start', scopes: static::class) }}
         {{ $this->table }}
 
         {{ \Filament\Support\Facades\FilamentView::renderHook('widgets::table-widget.end', scopes: static::class) }}
     @endif
 </x-filament-widgets::widget>

I have a feeling I am making it too complex but having a hard time in getting what I need in canView. So I created my own template. If anyone has any ideas for improvement, much appreciated!

Dennis Koch•7mo ago

Can't you just use canView() { return $this->showTableWidget; } ?

ToonVDOP•7mo ago

canView is static Late reply, I missed this xD

Gaming

Programming

Loading a table widget on (form) select change.