Loading a table widget on (form) select change.

ToonVD · 2024-04-25T19:29:59.689Z

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?

D

Dennis Koch•4/25/24, 8:12 PM

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

T

ToonVDOP•4/25/24, 8:46 PM

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

T

ToonVDOP•4/26/24, 8:28 AM

         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))
             ]);

         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')
         ];
     }

 <?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>

 <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>

T

ToonVDOP•4/26/24, 8:30 AM

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!

D

Dennis Koch•4/26/24, 9:20 AM

Can't you just use

canView() { return $this->showTableWidget; }

canView() { return $this->showTableWidget; }

canView() { return $this->showTableWidget; }

canView() { return $this->showTableWidget; } ?

T

ToonVDOP•5/3/24, 8:51 AM

canView is static

T

ToonVDOP•5/3/24, 8:51 AM

Late reply, I missed this xD

Loading a table widget on (form) select change.

Similar Threads

Similar Threads

Similar Threads