Filament Table Row Click: Open Modal Window View

Filament Table has a feature of clicking on the row and landing on the Edit page. What if you want to change that and instead open a modal with the record data? Let's do that using Table Actions.

By default, the table row has a link. First, we must disable the link by setting recordUrl to null in the table.

class PostResource extends Resource
{
    // ...
 
    public static function table(Table $table): Table
    {
        return $table
            ->columns(...)
            ->filters(...)
            ->actions(...)
            ->bulkActions(...)
            ->recordUrl(null); 
    }
 
    // ...
}

Now, a method recordAction is used to set the action for a whole row. In this method, we can pass a View Action class.

use Filament\Tables;
 
class PostResource extends Resource
{
    // ...
 
    public static function table(Table $table): Table
    {
        return $table
            ->columns(...)
            ->filters(...)
            ->actions(...)
            ->bulkActions(...)
            ->recordAction(Tables\Actions\ViewAction::class) 
            ->recordUrl(null);
    }
 
    // ...
}

And now, when clicked on a row, the view action will be called, and a modal with a records view will be opened.

Notice: don't forget that when creating a Resource, you also need to create a View. If you forgot to create, you can create a View to an existing Resource.

If you want more Filament examples, you can find more real-life projects on our FilamentExamples.com.