How to show livewire component as modal window for filament table action

I am going to show a livewire component in modal window when user clicks a filament table action.

   protected function getTableActions()
    {
        return [
            ActionGroup::make([
                ViewAction::make()->form([
                    TextInput::make('name'),
                    TextInput::make('email'),
                ]),
                DeleteAction::make(),
                ForceDeleteAction::make(),
                RestoreAction::make(),
                Action::make('assign')
                    ->icon('heroicon-o-trash')
            ])
        ];
    }

   protected function getTableActions()
    {
        return [
            ActionGroup::make([
                ViewAction::make()->form([
                    TextInput::make('name'),
                    TextInput::make('email'),
                ]),
                DeleteAction::make(),
                ForceDeleteAction::make(),
                RestoreAction::make(),
                Action::make('assign')
                    ->icon('heroicon-o-trash')
            ])
        ];
    }

When clicked assign button, I want to show a modal window and the use a livewire component as modal window content. I tried to find the solution and looked around filament table actin docs, but I couldn't find. Please help me to find what functions to call for making custom filament table action for showing a livewire component in modal window.

Solution:

this? ```php Action::make('assign') ->icon('heroicon-o-trash') ->modalcontent(new HtmlString(Blade::render('@livewire('my-component')')))...

Jump to solution

18 Replies

LeandroFerreira•17mo ago

what about Action->form() ? https://filamentphp.com/docs/2.x/tables/actions#filling-default-data

Actions - Table Builder - Filament

_metadevOP•17mo ago

I know Action->form() but how can I load livewire component as modal using that function?

LeandroFerreira•17mo ago

did you try ->modalContent()?

_metadevOP•17mo ago

Yes, but that only can include a blade file But I want to load a livewire component. 😦

LeandroFerreira•17mo ago

try Blade::render('@livewire(\'my-component\')')

_metadevOP•17mo ago

let me try now. do you mean to call like this?

Action::make('assign')
  ->icon('heroicon-o-trash')
  ->modalcontent(Blade::render('@livewire(\'my-component\')'))

Action::make('assign')
  ->icon('heroicon-o-trash')
  ->modalcontent(Blade::render('@livewire(\'my-component\')'))

LeandroFerreira•17mo ago

actually this:

Action::make('assign')
  ->icon('heroicon-o-trash')
  ->modalcontent(new HtmlString(Blade::render('@livewire(\'my-component\')')))

Action::make('assign')
  ->icon('heroicon-o-trash')
  ->modalcontent(new HtmlString(Blade::render('@livewire(\'my-component\')')))

_metadevOP•17mo ago

Yes, I made as you wrote but no modal appears when I click Assign

LeandroFerreira•17mo ago

->action(function() {})

_metadevOP•17mo ago

The same.

Abi•17mo ago

create a blade file and load the component in it using @livewire and load the blade using modalContent

Solution

LeandroFerreira•17mo ago

this?

Action::make('assign')
    ->icon('heroicon-o-trash')
    ->modalcontent(new HtmlString(Blade::render('@livewire(\'my-component\')')))
    ->action(function () {
    })

Action::make('assign')
    ->icon('heroicon-o-trash')
    ->modalcontent(new HtmlString(Blade::render('@livewire(\'my-component\')')))
    ->action(function () {
    })

_metadevOP•17mo ago

That works great. Please help more. How can I pass variable to livewire there? I want to pass id of record to livewire.

class MyComponent extends Component
{
    public function render()
    {
        return view('livewire.my-component');
    }

    public function mount($id)
    {
    }
}

class MyComponent extends Component
{
    public function render()
    {
        return view('livewire.my-component');
    }

    public function mount($id)
    {
    }
}

I made it working. Thanks friend. Can I add you as friend?

Abi•17mo ago

you can't add people on support 🙂

_metadevOP•17mo ago

what do you mean and who are you? Really Thanks

LeandroFerreira•17mo ago

you can pass additional parameters https://laravel-livewire.com/docs/2.x/rendering-components something like this:

->modalcontent(fn ($record)  => new HtmlString(Blade::render('@livewire(\'my-component\', [\'id\' => ' . $record->id . '])')))

->modalcontent(fn ($record)  => new HtmlString(Blade::render('@livewire(\'my-component\', [\'id\' => ' . $record->id . '])')))

Livewire

Rendering Components | Livewire

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

_metadevOP•17mo ago

Yes. Please accept me I sent you request

LeandroFerreira•17mo ago

did you try the code? no worries, but if you have questions, please ask on #❓┊help and check the #✅┊rules

Gaming

Programming

How to show livewire component as modal window for filament table action