Filament v4 Beta Released: 4 New Features You Need to Know

Filament v4 beta is officially out and packed with new features. In this article, I've picked four important ones. Let me demonstrate.

Notice: it's still a Beta version, so there may be breaking changes and undocumented features. Use with caution.

1. Faster Tables. No Code Changes Needed.

If you have a table with a lot of rows, you may have had performance issues with Filament 3. I showed them in a YouTube video a few months ago.

Now, with v4, they completely changed how the table cells are rendered, and I tested it with the same project as in that video.

The table looks like this: 10,000 orders in DB, showing 100 rows at once.

Here's the performance of that table in Filament 3:

• Total time: 1.44s
• 108 Blade views rendered

And here are the numbers after upgrading to Filament 4 Beta:

• Total time: 603ms
• 4 Blade views rendered

That's 2.38x faster. Impressive, isn't it?

And I haven't changed anything in the code, just launched the upgrade guide script.

Also, there were a few performance improvements in other parts of Filament:

• Partial Rendering to avoid re-rendering the whole page if you don't need it. One practical use case is that the table action modal will no longer trigger the entire table's re-rending. Many people complained about this issue.
• Using JS instead of Livewire with functions like afterStateUpdatedJs() to avoid unnecessary network requests

2. Tables with Data From API

In Filament 4, table data doesn't necessarily have to come from Eloquent.

The most typical use case would be external data from some API.

This was one of the most-awaited Filament v4 features by the community:

I've tried it on a custom Filament page and used Disney Characters API.

Here's the result returned from that public API:

Here's the code:

app/Filament/Pages/Characters.php

use Filament\Pages\Page;
use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Support\Facades\Http;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
 
class Characters extends Page implements HasTable
{
    use InteractsWithTable;
 
    protected string $view = 'filament.pages.characters';
 
    protected static string $icon = 'heroicon-o-user-group';
 
    public function table(Table $table): Table
    {
        return $table
            ->records(fn (): array => Http::baseUrl('https://api.disneyapi.dev')
                ->get('character')
                ->collect()
                ->get('data', [])
            )
            ->columns([
                TextColumn::make('name'),
            ]);
    }
}

And here's the visual result of the table:

3. Nested Resources

Another feature that people were waiting for.

Now you can provide a parent/related resource and achieve this behavior in the "child resource" Edit form:

The syntax to generate a "child" resource is this:

php artisan make:filament-resource Product --nested

Then that Resource will be created inside the parent folder:

app/Filament/Resources/Categories/Resources/Products/ProductResource.php:

use App\Filament\Resources\Categories\CategoryResource;
 
// ...
 
class ProductResource extends Resource
{
    protected static ?string $parentResource = CategoryResource::class;
 
    // ...

Read more about this feature on this page of the official docs.

4. RichEditor Improvements

Filament text editor switched from Trix to TipTap, with new features for more powerful content management.

Merge Tags

You can add placeholders to be used in the text and then render their values from the database.

Read more about merge tags on this page of the official docs.

Custom Blocks

You can prepare some blocks of text or HTML and make it drag-droppable into the editor:

Read more about custom blocks on this page of the official docs.

These are just a few new features of Filament 4 Beta.

You can read about many more in this official feature overview article.

But for now, it's still early days, and it's still Beta, so I will try to publish more content, examples, and videos in the upcoming weeks/months. Subscribe to my YouTube channel Filament Daily to get all the news!

I'm also planning to re-shoot the Filament From Scratch course and update the FilamentExamples.com projects to v4 when it's out of Beta.