F
Filament•5mo 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'),
            ]),
    ]);
}
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>
<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');
    }
}
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>
<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?
3 Replies
ralphjsmit
ralphjsmit•4mo ago
Hey @gemini.dev , if this is still current, I would try to use the Livewire::make(YourTableClass) method: https://filamentphp.com/docs/3.x/forms/advanced#inserting-livewire-components-into-a-form
Advanced forms - Forms - Filament
Dennis Koch
Dennis Koch•4mo ago
You cannot nest tables in forms because they contain forms, too. You can however create a view file and use the tab component.
98.dev
98.devOP•4mo ago
Thanks both. Ended up using the relation manager instead. It makes the code less confusing lol

Did you find this page helpful?