Skip to main content

Table Columns for Live-Editing Data

Premium
3:05

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

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

J
joschuba ✓ Link copied!

Thank you for this very interesting course! One little thing: In the last code block, the line ->rules(['required', 'min:3']), should be marked as added (green) instead of removed (red).

PK
Povilas Korop ✓ Link copied!

Well noticed! Fixed now.

SP
Steve Popoola ✓ Link copied!

There is a typo in the lesson intro. "Filament builds tables now only for showing data" should be "Filament builds tables not only for showing data".

PK
Povilas Korop ✓ Link copied!

Thanks, well noticed! Fixed now.

DL
Dave Loper ✓ Link copied!

The TextColumn->TextInputColumn snippet has both lines shown in red as if they are both deleted, instead of the 2nd one being green to show addition.

First course I go through. I really like how many times you say "Yes, it's that simple" or equivalent, and I agree. Filament made quite an impression on you, hasn't it?

PK
Povilas Korop ✓ Link copied!

Thanks! Fixed the TextInputColumn.

And yes, with Filament it's quite emotional: I'm still surprised by how easy many things are, and how deep is the tool to discover even more methods/ways to achieve the same things even easier.

B
bogusbd ✓ Link copied!

Thanks

This also works with BelongsTo relationships in the following way:

Tables\Columns\TextInputColumn::make('country.name'),

But is there a way to make this work with HasMany?

M
Modestas ✓ Link copied!
B
bogusbd ✓ Link copied!

Hello,

Thanks for the link. But this is only for reading, for TextColumn Filament\Tables\Columns\TextColumn But I need it for editing, for TextInputColumn Tables\Columns\TextInputColumn

I partially got it to work like this:

model HasMany relation

 
public function commissions(): HasMany
{
return $this->hasMany(Commission::class);
}

And in Filament Resources:

 
public static function table(Table $table): Table
{
$columns = [
Tables\Columns\TextColumn::make('id')->searchable(),
Tables\Columns\TextColumn::make('commissions.value'),
];
 
foreach (range(0,3) as $id){
$columns[] = Tables\Columns\TextInputColumn::make('commissions.'.$id.'.value')->label('commissions.'.$id.'.value');
}
 
return $table
->columns( $columns);
}

This displays the correct values, displays fields for editing. But saving itself doesn't work =/

I also refer to a fixed number of elements via range(0,3) , but I would like to do this more elegantly, more dynamically.

And in this use make('commissions.'.$id.'.value') - $id is just a serial number, not a unique identifier, which looks very strange... Although it works for display

M
Modestas ✓ Link copied!

Oh sorry, I missed the part where this was an input!

In this case, sorry, I don't really know the answer. It seems pretty weird to be to add this to the table, so I never did that :)

LN
Loganathan Natarajan ✓ Link copied!

Thanks, simple and neat explanation

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.