How It Works

The table handles visual states automatically for each editable cell.

Editing States

Idle: Displays the value. Hovering shows a card effect with an edit icon.
Editing: Shows an input or select field.
Saving: Shows a loading spinner.
Success: Text turns green with a checkmark icon (2 seconds).
Error: Text turns red with an X icon (2 seconds).

Text Input Editing

The simplest form — click a cell to edit its value inline.

Auto-Saving Text Input

Call ->editable() on any column to make it editable with a text input. The value is automatically saved to the model attribute matching the column key.

1Column::make('Name', 'name')
2    ->editable(),

Select Editing

Use dropdowns for columns with predefined option sets.

Key-Value Options

Pass 'select' as the first argument and an associative array of options. The key is saved to the database, the value is displayed.

1Column::make('Status', 'status')
2    ->editable('select', [
3        'draft'     => 'Draft',
4        'published' => 'Published',
5        'archived'  => 'Archived',
6    ]),

Complex Options (Objects & Null)

For values like Carbon objects or null, use a structured array with value and label keys.

1Column::make('Verified At', 'email_verified_at')
2    ->editable('select', [
3        // Option with Carbon Object as value
4        ['value' => now(), 'label' => 'Mark Verified Now'],
5        // Option with Null value
6        ['value' => null,  'label' => 'Unverify'],
7    ]),

Custom Save Logic

Take full control of the save process with a custom method.

Custom Method Handler

Pass a method name as the third argument to editable(). Your method receives $id, $field, and $value. Return true for success (green check) or false for error (red X).

 1// In Table::columns()
 2Column::make('Price', 'price')
 3    ->editable('input', [], 'updatePrice'),
 4 
 5// In Table Component Class
 6public function updatePrice($id, $field, $value)
 7{
 8    $product = Product::find($id);
 9 
10    if ($value < 0) {
11        $this->dispatch('notify', 'Price cannot be negative');
12        return false; // Returns false triggers Error UI state (Red X)
13    }
14    $product->price = $value;
15    $product->save();
16    Log::info("Price updated for {$product->id}");
17 
18    return true; // Returns true triggers Success UI state (Green Check)
19}

Use custom methods for validation

Custom save methods are recommended when you need validation, side effects (logging, notifications), or updates to related models. The return value controls the visual feedback shown to the user.

Relationships & Arrays

Edit relationship columns and array-based table data.

Updating Relationship Foreign Keys

setUpdateField(string $field) — When displaying a related value (e.g., user.name) but saving to the foreign key (e.g., user_id), use this modifier.

1Column::make('User', 'user.name')
2    ->setUpdateField('user_id') // Updates 'user_id' instead of 'user.name'
3    ->editable('select', User::pluck('name', 'id')),

Array Data Editing

When your table uses array/collection data instead of Eloquent, editable() automatically updates the local array state.

1Column::make('Title', 'title')
2    ->editable(), // Updates $this->rows[$index]['title']

Authorization

Control which fields can be updated with the authorizeFieldUpdate method.

EditableUsersTable.php

Override authorizeFieldUpdate() to whitelist which fields can be edited. This is called before any auto-save operation and should return true to allow the update.

 1use App\Models\User;
 2use Beartropy\Tables\Classes\Columns\Column;
 3use Beartropy\Tables\Classes\Columns\ToggleColumn;
 4use Beartropy\Tables\YATBaseTable;
 5use Illuminate\Database\Eloquent\Model;
 6 
 7class EditableUsersTable extends YATBaseTable
 8{
 9    public $model = User::class;
10 
11    public function columns(): array
12    {
13        return [
14            Column::make('Name', 'name')
15                ->sortable()->searchable()->editable(),
16            Column::make('Email', 'email')
17                ->sortable()->searchable()->editable('input'),
18            ToggleColumn::make('Verified', 'email_verified_at'),
19        ];
20    }
21 
22    public function settings(): void
23    {
24        $this->setPerPageDefault(15);
25    }
26 
27    public function authorizeFieldUpdate(Model $record, string $field, mixed $value): bool
28    {
29        return in_array($field, ['name', 'email', 'email_verified_at']);
30    }
31}

Always implement authorization

Without authorizeFieldUpdate(), any editable column can be modified by the user. Always whitelist allowed fields to prevent unauthorized data changes.

Live Demo

Try it — click on Name or Role cells to edit them inline.

Editable Table

#	Name	Role	Department
1			Engineering
2			Marketing
3			Sales
4			Engineering
5			Marketing

1<livewire:tables.demos.demo-editable-table />

Beartropy Tables