Filament: Table Row Action - View Modal with Infolist

Typically, Filament modals contain a form or a message, but did you know you can also use them to display an info list? This is useful when you don't want a full-view page!

This can be achieved by adding a new Action to our table (this works in table and custom pages):

Resource

// ...
 
public static function table(Table $table): Table
{
return $table
    ->actions([
        Tables\Actions\Action::make('View Information')
            // This is the important part!
            ->infolist([
                // Inside, we can treat this as any info list and add all the fields we want!
                Section::make('Personal Information')
                    ->schema([
                        TextEntry::make('first_name'),
                        TextEntry::make('last_name'),
                    ])
                    ->columns(),
                Section::make('Contact Information')
                    ->schema([
                        TextEntry::make('email'),
                        TextEntry::make('phone_number'),
                    ])
                    ->columns(),
                Section::make('Additional Details')
                    ->schema([
                        TextEntry::make('description'),
                    ]),
                Section::make('Lead and Stage Information')
                    ->schema([
                        TextEntry::make('leadSource.name'),
                        TextEntry::make('pipelineStage.name'),
                    ])
                    ->columns(),
            ]),
    ]);
}
 
// ...

Our result will be a modal with details:

If you want, you can make this modal slide from the right side too:

Resource

// ...
 
public static function table(Table $table): Table
{
return $table
    ->actions([
        Tables\Actions\Action::make('View Information')
            // This is the important part!
            ->infolist([
                // ...
            ])
            ->slideOver(),
    ]);
}
 
// ...

Now, once we click on the action, we will see the following: