> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Rendering an infolist in a Blade view
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
Before proceeding, make sure `filament/infolists` is installed in your project. You can check by running:
```bash theme={"theme":"gruvbox-dark-hard"}
composer show filament/infolists
```
If it's not installed, consult the [installation guide](../introduction/installation#installing-the-individual-components) and configure the **individual components** according to the instructions.
## Setting up the Livewire component
First, generate a new Livewire component:
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan make:livewire ViewProduct
```
Then, render your Livewire component on the page:
```blade theme={"theme":"gruvbox-dark-hard"}
@livewire('view-product')
```
Alternatively, you can use a full-page Livewire component:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;
Route::get('products/{product}', ViewProduct::class);
```
You must use the `InteractsWithSchemas` trait, and implement the `HasSchemas` interface on your Livewire component class:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;
class ViewProduct extends Component implements HasSchemas
{
use InteractsWithSchemas;
use RestrictsFileUploadsToSchemaComponents;
// ...
}
```
## Adding the infolist
Next, add a method to the Livewire component which accepts an `$infolist` object, modifies it, and returns it:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->record($this->product)
->components([
// ...
]);
}
```
Finally, render the infolist in the Livewire component's view:
```blade theme={"theme":"gruvbox-dark-hard"}
{{ $this->productInfolist }}
```
`filament/infolists` also includes the following packages:
* `filament/actions`
* `filament/schemas`
* `filament/support`
These packages allow you to use their components within Livewire components.
For example, if your infolist uses [Actions](../actions), remember to implement the `HasActions` interface and use the `InteractsWithActions` trait on your Livewire component class.
If you are using any other [Filament components](./overview#package-components) in your infolist, make sure to install and integrate the corresponding package as well.
## 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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->record($this->product)
->components([
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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->constantState([
'name' => 'MacBook Pro',
'category' => [
'name' => 'Laptops',
],
// ...
])
->components([
TextEntry::make('name'),
TextEntry::make('category.name'),
// ...
]);
}
```
)}
Your logo here