Laravel Livewire 2.x is event on table row click

Question

I have very simple Table in Laravel Livewire

<table class="table-auto w-full">
    <thead>
        <tr>
            <th class="px-4 py-2">Id</th>
            <th class="px-4 py-2">Name</th>
            <th class="px-4 py-2">Age</th>
            <th class="px-4 py-2">Action</th>
        </tr>
        @foreach($students as $student)
            <tr>
                <td class="border px-4 py-2">{{$student->id}}</td>
                <td class="border px-4 py-2">{{$student->name}}</td>
                <td class="border px-4 py-2">{{$student->age}}</td>
                <td class="border px-4 py-2">
                    <x-jet-danger-button wire:click="confirmItemDeletion( {{ $student->id}})" wire:loading.attr="disabled">
                        Delete
                    </x-jet-danger-button>
                </td>
            <tr>
    @endforeach
    </tbody>
</table>

Delete button is also working. I want to open another model for edit on row click while delete button should be working too.

I try to add this code in every but its working but

<td class="border px-4 py-2" wire:click="confirmItemEdit( {{ $item->id}})">{{$student->id}}</td>

1. not showing link cursor. to get this I put this style in <tr style="cursor: pointer;">
2. also is there a way to not to write wire:click in every

Thanks

Answer 1

1. You're using Tailwindcss, so you can use cursor-pointer on your <tr> element;

<tr class="cursor-pointer">
...
</tr>

You can chek out the other cursor classes available here.

2. You should be able to wire the click event to your <tr> element;

<tr wire:click="confirmItemEdit({{ $item->id }})">
...
</td>

Update

So when you put a click handler on the entire <tr> and another on a button, both click events fire, the button event first and then the row.

Top avoid this, use the .stop modifier on the button click event.

<tr class="cursor-pointer" wire:click="confirmItemEdit({{ $item->id }})">
  <td>...</td>
  <td>
    <button wire:click.stop="confirmItemDeletion({{ $student->id }})">Delete</button>
  </td>
</tr>

The .stop modifier prevents the click event propagating. More information on event modifiers here.