Logo Beartropy Tables

Beartropy Tables

Inline Editing
Allow users to edit data directly from the table.

Overview

The table automatically handles visual states for inline editing:

  • Idle: Displays value. Hovering shows a "card" effect with an edit icon.
  • Editing: Shows Input or Select.
  • Saving: Shows a loading spinner.
  • Success: Text turns Green + Checkmark icon (2s).
  • Error: Text turns Red + X icon (2s).

Auto-saving Text Input

Simplest form. Updates the model attribute matching the column key. 

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

Auto-saving Select (Key-Value)

Useful for Status enums or simple options. The key is saved to the database. 

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

Auto-saving Select (Complex)

Use this if your values are objects (e.g., Dates) or if you prefer a structured array. 

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 Logic (Recommended)

Use this when you need side effects (e.g., logging, notifying users, updating related models) or validation before saving. 

 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    // $id: Row ID
 9    // $field: 'price'
10    // $value: The new input value
11    $product = Product::find($id);
12 
13    // Custom Validation
14    if ($value < 0) {
15        $this->dispatch('notify', 'Price cannot be negative');
16        return false; // Returns false triggers Error UI state (Red X)
17    }
18    $product->price = $value;
19    $product->save();
20    // Side effect
21    Log::info("Price updated for {$product->id}");
22 
23    return true; // Returns true triggers Success UI state (Green Check)
24}

Updating Relationships

setUpdateField(string $field)
Sometimes you want to display a related value (e.g. user.name) but update the foreign key (e.g. user_id). 

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

Array Data Support

If your table uses an array/collection ($rows) instead of an Eloquent query, editable() will automatically update the local array state. 

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