Skip to main content
Version: 3.0

Adding an infolist to a Livewire component

Setting up the Livewire component

First, generate a new Livewire component:

php artisan make:livewire ViewProduct

Then, render your Livewire component on the page:

@livewire('view-product')

Alternatively, you can use a full-page Livewire component:

use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;

Route::get('products/{product}', ViewProduct::class);

You must use the InteractsWithInfolists and InteractsWithForms traits, and implement the HasInfolists and HasForms interfaces on your Livewire component class:

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Livewire\Component;

class ViewProduct extends Component implements HasForms, HasInfolists
{
use InteractsWithInfolists;
use InteractsWithForms;

// ...
}

Adding the infolist

Next, add a method to the Livewire component which accepts an $infolist object, modifies it, and returns it:

use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
return $infolist
->record($this->product)
->schema([
// ...
]);
}

Finally, render the infolist in the Livewire component's view:

{{ $this->productInfolist }}

Passing data to the infolist

You can pass data to the infolist in two ways:

Either pass an Eloquent model instance to the record() method of the infolist, to automatically map all the model attributes and relationships to the entries in the infolist's schema:

use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
return $infolist
->record($this->product)
->schema([
TextEntry::make('name'),
TextEntry::make('category.name'),
// ...
]);
}

Alternatively, you can pass an array of data to the state() method of the infolist, to manually map the data to the entries in the infolist's schema:

use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Infolist;

public function productInfolist(Infolist $infolist): Infolist
{
return $infolist
->state([
'name' => 'MacBook Pro',
'category' => [
'name' => 'Laptops',
],
// ...
])
->schema([
TextEntry::make('name'),
TextEntry::make('category.name'),
// ...
]);
}