• Overview
• Installation
• Properties
• Methods
  • startEditing(string $rowId, string $column, string $currentValue = '')
  • cancelEditing()
  • saveEditing()
  • isEditing(string $rowId, string $column): bool
  • isEditingAny(): bool
  • updateCellValue(string $rowId, string $column, mixed $value)
• Complete Example
• Live Demo
• Keyboard Shortcuts

Overview#

The WithAuraInlineEdit trait adds click-to-edit functionality to your Livewire DataTable components. Users can click on a cell value, edit it inline, and save or cancel the change without leaving the page.

This trait is designed to work alongside WithAuraDataTable for seamless inline editing within data tables.

Installation#

Add the trait to your Livewire component:

use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;
use BlueStarSystem\AuraUIPro\Traits\WithAuraInlineEdit;

class UserList extends Component
{
    use WithAuraDataTable;
    use WithAuraInlineEdit;

    // ...
}

Properties#

The trait provides three reactive properties to track the editing state:

Methods#

startEditing(string $rowId, string $column, string $currentValue = '')#

Initiates editing mode for a specific cell. Sets the row ID, column name, and current value.

// In your Blade template
<td wire:click="startEditing('{{ $row->id }}', 'name', '{{ $row->name }}')">
    {{ $row->name }}
</td>

cancelEditing()#

Cancels the current edit and resets all editing properties.

<button wire:click="cancelEditing">Cancel</button>

saveEditing()#

Saves the current edit by calling updateCellValue() and then resets the editing state. If no row or cell is set, it returns early without action.

<button wire:click="saveEditing">Save</button>

isEditing(string $rowId, string $column): bool#

Checks whether a specific cell is currently being edited.

@if($this->isEditing($row->id, 'name'))
    <input wire:model="editingValue" wire:keydown.enter="saveEditing" wire:keydown.escape="cancelEditing" />
@else
    <span wire:click="startEditing('{{ $row->id }}', 'name', '{{ $row->name }}')">
        {{ $row->name }}
    </span>
@endif

isEditingAny(): bool#

Returns true if any cell is currently in editing mode.

updateCellValue(string $rowId, string $column, mixed $value)#

Protected method that performs the actual database update. By default, it finds the model by ID and calls update(). Override this method to add validation, authorization, or custom logic:

protected function updateCellValue(string $rowId, string $column, mixed $value): void
{
    $user = User::findOrFail($rowId);

    $this->authorize('update', $user);

    $validated = validator([$column => $value], [
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users,email,' . $rowId,
    ])->validate();

    $user->update([$column => $validated[$column]]);
}

Complete Example#

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;
use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;
use BlueStarSystem\AuraUIPro\Traits\WithAuraInlineEdit;
use BlueStarSystem\AuraUIPro\DataTable\Column;

class UserList extends Component
{
    use WithAuraDataTable;
    use WithAuraInlineEdit;

    public function query()
    {
        return User::query();
    }

    public function columns(): array
    {
        return [
            Column::make('name', 'Name')->sortable()->searchable(),
            Column::make('email', 'Email')->sortable()->searchable(),
        ];
    }

    protected function updateCellValue(string $rowId, string $column, mixed $value): void
    {
        $user = User::findOrFail($rowId);
        $user->update([$column => $value]);
    }

    public function render()
    {
        return view('livewire.user-list');
    }
}

{{-- resources/views/livewire/user-list.blade.php --}}
<div>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($this->rows() as $row)
                <tr>
                    <td>
                        @if($this->isEditing($row->id, 'name'))
                            <input
                                type="text"
                                wire:model="editingValue"
                                wire:keydown.enter="saveEditing"
                                wire:keydown.escape="cancelEditing"
                                class="aura-input"
                                autofocus
                            />
                        @else
                            <span
                                wire:click="startEditing('{{ $row->id }}', 'name', '{{ $row->name }}')"
                                class="cursor-pointer hover:text-aura-primary-500"
                            >
                                {{ $row->name }}
                            </span>
                        @endif
                    </td>
                    <td>{{ $row->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

Live Demo#

Keyboard Shortcuts#

When using inline editing, wire up keyboard shortcuts for a better user experience: