Primeng: [Enhancement] DataTable hover highlighting

[bomberblue07]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

It'd be nice for a row in a data table to be highlighted when you hover over it, like a hover table in Bootstrap

[blinkxzero]

+1

[bbonczek]

Hi, how can I use this feature?

[Mrtcndkn]

Hi, try it like this

 <p-dataTable [value]="cars" rowHover="true">
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
 </p-dataTable>

[bbonczek]

Thank you for very quick response :) . It works great. I have 2 more questions:
a) can i somehow change default styling on hover? (I don't like the fact that cursor is pointer by default)
b) can i achieve similar effect for single cell instead of row?

[bbonczek]

Ok, for the first one I see, that I can change ui-state-hover. But for the second question I don' t know ;)

[Mrtcndkn]

You can achieve that with CSS too. There are td's inside of tbody td:hover can help you with this.

[ygokirmak]

@Mrtcndkn on "primeng": "^4.1.0" I couldn't managed to change css on hover..

tbody td:hover{
    padding: 0;
}

Anything missing?

[dileepkeeppalli]

@Mrtcndkn Is it possible to hide/show content inside <ng-template> based on mouseover on particular row?

[sabithpocker]

this doesnt work in tables with frozen columns, only one side gets hover css.

[tigrenok00]

How do I disable hover on the row expansion template? (using the new TurboTable)

[ggoodfrd]

@tigrenok00 I have the same issue. I've discovered that the table must not have a selectionMode enabled or present if you want the hover style to be disabled. If selectionMode="single" or selectionMode="multiple" is present then it forces the hover style to be applied, even if rowHover="false". They are using an "or" operator between selectionMode and rowHover in the code of this component, so if either is true the hover style is added.

In my opinion if both of these attributes have been added to the tag then the rowHover setting should take priority over the selectionMode setting. I'm considering opening up a separate issue since this thread is for the DataTable component.

See source code here:
rowHover||selectionMode

https://github.com/primefaces/primeng/blob/7b953bcd174da318a9211490e75a237858958410/src/app/components/table/table.ts#L51

[Quix0r]

Is this also implemented in the Primefaces (with JSF+Java parts)? Would be cool to have it. Some eye-candy is nice for the end-user, surely not necessary for functionality. The JSF developer should then be able to simply turn it on, like <p:dataTable hoverable="true">.

Edit: As I understand this forum topic it is already there but is theme-dependent (CSS class .ui-state-highlight)?