FilamentF
Filament•2y ago
Adam Holmes

Filament table in Modal - livewire component

Hi, this is what I'm looking to do:

  1. An edit page as part of a resource - lets call that Foo ✅
  2. On that edit page, have an action in the header to select a Bar ✅
  3. When clicking that action, open a modal which has a table on it (and potentially a form at the top in future) ❌
I've done steps 1 and 2 and I've managed to get a modal to open in step 3.

I've created a livewire component to display the table in the modal and a view that includes the component too.

EditFoo.php
...
protected function getHeaderActions(): array
{
    return [
        Action::make('selectBar')
            ->modalHeading('Select Bar')
            ->modalContent(view('filament.resources.bar-resource.pages.select-bar-modal')),
    ];
}
...


SelectBarModal.php
class SelectBarModal extends Component implements HasTable, HasForms
{
    use InteractsWithForms;
    use InteractsWithTable;

    public function table(Table $table): Table
    {
        return $table
            ->query(
                Bar::query()
            )
            ->columns([
                TextColumn::make('name')->label('Name'),
            ])
            ->filters([])
            ->actions([]);
   }
}

public function render()
{
    return view('filament.resources.bar-resource.pages.select-bar-modal');
}


select-bar-modal.blade.php
<x-filament::modal id="selectBarModal" width="lg" wire:model.defer="showingSelectBarModal"> <form wire:submit.prevent="selectBar"> @livewire('select-bar-modal') <x-slot name="header"> <x-filament::input type="search" wire:model="search" placeholder="Search bars..." /> </x-slot> </form> </x-filament::modal>

I'm not sure if I'm missing a step or if I've added too much. I'm currently receiving the error: Xdebug has detected a possible infinite loop, and aborted your script with a stack depth of '1024' frame which points to Bar::query in the component class.

Any thoughts would be greatly appreciated.
Was this page helpful?