Filament v3 has an awesome Infolist feature, but the components are pretty limited, like TextEntry
or ImageEntry
. What if you want to create your own custom entry? This tutorial will teach you how to make a custom Filament Infolist Component with custom CSS styling.
As an example, we will have Course and Lesson Models. Our main goals are:
- To display a list of all lessons on the view Course page
- Re-use the same component and display a list of all lessons on the view Lesson page
- Highlight the current Lesson on the view Lesson page
- Style list using TailwindCSS by compiling a custom theme
First, let's quickly set up our models and data.
Migrations, Models, Factories & Seeds
Let's create Course and Lesson Models with Migrations and Factories by passing the -mf
flag.
php artisan make:model Course -mf php artisan make:model Lesson -mf
The database schema is as follows.
database/migrations/XX_create_courses_table.php
Schema::create('courses', function (Blueprint $table) { $table->id(); $table->string('name'); $table->longText('content')->nullable(); $table->timestamps();});
database/migrations/XX_create_lessons_table.php
use App\Models\Course; // ... Schema::create('lessons', function (Blueprint $table) { $table->id(); $table->foreignIdFor(Course::class); $table->string('name'); $table->longText('content')->nullable(); $table->timestamps();});
Now let's define our fillable fields and...