Table Columns for Live-Editing Data

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 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:

Select Column

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.

Text Input Column

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!