UTable row click event UI3

[richard-hernandez-dev]

Environment

• Operating System: Windows_NT
• Node Version: v22.11.0
• Nuxt Version: 3.15.0
• CLI Version: 3.17.2
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: [email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @vueuse/motion/[email protected]

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.0-alpha.10

Reproduction

<UTable
:data="data"
:columns="columnsTable"
@select="select"
/>

Description

In Nuxt UI v3, the component does not provide any trigger event when clicking on a table row. In contrast, the v2 version included the @select event, which allowed developers to handle row clicks effectively. This regression impacts the ability to implement common interaction patterns, such as handling row selection or performing actions based on user clicks.

Does Nuxt UI v3 have an event similar to the @select event from v2 for the component? Specifically, is there a way to trigger an event when a table row is clicked?

Additional context

No response

Logs

[architjee]

@richard-hernandez-dev . Forgive me if I overstep or presume, but isn't update:rowSelection event helping your use case.

[HugoRCD]

There's no event on the row click for the moment, but you can already implement features to select rows from the table 🤔 What exactly would you need that for?

[richard-hernandez-dev]

I want to add an event so that when I press a row, it retrieves the id and uses it in a function. Here's an example implementation:
<UTable
:data="vehicles?.data ?? []"
:columns="columns"
:loading="pending"
sort-asc-icon="i-tabler-arrow-up"
sort-desc-icon="i-tabler-arrow-down"
ref="table"
class="cusror-pointer"
@select=navigateTo(/my-url/${row.id})
/>
like the version V2

Forgive me if I overstep or presume, but isn't update:rowSelection event helping your use case.

I want to add an event that triggers when I press a row, allowing me to retrieve the id of the row and use it in a function. However, I don't want to update the selection itself. Here's an example in V2:
<UTable v-model="selected" :rows="people" @select="select" />

[caiotarifa]

@architjee @HugoRCD

I believe these are different things. What @richard-hernandez-dev meant is that he'd like a trigger similar to @select that was present in version 2. Previously, this trigger worked as if it were an @click on a table row. This was especially useful when there was a need to navigate the user to another page upon selecting/clicking a table row.

In version 3, we have @row-selection, which is more related to row selection rather than clicking on a row.

[HugoRCD]

Ok, I see this could be simple enough to add. There are plans to add more Tanstack features; however, I haven't seen a feature related to clicking on a row 🤔 I'll see about maybe making a PR!

[caiotarifa]

Possibly related with #2822.