Free·
Sometimes, you need to trigger custom actions directly from a Filament table column. Filament supports this natively, and you can use Action modals to display a form inside a modal, for example.
The basic implementation is simple:
app/Filament/Resources/Posts/Tables/PostsTable.php
TextColumn::make('title')
->action(
Action::make('quickEdit')
->modalWidth(Width::Small)
->modalSubmitActionLabel('Save Changes')
->fillForm(fn (Post $record) => [
'title' => $record->title,
])
->schema([
TextInput::make('title')
->autocomplete(false)
->required(),
])
->action(function (Post $record, array $data) {
$record->update([
'title' => $data['title'],
]);
Notification::make()
->title('Post title updated successfully')
->success()
->send();
})
)
->searchable(),
Customizing a table cell with custom column
If you want to customize the cell itself (not just the action), you can use a custom column or a ViewColumn and pass in a custom Blade view.
For example, suppose you want to:
- Keep the action, and
- Add mouseenter / mouseleave events to show or hide an icon, indicating to the user that the value can be updated.
Here's how you could implement it:
ViewColumn::make('title')
->view('components.tables.columns.post-title')
->action(
Action::make('quickEdit')
->modalWidth(Width::Small)
->modalSubmitActionLabel('Save Changes')
->fillForm(fn (Post $record) => [
'title' => $record->title,
])
->schema([
TextInput::make('title')
->autocomplete(false)
->required(),
])
->action(function (Post $record, array $data) {
$record->update([
'title' => $data['title'],
]);
Notification::make()
->title('Post title updated successfully')
->success()
->send();
})
)
->searchable(),
<div class="flex items-center gap-2"
x-data="{ show: false}"
@mouseenter="show = true" @mouseleave="show = false"
>
<span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white">
{{ $getState() }}
</span>
<div x-show="show" x-transition.duration.400ms>
<x-filament::link icon="heroicon-o-pencil-square" />
</div>
</div>
Conclusion
Filament provides a wide range of built-in features you can use out of the box. When the defaults aren't enough, it also gives you the flexibility to fully customize your table columns and actions.
Download source code
Run project on Firebase Studio
- Open studio.firebase.google.com and import the repository
https://github.com/wiremodel/simple-blog - Run the project. Once it's up, switch to the correct branch:
git checkout v4/table-column-inline-action
Update dependencies and migrate the database:
composer update -W
php artisan migrate:fresh --seed
Make sure your
.env file has APP_URL set to the URL provided by Firebase Studio.