FilamentF
Filament•7mo ago
98.dev

How do you properly nest a Table in a FilamentPHP Form Tab?

Issue Description
I'm using a Filament resource with a form that includes multiple tabs. One of the tabs, "VAT Settings", contains a Filament table rendered through a Livewire component.

Resource Snippet
public static function form(Form $form): Form
{
    return $form->schema([
        Tabs\Tab::make('VAT Settings')
            ->schema([
                ViewField::make('VAT Settings')
                    ->view('livewire.vat-table-wrapper'),
            ]),
    ]);
}

vat-table-wrapper.blade.php
<div>
    @livewire('vat-table', ['clientId' => $this->record->id])
</div>

VatTable Component
class VatTable extends Component implements HasForms, HasTable
{
    use InteractsWithForms, InteractsWithTable;

    public $clientId;

    public function mount($clientId)
    {
        $this->clientId = $clientId;
    }

    public function table(Table $table)
    {
        return $table
            ->query(ClientVat::query()->where('client_id', $this->clientId))
            ->columns([
                TextColumn::make('country.name')->label('Country')->sortable()->searchable(),
                TextColumn::make('vat_rate')->label('VAT Rate (%)')->sortable()->searchable(),
            ]);
    }

    public function render()
    {
        return view('livewire.vat-table');
    }
}

vat-table.blade.php
<div>
    {{ $this->table }}
</div>

The Problem
When this table is rendered in the ViewField, the form displays correctly and all tabs are editable. However, saving the resource no longer works. Removing the table restores normal save behaviour.

Question
Is it possible to embed a Filament table inside a resource form tab without breaking the parent save functionality?
Was this page helpful?