Advanced infolists

#Inserting Livewire components into an infolist

You may insert a Livewire component directly into an infolist:

use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;
 
Livewire::make(Foo::class)
use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;

Livewire::make(Foo::class)

If you are rendering multiple of the same Livewire component, please make sure to pass a unique key() to each:

use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;
 
Livewire::make(Foo::class)
    ->key('foo-first')
 
Livewire::make(Foo::class)
    ->key('foo-second')
 
Livewire::make(Foo::class)
    ->key('foo-third')
use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;

Livewire::make(Foo::class)
    ->key('foo-first')

Livewire::make(Foo::class)
    ->key('foo-second')

Livewire::make(Foo::class)
    ->key('foo-third')

#Passing parameters to a Livewire component

You can pass an array of parameters to a Livewire component:

use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;
 
Livewire::make(Foo::class, ['bar' => 'baz'])
use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;

Livewire::make(Foo::class, ['bar' => 'baz'])

Now, those parameters will be passed to the Livewire component's mount() method:

class Foo extends Component
{
    public function mount(string $bar): void
    {       
        // ...
    }
}
class Foo extends Component
{
    public function mount(string $bar): void
    {       
        // ...
    }
}

Alternatively, they will be available as public properties on the Livewire component:

class Foo extends Component
{
    public string $bar;
}
class Foo extends Component
{
    public string $bar;
}

#Accessing the current record in the Livewire component

You can access the current record in the Livewire component using the $record parameter in the mount() method, or the $record property:

use Illuminate\Database\Eloquent\Model;
 
class Foo extends Component
{
    public function mount(Model $record): void
    {       
        // ...
    }
    
    // or
    
    public Model $record;
}
use Illuminate\Database\Eloquent\Model;

class Foo extends Component
{
    public function mount(Model $record): void
    {       
        // ...
    }
    
    // or
    
    public Model $record;
}

#Lazy loading a Livewire component

You may allow the component to lazily load using the lazy() method:

use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;
 
Livewire::make(Foo::class)->lazy()
use Filament\Infolists\Components\Livewire;
use App\Livewire\Foo;

Livewire::make(Foo::class)->lazy()       

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion