Filament•11mo ago

render a filament table using blade

`Hello, how can you create a table in a blade template. We pass some data into a blade template and try to render a table. Unfortunately, we are not quite sure how this should work. The table should be displayed in a modal

// RelationManager
        return $table
// here's some table stuff
            ->actions([
                Tables\Actions\ViewAction::make('openMailPreview')
                    ->label('E-Mail-Details')
                    ->modalContent(function (Transactions $record): View {
                        $details = Class::getContent(messageId: $record->messageId);
                        return view(
                            'filament.modal.mail-details',
                            ['record' => $record, 'mail' => $details],
                        );
                    })->slideOver()
            ]);

// RelationManager
        return $table
// here's some table stuff
            ->actions([
                Tables\Actions\ViewAction::make('openMailPreview')
                    ->label('E-Mail-Details')
                    ->modalContent(function (Transactions $record): View {
                        $details = Class::getContent(messageId: $record->messageId);
                        return view(
                            'filament.modal.mail-details',
                            ['record' => $record, 'mail' => $details],
                        );
                    })->slideOver()
            ]);

@php use AA\Aa\aa;  /** @var Stuff $mail */ @endphp

<div style="display: flex; flex-direction: column; height: 100%">
    <div style="flex-grow: 0; flex-shrink: 0">
        <h2>Gesendet am:</h2>
        <code>{{ $mail->sentAt->format('d.m.Y H:i:s') }}</code>

        <h2>Empfänger</h2>
        <code>{{ $mail->email  }}</code>
        <h2>Vorlagen-ID</h2>
        <code>{{ $mail->templateId ?? 'Kein Template verwendet' }}</code>
        <h2>HTML Vorschau</h2>
    </div>
    <iframe style="flex-grow: 1; flex-shrink: 1; height: 100%" srcdoc="{{ $mail->body }}"></iframe>
    <div>
        // render a filament table here with data from $mail
    </div>
</div>

@php use AA\Aa\aa;  /** @var Stuff $mail */ @endphp

<div style="display: flex; flex-direction: column; height: 100%">
    <div style="flex-grow: 0; flex-shrink: 0">
        <h2>Gesendet am:</h2>
        <code>{{ $mail->sentAt->format('d.m.Y H:i:s') }}</code>

        <h2>Empfänger</h2>
        <code>{{ $mail->email  }}</code>
        <h2>Vorlagen-ID</h2>
        <code>{{ $mail->templateId ?? 'Kein Template verwendet' }}</code>
        <h2>HTML Vorschau</h2>
    </div>
    <iframe style="flex-grow: 1; flex-shrink: 1; height: 100%" srcdoc="{{ $mail->body }}"></iframe>
    <div>
        // render a filament table here with data from $mail
    </div>
</div>

11 Replies

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

Additional: I built a table randomly to check if the content is above the table again like using

<x-filament-tables::table header="{{$mail->email}}">
    lol
</x-filament-tables::table>

<x-filament-tables::table header="{{$mail->email}}">
    lol
</x-filament-tables::table>

Matthew•11mo ago

Usually, you dont need to recreate the table in blade If you have a form in a livewire component, and that livewire component points to the table, then all you need to do is add {{$this->table}} in your blade

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

This is the table in the in a rlationsmanager

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

https://zockerbandewqhd.nimbusweb.me/box/attachment/10152695/edazhi1pm3a5ap6zq16n/WDM2vt35Ob08LI4k/screenshot-login.e-recht24.localhost-2024.01.25-17_14_54.png

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

if I click on the details on the right, this opens a modal: https://zockerbandewqhd.nimbusweb.me/box/attachment/10152699/651pvekkv86lfw2r1zzb/JTS1kPXe0m0S1g3B/screenshot-login.e-recht24.localhost-2024.01.25-17_17_12.png

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

at the red marked place should be a table with other informations form $mail in the blade this modal is rendered via blade So we don't have a livewire for this

Matthew•11mo ago

Ohh you want to add a table insde a slideover

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

the question is: why is the table content be rendered outside the <table> Yes

Matthew•11mo ago

Hmm, Im not sure if thats possible If it is, im not sure how. Sorry :/

awcodes•11mo ago

Render a table with just blade is going to be a nightmare. What you can do is create a livewire component for just the table and include that in your modal’s view blade file with @livewire(‘livewire-table-component’)

Iven S. | LvckyWorldᶜʳᵉʷOP•11mo ago

The implementation is very dirty xd

Gaming

Programming

render a filament table using blade