Make the whole row clickable

[aschoenher]

⚡ PowerGrid ⚡ Feature Request

Summary

I appreciate the ability to have action buttons and collapsable rows but I wish I could trigger an action (like opening a window) if I clicked on the whole row.

Why is this needed?

Because the limitation on just having the action buttons doesn't cover all use cases

Suggested Solution(s)

Probably a new method like SetRowsAttributes, with the possibility to only apply the action to certain rows.

Related issue(s)/PR(s)

I didn't find any issue or PR related to this.

Thanks for your help !

[luanfreitasdev]

Can you give more details?

[aschoenher]

So my use case is quite simple, I have a table with three columns and an action button at the end that opens a new tab. Instead of that, I would like to be able to make the whole <tr> clickable in order to open the new tab. Tell me if you need more details or a code sample 😄

[dwainscheeren]

Is this already possible? :)

[paulmercs]

⚡ PowerGrid ⚡ Feature Request

Summary

I appreciate the ability to have action buttons and collapsable rows but I wish I could trigger an action (like opening a window) if I clicked on the whole row.

Why is this needed?

Because the limitation on just having the action buttons doesn't cover all use cases

Suggested Solution(s)

Probably a new method like SetRowsAttributes, with the possibility to only apply the action to certain rows.

Related issue(s)/PR(s)

I didn't find any issue or PR related to this.

Thanks for your help !

Is this possible? I need this for my project.

[logangr]

I would like to know if there is a solution for this.

[dansysanalyst]

A hacky solution and set an Action Rule that adds an attribute wire-click to fire an event and a second rule to set the mouse pointer.

However, this solution will NOT WORK in combination with using Action Buttons, Checkboxes, Detail Row or Toggleable switches, as this event will be fire on click.

Code:

use PowerComponents\LivewirePowerGrid\Facades\Rule;
use Livewire\Attributes\On;

public function actionRules($row): array
{
    return [
        Rule::rows()
            ->when(fn () => true)
            ->setAttribute('wire:click', "clickToEdit({$row->id}, '{$row->name}')"),

        Rule::rows()
            ->when(fn () => true)
            ->setAttribute('class', 'cursor-pointer'),
    ];
}


#[On('clickToEdit')]
public function clickToEdit(int $dishId, string $dishName): void
{
    $this->js("alert('Editing #{$dishId} -  {$dishName}')");
}

[whjvdijk]

I would really like to be able to click the entire row.
For example. I'm looking at a list of articles. I want to click that article to go to a details page. Moving your mouse to a specific button is less intuitive for a user then just simply click the related row.
Perhaps a method like rowClicked($row)?

[dwainscheeren]

Client of me where I've made a ERP system with a lot of Power Tables always clicks on the row itself and is complaining he needs to click on a button or a name which I made a href for, so a clickable row would be so handy.