Filament Tips : Modal View on the Table Action

Introduction

Today, i got question from my sponsors. they ask me how to change filamentphp table row action (default, will be redirect to edit / view page). so, what he wanted is showing a modal slideOver view after click the table row (a record of the list).

Let's Begin

In this case, im using a resource called Example. So, don't be confused.

So, we need set url record to null and add a ViewAction.

public static function table(Table $table): Table { return $table ->actions([ ViewAction::make()->slideOver() ]) ->recordUrl(url: null) } 

it will be look like this

And it don't stop there, he didn't want the view show a disabled from, but a information like infolist.

in filament, i didn't found how to change the form to the infolist.

Then?

Create a custom view, name it example_view.blade.php

Next things is, how we get a record of clicked row.

so, in ListRecord there is a property called cachedMountedTableActionRecord. They cached a clicked row (basically, it can used for an actions of the table).

Next, im add a method called cachedMountedTableActionRecordInfolist to the ListExample page and return a Infolist.

public function cachedMountedTableActionRecordInfolist(Infolist $infolist) : Infolist { $data = $this->cachedMountedTableActionRecord; return $infolist ->state($data->toArray()) ->schema([ TextEntry::make('name'), TextEntry::make('created_at') ]); } 

Next, modify the example_view.blade.php and call the method.

{{$this->cachedMountedTableActionRecordInfolist}} 

Last, Change the ViewAction to Action in the ExampleResource.

public static function table(Table $table): Table { return $table ->actions([ Tables\Actions\Action::make('view') ->slideOver() ->modalContent(view('example_view')) ->modalSubmitAction(false) ->modalCancelActionLabel('Close'), ]) ->recordUrl(url: null) } 

Finally looks like this.