Row Hover Event causing template bindings to be constantly recalculated
See original GitHub issueI’m submitting a … (check one with “x”)
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter
Current behavior
As you hover over the rows of a rendered table - it seems a form of change detection is kicking in, causing all template functions to be called multiple times a second. This is causing a performance problem by causing a lot more work than necessary to occur on the front end of our app.
Expected behavior
I’d expect that hovering over the table rows would not trigger all template bindings to be updated, as no data would have changed.
Reproduction of the problem
Let’s say you have a simple ngx column:
<ngx-datatable-column name="Company" width="300">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ uppercase(value) }}
</ng-template>
</ngx-datatable-column>
With the corresponding component method for uppercase
being:
uppercase(word) {
console.log("processing the uppercase...")
return word.toUpperCase()
}
On the rendered table, as you hover over the rows, you’ll see that the console log message is appearing multiple times per second - demonstrating multiple calls.
What is the motivation / use case for changing the behavior? The triggering of the function bindings, even if fast individually, being ran constantly without need is causing a performance issue, and the page to even feel janky.
Please tell us about your environment: Mac OSX, latest Chrome
- Table version: 10.2.3
Still an issue with the latest version (10.2.3). It appears the issue was brought in with 10.1.0
- with the Row Hover Event
feature. I’ve tested with 10.0.5
to confirm that the issue is not present there. I feel that this represents a performance regression, and for those who have desire to track hover events - it shouldn’t be causing a ‘digest loop’ style recalculation when simply moving the mouse over table rows.
-
Angular version: 4.2.4 (and tested with 4.3.6)
-
Browser: Latest Chrome, Safari etc
-
Language: all
Issue Analytics
- State:
- Created 6 years ago
- Reactions:7
- Comments:12 (5 by maintainers)
Top GitHub Comments
Thanks for the response @wizarrc. In our case, we have no need for the activate of a row, especially on hover event. It really feels excessive to recalculate all bindings every time the mouse moves over a table - with it triggering many times a second. It causes the experience to quickly get janky. Is there not a way to disable this ‘listener’ - to opt out of the activate event so that it does not cause all bindings to be recalculated as frequently as it is doing to?
I did a pr that will fix this issue for those who like me don’t need mouseenter events in their app