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.
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.
Very similar behavior to a ToggleColumn
, just a different look.
Let's use the same is_active
column but present it as a checkbox instead of a Toggle.
ProductResource.php:
return $table ->columns([ Tables\Columns\TextColumn::make('name'), Tables\Columns\TextColumn::make('price'), Tables\Columns\CheckboxColumn::make('is_active'),
That's all you need to change!
Here's how it looks:
Sometimes we just want to change some status in a simple dropdown select but don't want to click Edit
and go to a separate page just for that.
Select could be implemented directly in the table. Let's try to do it with the status column.
All we need to do is repeat the same pattern as in the SelectInput
in the form, just with SelectColumn
in the table:
ProductResource.php:
return $table ->columns([ // ... Tables\Columns\CheckboxColumn::make('is_active'), Tables\Columns\SelectColumn::make('status') ->options(self::$statuses),
And it works!
Again, the data is updated immediately on dropdown value change.
Finally, occasionally, you may want a simple text directly editable in the table.
To achieve that, just use TextInputColumn
instead of TextColumn
.
ProductResource.php:
return $table ->columns([ Tables\Columns\TextColumn::make('name'), Tables\Columns\TextInputColumn::make('name'),
You also should add any validation rules here. As usual, chain the method for it.
Tables\Columns\TextInputColumn::make('name') ->rules(['required', 'min:3']),
In case of a validation error, the error text will appear as a tooltip.
Personally, I'm not a big fan of such a text-edit solution because text field validation may be pretty tricky and complicated.
In general, such editable fields in the table may slow down the loading of the whole table. But hey, it's your choice, Filament just offers an option!