Filament 4.1: Layout sin Topbar, Grids Responsivas y Nuevas Funcionalidades para Laravel

Filament acaba de lanzar su versión 4.1, trayendo importantes mejoras desarrolladas por el equipo principal y la comunidad, con 156 correcciones de errores y 39 nuevas características. Filament v4.1 is here! by Dan Harrin - Filament

Principales Novedades

Layout sin Topbar

Nueva opción de panel sin barra superior, ideal para maximizar el espacio vertical. El menú de usuario, notificaciones y búsqueda global se mueven a la barra lateral.

<?php

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->topbar(false);
}

Grids Responsivas en Rich Editor

Posibilidad de insertar grids de hasta 12 columnas con divisiones asimétricas, perfectas para layouts avanzados en contenido.

<?php

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['grid', 'attachFiles'],
    ])

Selector de Color de Texto

El rich editor ahora soporta selección de color con paleta Tailwind personalizable y manejo automático de accesibilidad light/dark.

<?php

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\TextColor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['textColor', 'attachFiles'],
    ])
    ->textColors([
        '#0ea5e9' => 'Brand',
        'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),
    ])

Table Repeater Compacto

Los repeaters de tabla ahora pueden tener diseño compacto, haciendo que campos como Select y TextInput se vean integrados en las celdas.

<?php

use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;

Repeater::make('members')
    ->table([
        'Name',
        'Role',
        'Status',
    ])
    ->compact()
    ->schema([
        TextInput::make('name')
            ->required(),
        Select::make('role')
            ->options([
                'admin' => 'Admin',
                'editor' => 'Editor',
                'viewer' => 'Viewer',
            ]),
        Select::make('status')
            ->boolean(),
    ])

Table para Infolists

Nueva funcionalidad que permite renderizar entradas repetibles como tablas estáticas con texto, iconos e imágenes.

<?php

use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\RepeatableEntry\TableColumn;
use Filament\Infolists\Components\TextEntry;

RepeatableEntry::make('comments')
    ->table([
        TableColumn::make('Author'),
        TableColumn::make('Title'),
        TableColumn::make('Published'),
    ])
    ->schema([
        TextEntry::make('author.name'),
        TextEntry::make('title'),
        IconEntry::make('is_published')
            ->boolean(),
    ])

Componente Empty State

Nuevo componente de esquema para insertar estados vacíos con heading, descripción, icono y acciones footer.

<?php

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->icon(Heroicon::OutlinedUser)
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus)
            ->label('Create User'),
    ])

Actualización

La actualización desde la versión 4.0 es sencilla con un simple composer update.

composer update

Si estás empezando con Filament o quieres dominar todas sus funcionalidades, te invitamos a conocer nuestra Ruta Laravel Filament 4, con 5 cursos completos y en constante crecimiento.