DataTable @rowHover event?

[dominiksulak]

Hello

is there something like @rowClick event on DataTable component but for hover/mouseover event? I've found some old discussions about this feature but right now i cant access such a feature, nor i cant find it in official documentation. So I am wondering whether there is rowHover featuer or some similiar functionality. I need to emit some data on row hover.

thanks for answer

[tugcekucukoglu]

There is rowHover property for DataTable. https://primevue.org/datatable/#api.datatable.props.rowHover

[dominiksulak]

I know about this one, but I wasn't able to emit values onHover. According to link you sent: "When enabled, background of the rows change on hover." So I assume that this property is only for visual background changes. If I am not right and it is somehow possible to emit event (like @rowClick) please tell me how.

Thank you!

[TeoDar]

Perhaps this example will help you understand how to call an event by hover on a row. In PrimeVue, as far as I understand, Pass Through is used for this.

[dominiksulak]

Yes this is exactly what I needed. I works perfectly, already implemented in my code. Thank you very much <3!

[chezhouse]

Your demo works fine, but for whatever reason, I'm getting a row index of 1 for all rows. Not sure why yet, but I'll try and figure it out.

[Schnusiman]

Hi all,
I'm happy to find this solution.
Unfortunatly this is not working in a typescript enviroment or at least, I do not see the error:
I used the referenced example in a typescript example project and copied exactly the relevant files (*.css, productservice.ts, app.vue and main.ts), changed <script to <script lang="ts". To make it easier, I change the pt-parameter to:
:pt="{ bodyRow: { onfocus: () => {console.log('focus');}, },
In the JS-project, I see, that the listener is added to the row, in the ts-project not:
JS-Project

TS-Project

Is there a different syntax for to add a passthroug for typescript?

Thanks for any help here.

greetings

Here is a Demo on stackblitz