Filament•2mo ago

Problem with Custom Form-Field Table in Filament Resource Form

I need some help with an issue I'm facing in a Filament resource form where I need to include an editable table. I know I can add a relationship table at the bottom of the form, but the client requested that the table be part of the form itself. To achieve this, I created a custom form field and embedded a Livewire component in the form-field Blade file that contains a table. custom form-field in Resource Form:

CommentsField::make('comments')
  ->columnSpan('full')

CommentsField::make('comments')
  ->columnSpan('full')

form-field blade file:

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

Livewire table:

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

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

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

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

Everything seems to work, but I encountered two issues that I can't resolve: 1. In the table, actions like adding a new entry, editing, or deleting only work after the second click. 2. The "save" button of the parent resource form does not work when the table is part of the form. No error message appears; it simply doesn't respond. It seems like the resource form is conflicting with the custom field's form. I created a demo project with the source code here: https://github.com/csuriantal/form-field. Has anyone experienced something similar or have any suggestions? I'd really appreciate any help, as I often miss having an editable table directly within a form. It would make managing more complex resources much easier. Thanks!

3 Replies

ChesterS•2mo ago

Try this

@livewire('comments-table', ['blogId' => $id, 'lazy' => true], key($id))

@livewire('comments-table', ['blogId' => $id, 'lazy' => true], key($id))

awcodes•2mo ago

I think this biggest issue here is that you are trying to put a table which has its own forms inside of a form, which isn’t allowed by the html spec and will break in browsers. The solution though would be a custom page where the form and the table can be output outside of each other. Otherwise you would need to use something like #awcodes-table-repeater to make something that looks like a table but can still operate inside a form. Basically though, tables can’t be embedded inside forms even if they are in a livewire component.

pappaliOP•2mo ago

Yes, that's what I was afraid of! It would have been so convenient to embed tables... I’ll move forward with a different approach, where the table will be custom, and the row editing will happen in a modal with a separate Livewire component.

Gaming

Programming

Problem with Custom Form-Field Table in Filament Resource Form