Filament: the TALL Stack Admin Panel

Filament is the elegant TALL stack admin for Laravel artisans. V1 has been in the works for over a year, and we are pleased to release it!

The admin panel has simple foundations of pure Livewire components, with a powerful form and table builder that relies heavily on Alpine.js. The UI is a custom design built using Tailwind CSS v2.

#Setup

Installation is straightforward:

composer require filament/filament
php artisan migrate

Create a user account for your admin panel by running

php artisan make:filament-user

and answering the input prompts.

#Creating a Resource

Resources are associated with Eloquent models from your app. To create a resource for the App\Models\Customer model:

php artisan make:filament-resource Customer

This will create several files in the app/Filament/Resources directory:

.
+-- CustomerResource.php
+-- CustomerResource
|   +-- Pages
|   |   +-- CreateCustomer.php
|   |   +-- EditCustomer.php
|   |   +-- ListCustomers.php

Your new resource class lives in CustomerResource.php. Resource classes register forms, tables, authorization settings, and pages associated with that model.

The classes in the Pages directory are used to customize the pages in the admin panel that interact with your resource.

#Building a Form

Filament comes with a powerful form builder which can be used to create intuitive, dynamic, and contextual forms in the admin panel.

Forms have a schema, which is an array that contains many form components. Let's define a form schema for our CustomerResource:

use Filament\Resources\Forms\Components;
use Filament\Resources\Forms\Form;
 
public static function form(Form $form)
{
    return $form
        ->schema([
            Components\TextInput::make('name')->autofocus()->required(),
            Components\TextInput::make('email')->email()->required(),
            Components\Select::make('type')
                ->placeholder('Select a type')
                ->options([
                    'individual' => 'Individual',
                    'organization' => 'Organization',
                ]),
            Components\DatePicker::make('birthday'),
        ])
        ->columns(2);
}

For more information about building forms, please see the documentation.

#Building a Table

Filament includes a table builder which can be used to create interactive tables in the admin panel.

Tables have columns and filters, which are defined in two methods on the table object. Let's build a table for our CustomerResource:

use Filament\Resources\Tables\Columns;
use Filament\Resources\Tables\Filter;
use Filament\Resources\Tables\Table;
 
public static function table(Table $table)
{
    return $table
        ->columns([
            Columns\Text::make('name')->primary(),
            Columns\Text::make('email')->url(fn ($customer) => "mailto:{$customer->email}"),
            Columns\Text::make('type')
                ->options([
                    'individual' => 'Individual',
                    'organization' => 'Organization',
                ]),
            Columns\Text::make('birthday')->date(),
        ])
        ->filters([
            Filter::make('individuals', fn ($query) => $query->where('type', 'individual')),
            Filter::make('organizations', fn ($query) => $query->where('type', 'organization')),
        ]);
}

For more information about the table builder, please see the documentation.

#Wrapping up

For more information about the Filament project, please visit our website. We'd love to see how you will use it and hear any suggestions - drop us a message on Twitter @danjharrin or @ryanscherler