Mouse event on p-dataTable (primeNg) line

Question

I am currently developing a web application user interface using angular2. I have a p-dataTable (primeNG) component, and I would like to call a function when the mouse is above the line of this p-dataTable. The function should retrieve the data of the string that fires the mouse event.

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

Thanks in advance.

Answer 1

Your requirement should be related to the mouse? I ask because there is a built-in built-in click event that you can use, and the mouse is not very convenient for mobile devices (if that bothers you).

If you have a mouse add-in, I don’t think there is something built-in, but you can download the source code and then add only a data component to your project (maybe rename it and remember to change your import to your app. module.ts for the datatable component), edit the datatable.ts file (as shown here: https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts )

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

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

something like that. Regarding the actual display of the data, you will need to decide how you want it to look, and then implement it accordingly [scope outside of this].

I don't know if this is the best, but I think it will work.