First CRUD Menu: Product Resource

Let's create a menu item and a table/form to manage products.

Generate Filament Resource

Every menu item in Filament is called a Resource, a visual representation of the Eloquent Model. Imagine we have this simple Model with a few fields:

app/Models/Product.php:

class Product extends Model
{
    protected $fillable = [
        'name',
        'description',
        'price',
    ];
}

Then we generate a Filament Resource for this model:

php artisan make:filament-resource Product

This command will ask you a few questions, for now we will answer No for all of them.

It generates a folder app/Filament/Resources/ProductResource with these files:

And you know what? The menu item "Products" already works just like that! If we log in and refresh our dashboard, we see a new menu item on the left. And if we click it, we will see the table of three products I have pre-seeded in the DB.

Filament tries to list them but doesn't know which columns to show. This is what we will need to do next.

Listing Columns in Table

Let's take a look at the main file for the Filament Resource.

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

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;
 
    protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
 
    public static function form(Schema $schema): Schema
    {
        return ProductForm::configure($schema);
    }
 
    public static function table(Table $table): Table
    {
        return ProductsTable::configure($table);
    }
 
    public static function getRelations(): array
    {
        return [
            //
        ];
    }
 
    public static function getPages(): array
    {
        return [
            'index' => ListProducts::route('/'),
            'create' => CreateProduct::route('/create'),
            'edit' => EditProduct::route('/{record}/edit'),
        ];
    }
}

It sounds like a lot, but hey, just read this file: it's all understandable in plain English language.

You can configure how your CRUD works by changing the values of arrays or class properties.

For basic needs, it's enough to work with form() and table() methods and fill them with values.

In version 4 Filament adds forms and tables into their own classes and calls them in the resource. This is only a recommended way for structuring files.

Remember that under the hood, Filament is not a single package but a set of packages. So, "Table Builder" and "Form Builder" can also be used separately, outside of Filament Resource, or even in non-Filament projects if you use Livewire. Even in the documentation, they are separated into Form Builder and Table Builder sections.

For now, let's focus on the table() method. Let's take a look at the generated table class.

app/Filament/Resources/Products/Tables/ProductsTable.php:

use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Tables\Table;
 
class ProductsTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                //
            ])
            ->filters([
                //
            ])
            ->recordActions([
                EditAction::make(),
            ])
            ->toolbarActions([
                BulkActionGroup::make([
                    DeleteBulkAction::make(),
                ]),
            ]);
    }
}

To show columns in the table, we just need to add the column objects to the columns() array.

Filament has a lot of different column types, each is described with the method XxxxxColumn::make('[column_name]').

app/Filament/Resources/Products/Tables/ProductsTable.php:

use Filament\Tables\Columns\TextColumn;
 
class ProductsTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'), 
                TextColumn::make('price'),
            ])
            // ... other methods
    }
}

Just add those two lines, and refresh the table:

See? It's that easy to add columns. You can browse the docs and see what other columns they have. We will add some later during the course. For now, I just want you to understand the principle.

Add Fields to Form

Now, see that button on the top-right of the table in the screenshot above? Yeah, that already shows the form to add a product!

But, similarly to the table, Filament doesn't know which input fields to show in the form. Let's specify exactly that in the form schema. Let's take a look at the generated form schema class.

app/Filament/Resources/Products/Schemas/ProductForm.php:

use Filament\Schemas\Schema;
 
class ProductForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                //
            ]);
    }
}

The tables operate with XxxxxColumn::make(), and the forms follow the same syntax of Xxxxx::make().

So, let's add two simple TextInput fields:

app/Filament/Resources/Products/Schemas/ProductForm.php:

use Filament\Schemas\Schema;
use Filament\Forms\Components\TextInput;
 
class ProductForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name'),
                TextInput::make('price'),
            ]);
    }
}

Refresh the page, and we have the fields!

And that's it: we can now create and edit the products, and both forms work.

Yes, exactly, we just specify the table columns and form fields, and Filament generates everything else for us.

Of course, we can add much more functionality to tables/forms, and this is exactly what we will explore for the rest of the course.

Customize Redirect After Submit

One thing that surprised me personally about Filament: after create/edit form submission, it doesn't redirect you back to the table.

Create form redirects you to the edit form of the new record, and the Edit form redirects you back to the Edit form with a success notification on the top-right:

But you can easily customize this behavior and override the redirect logic.

For that, we need to look at other files in the Filament Resource folder. In addition to the main ProductResource file, there's a separate file for each page if you want to customize them:

• Pages/CreateProduct.php
• Pages/EditProduct.php
• Pages/ListProducts.php

In many cases, you will likely not touch them at all, but in our case, let's override the redirect by adding one identical method to both the CreateProduct and EditProduct pages.

app/Filament/Resources/Products/Pages/CreateProduct.php:

class CreateProduct extends CreateRecord
{
    protected static string $resource = ProductResource::class;
 
    protected function getRedirectUrl(): string
    {
        return $this->getResource()::getUrl('index');
    }
}

app/Filament/Resources/Products/Pages/EditProduct.php:

class EditProduct extends EditRecord
{
    protected static string $resource = ProductResource::class;
 
    protected function getHeaderActions(): array
    {
        return [
            DeleteAction::make(),
        ];
    }
 
    protected function getRedirectUrl(): string
    {
        return $this->getResource()::getUrl('index');
    }
}

And now, our forms will redirect back to the table after submission. But what if you want this behaviour for all resources? Imagine doing this for all pages. Luckily, filament has a global setting for the panel.

app/Providers/Filament/AdminPanelProvider.php:

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            // ...
            ->resourceCreatePageRedirect('index')
            ->resourceEditPageRedirect('index');
    }
}

Instead of passing an index, you can pass any page, such as edit or view.

Delete Record: Weird UX

Another interesting UX decision by the Filament team was to "hide" the Delete button from the table.

Personally, I'm used to having "Edit" and "Delete" near each other for every record in the table. But in Filament, if you want to delete the record, you have two options:

Option 1. Go to the Edit page and click the Delete button on top-right.

Option 2. Select checkboxes and choose Bulk Actions -> Delete Selected.

But, as in most Filament features, you can easily customize this.

Have you noticed the method recordActions() in the Table class?

By default, it contains only Edit action, but we can add Delete there, as well.

app/Filament/Resources/Products/Tables/ProductsTable.php:

use Filament\Actions\DeleteAction;
 
class ProductsTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'),
                TextColumn::make('price'),
            ])
            ->filters([
                //
            ])
            ->recordActions([
                EditAction::make(),
                DeleteAction::make(), 
            ])
            ->toolbarActions([
                BulkActionGroup::make([
                    DeleteBulkAction::make(),
                ]),
            ]);
    }
}

And then we have a typical Delete button/link in the table, with the confirmation modal before deleting.

So yeah, that's all the basics you need to know about using Filament as a CRUD builder.

Your job is just to fill in the columns and form fields, and Filament will take care of the rest.

In the following lessons, we will explore many more customization options for various field types.