How to fix row hover highlight issue in PrimeNG TurboTable when you have frozen & unfrozen columns together

PrimeNG is a collection of rich UI components for Angular. It provides a complete set of native widgets featuring 80+ easy to use components for all your UI requirements. All its widgets are open source and free to use under MIT license. 

TurboTable is a PrimeNG component with a template driven approach that is lightning fast, fully customisable, provides far richer control to the page author over the representation.

The Problem

One of the feature of the TurboTable component is that columns can be made fixed where others remain scrollable. These are termed frozenColumns.

Now, let’s go ahead and build a TurboTable with frozen & unfrozen columns.

The above implemented TurboTable gets rendered as shown below.

Image for post
Frozen Columns(ID) & Unfrozen Columns(First Name, Last Name & City)

Now, ideally if you hover on a table row, the entire row should get highlighted.

Image for post
When you hover on a frozen column in a row, it only highlights the frozen columns of the row
Image for post
When you hover on a unfrozen column in a row, it only highlights the unfrozen columns of the row

But, as you can see above, that is not the case when you have frozen & unfrozen columns.


The Reason

TurboTable uses a template driven approach where a table is divided into multiple templates. In our example, the table comprises of four templates:

  • frozen header
  • frozen body
  • header
  • body

Each of these templates render as different tables as highlighted below.

Image for post
One table each for frozen header, frozen body, header & body

Hence, when you hover on a frozen column in a row, it only highlights the frozen columns of the row since they are part of the same table. Similarly when you hover on an unfrozen column in a row, it only highlights the unfrozen columns of the row since they all are part of the same table.


The Solution

Use rowData which is shared between the frozen body and the body template.

Since rowData is shared between the frozen body & body template, on mouse enter we are adding a hover property to the rowData and setting it as true and on mouse leave we are setting the hover property of the rowData to false.

The hover property of the rowData is then used to add/remove the row-hover class that highlights/unhighlights the row of the frozen & unfrozen columns accordingly.


Another Solution

If you do not want to mutate the rowData, then another solution is to use jQuery to add the row-hover class dynamically to both the frozen body & the body templates.

In this approach, on mouse enter, we take the frozen/unfrozen table row element ref and find its index. Next, we find the parent element that holds the frozen body & the body template. Now, using the parent element, find the frozen body & the body template rows and add the row-hover class to the appropriate row which can be derived from the index calculated earlier. Similarly, on mouse leave, remove the row-hover class.

The addition/removal of the row-hover class facilitates the highlighting/unhighlighting of the row of the frozen & unfrozen columns accordingly.


Conclusion

The complete working project can be found here.

Leave a Reply

Your email address will not be published. Required fields are marked *