Mouse-over event on a p-dataTable row (primeNg)

Question

I am currently developing the user interface of a web application using angular2. I have a p-dataTable component (primeNG) and I would like to call a function when the mouse is over a row of this p-dataTable. The function should retrieve the data of the row which triggers the mouse-over event.

If you have any idea how to handle mouse-over event with p-dataTable, I will be glad to know the solution :)

Thank you in advance.

Answer 1

Your requirement has to be mouse-over? I ask because there is a click-event built-in that you can use and mouse-over isn't a very mobile friendly behavior (if that is of any concern to you).

If you must have mouse-over, I do not think there is anything built-in, but you can download the source and then put just the datatable component into your project (maybe rename it and make sure to change your import in your app.module.ts for the datatable component), edit the datatable.ts file (as seen here: https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts)

and hijack the (mouseenter)="hover=true" (mouseleave)="hover=false" events in the template and put your own functions there to do what you want it to, for example:

(mouseenter)="showRowData($event)" (mouseleave)="hideRowData($event)"

something like that. As far as the actual display of data, you'll have to decide on how you want it to look and then implement it accordingly [scope beyond this].

I don't know if that is the best way, but I think that would work.