Filament•3mo ago

Rendering a Table in a Livewire Component within a Modal

I'm following the example provided at https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component, but I'm unable to display the table within a modal. When I use a route, the table functions correctly. This works: //web.php

Route::get('/solicitudes-pendientes', ListSolicitudesConductores::class);

Route::get('/solicitudes-pendientes', ListSolicitudesConductores::class);

//ListSolicitudesConductores:

class ListSolicitudesConductores extends Component implements HasForms, HasTable
{

    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(SolicitudConductor::query())
            ->columns(
                SolicitudConductorTableComponents::schema()
            )
            ->filters([
                // ...
            ])
            ->actions([

            ])
            ->bulkActions([
                // ...
            ]);
    }
    public function render()
    {
        return view('livewire.list-solicitudes-conductores');
    }
}

class ListSolicitudesConductores extends Component implements HasForms, HasTable
{

    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(SolicitudConductor::query())
            ->columns(
                SolicitudConductorTableComponents::schema()
            )
            ->filters([
                // ...
            ])
            ->actions([

            ])
            ->bulkActions([
                // ...
            ]);
    }
    public function render()
    {
        return view('livewire.list-solicitudes-conductores');
    }
}

//list-solicitudes-conductores.blade:

<div>
    {{ $this->table }}
</div>

<div>
    {{ $this->table }}
</div>

if I try this, work as expected in modal:

<div>
    {{ test }}
</div>

<div>
    {{ test }}
</div>

However, the following does not work with the same Livewire component and Blade template:

Actions\Action::make('list-solicitudes-conductores')
    ->label('Solicitudes')
    ->color('success')
    ->modalSubmitAction(false)
    ->modalCancelAction(false)
    //->slideOver()
    ->modalContent(view('livewire.list-solicitudes-conductores')),

Actions\Action::make('list-solicitudes-conductores')
    ->label('Solicitudes')
    ->color('success')
    ->modalSubmitAction(false)
    ->modalCancelAction(false)
    //->slideOver()
    ->modalContent(view('livewire.list-solicitudes-conductores')),

Thanks in advance

Installation - Panel Builder - Filament

5 Replies

Franco Miranda•3mo ago

Sorry, i don't know how to quote correctly the code.

Franco Miranda•3mo ago

Franco Miranda•3mo ago

Patrick1989•3mo ago

I have a modal with a table in it, this is my code:

class InterestsOverview extends Page implements HasTable
{
    protected static string $resource = CourseResource::class;

    protected static string $view = 'filament.resources.course-resource.pages.interests-overview';

    protected static ?string $title = 'Interesse lijst';

    use InteractsWithTable;

    // table 

    public function table(Table $table) : Table
    {
        return $table
            ->query(Course::query())
            ->columns([
                TextColumn::make('name')
                    ->label('Cursus')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('interests_count')
                ->label('Aantal geïnteresseerden')
                ->sortable()
                ->counts('interests')
                
            ])
            ->filters([
                //
            ])
            ->actions([
                Action::make('Medewerkers bekijken')
               
                ->modalContent(fn ($record): View => view(
                    'filament.resources.course-resource.pages.interests-overview-modal',
                    ['record' => $record],
                ))
                ->modalContentFooter(
                    new HtmlString('')
                )
                ->modalSubmitAction(false)
                ->slideOver()
            ]);
            
    }

class InterestsOverview extends Page implements HasTable
{
    protected static string $resource = CourseResource::class;

    protected static string $view = 'filament.resources.course-resource.pages.interests-overview';

    protected static ?string $title = 'Interesse lijst';

    use InteractsWithTable;

    // table 

    public function table(Table $table) : Table
    {
        return $table
            ->query(Course::query())
            ->columns([
                TextColumn::make('name')
                    ->label('Cursus')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('interests_count')
                ->label('Aantal geïnteresseerden')
                ->sortable()
                ->counts('interests')
                
            ])
            ->filters([
                //
            ])
            ->actions([
                Action::make('Medewerkers bekijken')
               
                ->modalContent(fn ($record): View => view(
                    'filament.resources.course-resource.pages.interests-overview-modal',
                    ['record' => $record],
                ))
                ->modalContentFooter(
                    new HtmlString('')
                )
                ->modalSubmitAction(false)
                ->slideOver()
            ]);
            
    }

and in that custom view there is only

<div>
    {{-- The Master doesn't talk, he acts. --}}
    {{ $this->table }}
</div>

<div>
    {{-- The Master doesn't talk, he acts. --}}
    {{ $this->table }}
</div>

are you sure you have fields in your table at all?

SolicitudConductorTableComponents::schema()

SolicitudConductorTableComponents::schema()

does this return the right columns?

Franco Miranda•3mo ago

SolicitudConductorTableComponents::schema() does return the right columns. Any other suggestions? Solved. I was missing a blade file. ->modalContent(view('components.custom-list-solicitudes-conductores')) <div> @livewire('list-solicitudes-conductores') </div>

Gaming

Programming

Rendering a Table in a Livewire Component within a Modal