Getting started

#Overview

Filament's infolist package allows you to render a read-only list of data about a particular entity. It's also used within other Filament packages, such as the Panel Builder for displaying app resources and relation managers, as well as for action modals. Learning the features of the Infolist Builder will be incredibly time-saving when both building your own custom Livewire applications and using Filament's other packages.

This guide will walk you through the basics of building infolists with Filament's infolist package. If you're planning to add a new infolist to your own Livewire component, you should do that first and then come back. If you're adding an infolist to an app resource, or another Filament package, you're ready to go!

#Defining entries

The first step to building an infolist is to define the entries that will be displayed in the list. You can do this by calling the schema() method on an Infolist object. This method accepts an array of entry objects.

use Filament\Infolists\Components\TextEntry;
 
$infolist
    ->schema([
        TextEntry::make('title'),
        TextEntry::make('slug'),
        TextEntry::make('content'),
    ]);
use Filament\Infolists\Components\TextEntry;

$infolist
    ->schema([
        TextEntry::make('title'),
        TextEntry::make('slug'),
        TextEntry::make('content'),
    ]);

Each entry is a piece of information that should be displayed in the infolist. The TextEntry is used for displaying text, but there are other entry types available.

Infolists within the Panel Builder and other packages usually have 2 columns by default. For custom infolists, you can use the columns() method to achieve the same effect:

$infolist
    ->schema([
        // ...
    ])
    ->columns(2);
$infolist
    ->schema([
        // ...
    ])
    ->columns(2);

Now, the content entry will only consume half of the available width. We can use the columnSpan() method to make it span the full width:

use Filament\Infolists\Components\TextEntry;
 
[
    TextEntry::make('title'),
    TextEntry::make('slug')
    TextEntry::make('content')
        ->columnSpan(2), // or `columnSpan('full')`,
]
use Filament\Infolists\Components\TextEntry;

[
    TextEntry::make('title'),
    TextEntry::make('slug')
    TextEntry::make('content')
        ->columnSpan(2), // or `columnSpan('full')`,
]

You can learn more about columns and spans in the layout documentation. You can even make them responsive!

#Using layout components

The Infolist Builder allows you to use layout components inside the schema array to control how entries are displayed. Section is a layout component, and it allows you to add a heading and description to a set of entries. It can also allow entries inside it to collapse, which saves space in long infolists.

use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;
 
[
    TextEntry::make('title'),
    TextEntry::make('slug'),
    TextEntry::make('content')
        ->columnSpan(2)
        ->markdown(),
    Section::make('Media')
        ->description('Images used in the page layout.')
        ->schema([
            // ...
        ]),
]
use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;

[
    TextEntry::make('title'),
    TextEntry::make('slug'),
    TextEntry::make('content')
        ->columnSpan(2)
        ->markdown(),
    Section::make('Media')
        ->description('Images used in the page layout.')
        ->schema([
            // ...
        ]),
]

In this example, you can see how the Section component has its own schema() method. You can use this to nest other entries and layout components inside:

use Filament\Infolists\Components\ImageEntry;
use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;
 
Section::make('Media')
    ->description('Images used in the page layout.')
    ->schema([
        ImageEntry::make('hero_image'),
        TextEntry::make('alt_text'),
    ])
use Filament\Infolists\Components\ImageEntry;
use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;

Section::make('Media')
    ->description('Images used in the page layout.')
    ->schema([
        ImageEntry::make('hero_image'),
        TextEntry::make('alt_text'),
    ])

This section now contains an ImageEntry and a TextEntry. You can learn more about those entries and their functionalities on the respective docs pages.

#Next steps with the infolists package

Now you've finished reading this guide, where to next? Here are some suggestions:

• Explore the available entries to display data in your infolist.
• Discover how to build complex, responsive layouts without touching CSS.

Edit on GitHub

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