© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
6 replies
Benjámin

Filament Table + Livewire UI Custom Modal

Hi!
I have a Livewire Component which
InteractsWithTable
InteractsWithTable
:
...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}
...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}

The emit function should open another Livewire component:
use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}
use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}


When I click on the Action, I have an error pointing on the variable in the
getTableQuery()
getTableQuery()
function:
Typed property $wedding must not be accessed before initialization
Typed property $wedding must not be accessed before initialization

Tried to replace the code in the function to:
return Item::query();
return Item::query();
and the modal works fine, but I need to filter for the appropriate Items.

What am I missing?
Any other improvements, that I can make?
Thanks
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Filament table in Modal - livewire component
FilamentFFilament / ❓┊help
2y ago
Table -> Modal -> Filament Table
FilamentFFilament / ❓┊help
2y ago
Filament table in livewire
FilamentFFilament / ❓┊help
3y ago
Filament - Custom Modal - Help
FilamentFFilament / ❓┊help
2y ago