Filament•12mo ago

How to open modal by clicking table column?

As a developer, I'm using Filament for my project and want to open the modal by clicking the table column, how can I do it? Thank you! Tables\Columns\IconColumn::make('video_interview_url') ->label('Video') ->icon('heroicon-o-video-camera') ->action(),

20 Replies

tommythecoat•12mo ago

Personally I used the ViewColumn feature and built a livewire component to use a button within the cell which triggers a showModal() method and then the blade injection function $getRecord(). Not sure if this is the most ideal way but it worked for my purpose 😁

tommythecoat•12mo ago

https://filamentphp.com/docs/3.x/tables/columns/custom

Custom columns - Table Builder - Filament

scalarOP•12mo ago

👍 Thanks for your advice! And I used livewire component: Tables\Columns\IconColumn::make('video_interview_url') ->label('Video') ->icon('heroicon-o-video-camera') ->action( Action::make('campaing-video') ->modalContent(view('livewire.campaign-video')) )

scalarOP•12mo ago

scalarOP•12mo ago

I'm now trying to pass column data to show it in modal

tommythecoat•12mo ago

Looks like this could be useful (from docs) but not tried it: #Passing data to the custom modal content You can pass data to the view by returning it from a function. For example, if the $record of an action is set, you can pass that through to the view: use Illuminate\Contracts\View\View; Action::make('advance') ->action(fn (Contract $record) => $record->advance()) ->modalContent(fn (Contract $record): View => view( 'filament.pages.actions.advance', ['record' => $record], ))

scalarOP•12mo ago

Awesome! I've used below code, but how to use the parameters in livewire component?

Tables\Columns\IconColumn::make('video_interview_url')
                    ->label('Video')
                    ->icon('heroicon-o-video-camera')
                    ->action(
                        Action::make('campaing-video')
                            ->modalContent(fn(Campaign $record): View => view(
                                'livewire.campaign-video',
                                ['record' => $record],
                            ))
                    )

Tables\Columns\IconColumn::make('video_interview_url')
                    ->label('Video')
                    ->icon('heroicon-o-video-camera')
                    ->action(
                        Action::make('campaing-video')
                            ->modalContent(fn(Campaign $record): View => view(
                                'livewire.campaign-video',
                                ['record' => $record],
                            ))
                    )

this is livewire.php

<?php

namespace App\Livewire;

use Livewire\Component;

class CampaignVideo extends Component
{
    public $data;

   public function mount($record): void
    {
        $this->data = $record;
    }

    public function render()
    {
        return view('livewire.campaign-video');
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;

class CampaignVideo extends Component
{
    public $data;

   public function mount($record): void
    {
        $this->data = $record;
    }

    public function render()
    {
        return view('livewire.campaign-video');
    }
}

and this is livewire.blade.php

<div>
      <h1>data: "{{ $this->data }}"</h1>

    
    <x-filament-actions::modals />
</div>

<div>
      <h1>data: "{{ $this->data }}"</h1>

    
    <x-filament-actions::modals />
</div>

Unfortunately, it is not working, how can I use the data passed in the livewire component? Thanks.

tommythecoat•12mo ago

Have you tried using the $getRecord() method in your blade file? I know this works with a ViewColumn but not tried in conjunction with modalContent. If it works you shouldn't even need to use the callback in modalContent

scalarOP•12mo ago

Could you please send me sample code? 🙏 😀

scalarOP•12mo ago

tommythecoat•12mo ago

So the view I passed pointed to a livewire button component and using wire:click I passed the $getRecord()->id to the popUpModal method on my Table component and saved it to a selectedRecordId variable that I could pass back to the modal within my table blade component DD on the get record method and see if you can get anything back from it at all

scalarOP•12mo ago

Ok I will try it Thanks for your support! You are senior developer!!! Good news! I did it like below:

 Tables\Columns\IconColumn::make('video_interview_url')
                    ->label('Video')
                    ->icon('heroicon-o-video-camera')
                    ->action(
                        Action::make('campaign-video')
                            ->modalContent(fn(Campaign $record): View => view(
                                'livewire.campaign-video',
                                ['record' => $record],
                            ))
                            ->modalCancelAction(false)
                            ->modalSubmitAction(false)
                    )

 Tables\Columns\IconColumn::make('video_interview_url')
                    ->label('Video')
                    ->icon('heroicon-o-video-camera')
                    ->action(
                        Action::make('campaign-video')
                            ->modalContent(fn(Campaign $record): View => view(
                                'livewire.campaign-video',
                                ['record' => $record],
                            ))
                            ->modalCancelAction(false)
                            ->modalSubmitAction(false)
                    )

<div>
    <h1>  {{ json_encode($record) }} </h1>

<iframe id="Geeks3" width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>

</div>

<div>
    <h1>  {{ json_encode($record) }} </h1>

<iframe id="Geeks3" width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>

</div>

We can just the $record directly in blade.php Anyway, I'd appreciate your support!

tommythecoat•12mo ago

Excellent news. Nice work. Now you're the senior developer 😁

scalarOP•12mo ago

🤣 😉 I'd like to see you if you don't mind when you are available Can we have the video call when you are available? I'm a Laravel/Vue developer from Hongkong, and you?

tommythecoat•12mo ago

I work in cybersec in the UK so our timezones may be a bit out!!

scalarOP•12mo ago

I'm working with a US client so I'm working now in the EST timezone Don't worry about the timezone, and just asking so let me know if you are ready Have a good evening!

tommythecoat•12mo ago

Ok cool. You too mate and speak soon

scalarOP•12mo ago

PS: do you know mimul.js?

tommythecoat•12mo ago

No I'm afraid not

scalarOP•12mo ago

Ok, good luck! Hi @tommythecoat Sorry but can you help me one thing? Do you know many to many relationship?

Gaming

Programming

How to open modal by clicking table column?