Table Columns for Live-Editing Data

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

Text Version of the Lesson

Filament builds tables not only for showing data but also for live editing of some of the columns, and there are specific column types for it. We will look at them in this short lesson.

Toggle Column

Probably one of the most naturally looking fields for editing is the on/off toggle: from a UX perspective, admin panel users will immediately understand that it's clickable.

Let's add a field of whether a product is active and make it "toggleable".

Migration code:

Schema::table('products', function (Blueprint $table) {
    $table->boolean('is_active')->default(true);
});

app/Models/Product.php:

class Product extends Model
{
    protected $fillable = [
        'name',
        'price',
        'status',
        'category_id',
        'is_active' 
    ];

ProductResource.php:

return $table
    ->columns([
        Tables\Columns\TextColumn::make('name'),
        Tables\Columns\TextColumn::make('price'),
        Tables\Columns\ToggleColumn::make('is_active'), 

And that's it. You don't need to configure any more actions.

Data update works in live mode immediately when you click the column to change the value.

Checkbox Column

Very similar behavior to a ToggleColumn, just a different look.

Let's use the same is_active column but...