Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

raobilal4822's avatar

custom page with table in pop up model on table action

Tables\Actions\Action::make('request_owner_approval') ->label('Request Owner Approval') ->icon('heroicon-o-document-text') ->modalHeading('All Quotation') ->modalSubmitAction(false) ->modalCancelActionLabel('Close') ->modalWidth('lg') ->modalContent(function (WorkOrder $record) { return view('filament.pages.actions.work-order.all-quotations-modal', [ 'record' => $record, 'contractors' => $record->contractors() ->get(), ]); }), this is a table action i want to open a pop up model and call a custom page in pop up model instead of view. and that page include table. I am tired to get this

0 likes
3 replies
LaryAI's avatar

Certainly! In Filament, table actions can open modals with custom content using the modalContent() method, but this method expects a view or a closure returning HTML, not a full Filament page. Filament pages are meant to be standalone and not embedded directly into modals.

If you want to show a table inside a modal, you have two main options:


Option 1: Render a Blade View with a Table

You can create a Blade view (e.g., all-quotations-modal.blade.php) and render your table manually using Blade and Livewire components. For example:

Tables\Actions\Action::make('request_owner_approval')
    ->label('Request Owner Approval')
    ->icon('heroicon-o-document-text')
    ->modalHeading('All Quotation')
    ->modalSubmitAction(false)
    ->modalCancelActionLabel('Close')
    ->modalWidth('lg')
    ->modalContent(function (WorkOrder $record) {
        return view('filament.pages.actions.work-order.all-quotations-modal', [
            'record' => $record,
            'contractors' => $record->contractors()->get(),
        ]);
    }),

And in your Blade view (all-quotations-modal.blade.php):

<table class="min-w-full">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <!-- Add more columns as needed -->
        </tr>
    </thead>
    <tbody>
        @foreach ($contractors as $contractor)
            <tr>
                <td>{{ $contractor->name }}</td>
                <td>{{ $contractor->email }}</td>
                <!-- Add more columns as needed -->
            </tr>
        @endforeach
    </tbody>
</table>

Option 2: Use a Livewire Component in the Modal

If you want more interactivity (sorting, searching, etc.), create a custom Livewire component that renders your table, and then include it in the modal content:

1. Create a Livewire component:

php artisan make:livewire AllQuotationsTable

2. In your modalContent:

->modalContent(function (WorkOrder $record) {
    return \Livewire\Livewire::mount('all-quotations-table', [
        'workOrder' => $record->id,
    ])->html();
}),

3. In your Livewire component (AllQuotationsTable.php):

public $workOrder;

public function mount($workOrder)
{
    $this->workOrder = WorkOrder::find($workOrder);
}

public function render()
{
    $contractors = $this->workOrder->contractors()->get();

    return view('livewire.all-quotations-table', [
        'contractors' => $contractors,
    ]);
}

4. In your Livewire Blade view (all-quotations-table.blade.php):

<table class="min-w-full">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <!-- Add more columns as needed -->
        </tr>
    </thead>
    <tbody>
        @foreach ($contractors as $contractor)
            <tr>
                <td>{{ $contractor->name }}</td>
                <td>{{ $contractor->email }}</td>
                <!-- Add more columns as needed -->
            </tr>
        @endforeach
    </tbody>
</table>

Key Point

You cannot embed a full Filament Page inside a modal.
Instead, use a Blade view or a Livewire component to render your table inside the modal.


Summary:

  • Use modalContent() to render a Blade view or Livewire component with your table.
  • You cannot directly render a Filament page inside a modal.

If you need a more advanced table (with pagination, filters, etc.), use a Livewire table package or Filament's table components inside your Livewire component. Let me know if you need a full example!

Please or to participate in this conversation.