Filament•5mo ago

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

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

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.

1 Reply

Adam HolmesOP•5mo ago

Kept it as simple as can be in the view and added only {{ $this->table }} but I get the error Property [$table] not found on component: [app.filament.resources.visit-resource.pages.edit-visit] I thought that $this->table would be automatically populated from the component? It seems to be trying to load $this->table from the EditFoo page rather than the component. I've no idea how to make the modal load the component rather than just the view that the component uses

Gaming

Programming

Filament table in Modal - livewire component