Filament•2y ago•

3 replies

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

Foo

2. On that edit page, have an action in the header to select a

Bar

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

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

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

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>


<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

Xdebug has detected a possible infinite loop, and aborted your script with a stack depth of '1024' frame

which points to

Bar::query

Bar::query

in the component class.

Any thoughts would be greatly appreciated.

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

Foo

2. On that edit page, have an action in the header to select a

Bar

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

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

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

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>


<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

Xdebug has detected a possible infinite loop, and aborted your script with a stack depth of '1024' frame

which points to

Bar::query

Bar::query

in the component class.

Any thoughts would be greatly appreciated.

Filament table in Modal - livewire component

Filament table in Modal - livewire component

Similar Threads

Similar Threads

Similar Threads