O Filament v4 beta foi lançado oficialmente e está repleto de novos recursos. Neste artigo, selecionei quatro importantes. Deixe-me demonstrar.

Aviso : ainda é uma versão Beta , portanto, pode haver alterações significativas e recursos não documentados. Use com cautela.

1. Tabelas mais rápidas. Sem necessidade de alterações no código.

Se você tiver uma tabela com muitas linhas, pode ter tido problemas de desempenho com o Filament 3. Mostrei isso em um vídeo do YouTube alguns meses atrás.

Agora, com a v4, eles mudaram completamente a forma como as células da tabela são renderizadas, e eu testei isso com o mesmo projeto daquele vídeo.

A tabela se parece com isso: 10.000 pedidos no BD, mostrando 100 linhas de uma vez.

Aqui está o desempenho dessa tabela no Filament 3:

• Tempo total: 1,44s
• 108 visualizações de Blade renderizadas

E aqui estão os números após a atualização para o Filament 4 Beta:

• Tempo total: 603 ms
• 4 visualizações de Blade renderizadas

Isso é 2,38x mais rápido . Impressionante, não é?

E não alterei nada no código, apenas iniciei o script do guia de atualização .

Além disso, houve algumas melhorias de desempenho em outras partes do Filament:

• Renderização parcial para evitar a renderização da página inteira se você não precisar. Um caso de uso prático é que o modal de ação da tabela não acionará mais a renderização da tabela inteira. Muitas pessoas reclamaram desse problema.
• Usando JS em vez de Livewire com funções como afterStateUpdatedJs() evitar solicitações de rede desnecessárias

2. Tabelas com dados da API

No Filament 4, os dados da tabela não precisam necessariamente vir do Eloquent.

O caso de uso mais típico seriam dados externos de alguma API.

Este foi um dos recursos do Filament v4 mais aguardados pela comunidade:

Eu testei isso em uma página personalizada do Filament e usei a API de personagens da Disney .

Aqui está o resultado retornado pela API pública:

Aqui está o código:

app/Filamento/Páginas/Caracteres.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'),
            ]);
    }
}

E aqui está o resultado visual da tabela:

3. Recursos aninhados

Outro recurso que as pessoas estavam esperando.

Agora você pode fornecer um recurso pai/relacionado e obter esse comportamento no formulário de edição "recurso filho":

A sintaxe para gerar um recurso "filho" é esta:

php artisan make:filament-resource Product --nested

Então esse recurso será criado dentro da pasta pai :

app/Filament/Recursos/Categorias/Recursos/Produtos/ProductResource.php :

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

Leia mais sobre esse recurso nesta página dos documentos oficiais .

4. Melhorias no RichEditor

O editor de texto Filament mudou do Trix para o TipTap, com novos recursos para um gerenciamento de conteúdo mais poderoso.

Mesclar tags

Você pode adicionar marcadores de posição para serem usados ​​no texto e então renderizar seus valores a partir do banco de dados.

Leia mais sobre tags de mesclagem nesta página dos documentos oficiais.

Blocos personalizados

Você pode preparar alguns blocos de texto ou HTML e torná-los arrastáveis ​​e soltos no editor:

Leia mais sobre blocos personalizados nesta página da documentação oficial.

Esses são apenas alguns dos novos recursos do Filament 4 Beta.

Você pode ler sobre muito mais neste artigo oficial de visão geral dos recursos .

Mas, por enquanto, ainda é cedo e ainda é Beta , então tentarei publicar mais conteúdo, exemplos e vídeos nas próximas semanas/meses. Inscreva-se no meu canal do YouTube, Filament Daily, para receber todas as novidades!

Também estou planejando refazer o curso Filament From Scratch e atualizar os projetos do FilamentExamples.com para a versão 4 quando ele sair da versão Beta.