How to add Filament Table inside modal action?

In this guide, we are exploring how we can add Filament Table inside modal in filament. Whenever we are creating a custom action, we can add form easily by chaining the form() method but we cannot add filament tables resource. So, in this article we will learn to add Filament Table inside modal.

Step 1:

First of all, make sure your action is ready to use. Here you can see the dummy action button for us to use.

Tables\Actions\Action::make('view_payment')
                        ->modalContent(function($record){
                            return view('livewire.payment-layout',['record'=>$record]);
                        })
                        ->icon('heroicon-o-eye')
                        ->slideOver()

In above action i am returning the view page and passing the current record (optional). So, this is easily handled by the modalContent() right.

And, now we will create the new livewire component that will implement Filament hasTables() and hasForms() method.

Step 2:

To create a livewire component, just hit the following command on your terminal:

php artisan make:livewire YOURCLASSNAME

So, this will create a livewire component inside App/Livewire/YOURCLASSNAME.php and also one view file will be created inside Resources/liveiwre/your-class-name.blade.php . Now in our existing view page, we will include this livewire component page.

Step 3:

The next step is to include the livewire component on your existing file which is rendered from actions.

<div>
    @livewire('your-class-name',['record'=>$record])
</div>

Simply, it will render the component now.

Step 4:

Now, our blade file is ready , now we need to modify our livewire component to add Filament Table inside modal. So, you can checkout the code below:

<?php

namespace App\Livewire;

use Livewire\Component;
use Filament\Tables;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Table;
use App\Models\PaymentTransaction;
use Illuminate\Contracts\View\View;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use App\Filament\Reusables\Tables\PaymentInformationTable;

class PaymentInformation extends Component implements HasTable,HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;
    public $record;
    public function table(Table $table): Table
    {
        return $table
            ->query(function(){
                return $this->record->payments();
            })
            ->columns(PaymentInformationTable::getTable())
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ]);
    }

    public function render():View
    {
        return view('livewire.payment-information');
    }
}

Here , you can see i have made another Class to get the tables row but you can just add in the above way and show the table on the modal.

Conclusion

In this way, we can easily add filament table inside modals.