Enhancing Filament Tables with Click-to-Edit Columns

Filament provides a powerful table component with various built-in features, including inline editing via the TextInputColumn component (documentation). However, the native TextInputColumn does not support a true "click-to-edit" mode where a column initially displays as text and transforms into an input field when clicked.

In this article, we'll walk through creating a custom Filament table column that enables "click-to-edit" functionality using Alpine.js. This solution ensures a smooth user experience and integrates seamlessly with Filament's table system.

Why Create a Custom Inline Edit Column?

While Filament's TextInputColumn allows inline editing, it lacks a "click-to-edit" behavior out of the box. Instead, it always renders an input field. Our custom solution enhances usability by displaying plain text initially and only revealing an input field when the user clicks on it.

Key Features of the Custom InlineEditColumn

• Click-to-Edit Behavior: Displays text by default and switches to an input field when clicked.
• Livewire Integration: Updates the table data dynamically without a full-page reload.
• Error Handling: Displays validation errors when needed.
• Cancel Option: Allows users to revert changes before saving.

Implementing the InlineEditColumn

1. Creating the InlineEditColumn Class

namespace App\Filament\Components\Tables;

use Closure;
use Filament\Support\RawJs;
use Filament\Tables\Columns\Column;
use Filament\Tables\Columns\Concerns;
use Filament\Forms\Components\Concerns\HasStep;
use Filament\Tables\Columns\Contracts\Editable;
use Filament\Forms\Components\Concerns\HasInputMode;
use Filament\Tables\Columns\Concerns\CanFormatState;
use Filament\Forms\Components\Concerns\HasExtraInputAttributes;

class InlineEditColumn extends Column implements Editable
{
    use Concerns\CanBeValidated;
    use Concerns\CanUpdateState;
    use HasExtraInputAttributes;
    use CanFormatState;
    use HasInputMode;
    use HasStep;

    protected string $view = 'filament.components.tables.inline-edit-column';

    protected string | RawJs | Closure | null $mask = null;
    protected string | Closure | null $type = null;

    protected function setUp(): void
    {
        parent::setUp();
        $this->disabledClick();
    }

    public function type(string | Closure | null $type): static
    {
        $this->type = $type;
        return $this;
    }

    public function getType(): string
    {
        return $this->evaluate($this->type) ?? 'text';
    }
}

This class extends Column and integrates Filament's Editable interface. It defines:

• The view file (filament.components.tables.inline-edit-column)
• The column type (text, number, etc.)
• Methods for handling data transformations

2. Creating the Blade View (inline-edit-column.blade.php)

<div x-data="{ isEditing: false, state: @js($getState()), originalState: @js($getState()) }">
    <!-- Display text when not editing -->
    <div x-show="!isEditing" @click="isEditing = true" class="cursor-pointer">
        {{ $state ?: '—' }}
    </div>
    
    <!-- Input field when editing -->
    <div x-show="isEditing" class="flex items-center">
        <input type="text" x-model="state" class="border rounded p-1" />
        
        <!-- Save button -->
        <button @click="isEditing = false; $wire.updateTableColumnState(name, recordKey, state)" class="text-green-600">✔</button>
        
        <!-- Cancel button -->
        <button @click="state = originalState; isEditing = false" class="text-red-600">✖</button>
    </div>
</div>

This Blade file uses Alpine.js to:

• Show plain text by default
• Transform into an input field when clicked
• Save or revert changes dynamically

Using the Custom InlineEditColumn in a Filament Table

Now, we can integrate this column into a Filament table like so:

use App\Filament\Components\Tables\InlineEditColumn;

Table::make()
    ->columns([
        InlineEditColumn::make('name')
            ->label('Product Name')
            ->sortable()
            ->searchable(),
    ]);

Live Demo & GitHub Repository

You can explore the full implementation and try it out in your own project by visiting the GitHub repository:

🔗 GitHub Repo

Conclusion

By leveraging Alpine.js and Livewire, we have extended Filament's table system to include a click-to-edit column. This improves usability by keeping the interface clean while allowing quick edits.

Give it a try and feel free to contribute or suggest improvements!