Filament•6mo ago

Table inside Infolist

Hello to all, I would like to know if there is a way to insert a table into Infolist. I have infolist tabs, and in some of those tabs, I would like to have a table. If not, I don't know if it would be possible to make a more complex structure, where there would be tabs containing infolist on one side and tables on the other. Thanks for the advice, cheers

Solution:

Make a livewire component that uses the table builder then you can just add it to the info list. https://filamentphp.com/docs/3.x/infolists/advanced...

Advanced infolists - Infolist Builder - Filament

Jump to solution

9 Replies

ffffer.•6mo ago

(note: I don't want to do it with relations)

Darnes•6mo ago

same question ?

ffffer.•6mo ago

Same question as what? I have not found something similar in the list of questions

Darnes•6mo ago

sorry , I mean I am also ask the same question , I spent hours of search but nothing answers

Solution

awcodes•6mo ago

Make a livewire component that uses the table builder then you can just add it to the info list. https://filamentphp.com/docs/3.x/infolists/advanced

Advanced infolists - Infolist Builder - Filament

jaocero•6mo ago

I've done it using a custom livewire component by what awscode suggest but I don't know if my steps are correct. This is the code in my livewire custom page:

public function table(Table $table): Table
    {
        return $table
            ->query(UserLoginLog::query()->where('user_id', $this->securityResearcher->id))
            ->columns([
                Tables\Columns\TextColumn::make('created_at')
                    ->label('Date')
                    ->dateTime('F j, Y - g:i A')
                    ->searchable()
                    ->sortable(),
                Tables\Columns\TextColumn::make('login_time')
                    ->label('Time'),
                Tables\Columns\TextColumn::make('location')
                    ->label('Location')
                    ->searchable(),
                Tables\Columns\TextColumn::make('device')
                    ->label('Device')
                    ->searchable(),
                Tables\Columns\TextColumn::make('ip_address')
                    ->label('IP Address')
                    ->searchable(),
            ])
            ->defaultSort('id', 'desc');
    }

    public function profileInfoList(Infolists\Infolist $infolist): Infolists\Infolist
    {
        return $infolist
            ->record($this->securityResearcher)
            ->schema([
                
                        Infolists\Components\Tabs\Tab::make('Login Logs')
                            ->icon('heroicon-m-arrow-right-on-rectangle')
                            ->schema([
                                Infolists\Components\ViewEntry::make('logins')
                                    ->view('infolists.components.user-login-logs')
                            ]),
                   
            ]);
    }

public function table(Table $table): Table
    {
        return $table
            ->query(UserLoginLog::query()->where('user_id', $this->securityResearcher->id))
            ->columns([
                Tables\Columns\TextColumn::make('created_at')
                    ->label('Date')
                    ->dateTime('F j, Y - g:i A')
                    ->searchable()
                    ->sortable(),
                Tables\Columns\TextColumn::make('login_time')
                    ->label('Time'),
                Tables\Columns\TextColumn::make('location')
                    ->label('Location')
                    ->searchable(),
                Tables\Columns\TextColumn::make('device')
                    ->label('Device')
                    ->searchable(),
                Tables\Columns\TextColumn::make('ip_address')
                    ->label('IP Address')
                    ->searchable(),
            ])
            ->defaultSort('id', 'desc');
    }

    public function profileInfoList(Infolists\Infolist $infolist): Infolists\Infolist
    {
        return $infolist
            ->record($this->securityResearcher)
            ->schema([
                
                        Infolists\Components\Tabs\Tab::make('Login Logs')
                            ->icon('heroicon-m-arrow-right-on-rectangle')
                            ->schema([
                                Infolists\Components\ViewEntry::make('logins')
                                    ->view('infolists.components.user-login-logs')
                            ]),
                   
            ]);
    }

inside the ->view('infolists.components.user-login-logs') you just need to call the {{ $this->table }}

ffffer.•6mo ago

It works 🙂 I also used the code from: https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

Adding a table to a Livewire component - Table Builder - Filament

ffffer.•6mo ago

Btw, in Filament 3, how could the table grow to 100% (remove the tab padding and remove the external table border). Is there any way to do that without CSS? Or what CSS could be appropiate for this?

ffffer.•6mo ago

Ok, let there be CSS then 🙂

Gaming

Programming

Table inside Infolist