Material-table: How to enable row hovering?

[Davst]

Really liking this table, missing the material UI hover per row.. is there any way to use this feature with this table?

[phillhutt]

I was able to enable the hover feature by setting onRowClick={true} on the MaterialTable component.

[Davst]

This did add hover effects, but also makes the whole row look like it is linked (link pointer)

[ManishaW]

Add this line to your MaterialTable options:
options={{ rowStyle: { "&:hover": { backgroundColor: "#0000000f" } }}}

[InfinityKn]

I was able to enable the hover feature by setting onRowClick={true} on the MaterialTable component.

Try onRowClick={() => null}

[fragmyte]

I was trying for the same thing, please let me know if you got it working

Tried with -

1. onRowClick={true}
2. onRowClick={() => null}
3. options={{ rowStyle: { "&:hover": { backgroundColor: "#0000000f" } }}}

Option 1 and 2 are making cursor type as pointer, and option 3 isn't working

[InfinityKn]

I was trying for the same thing, please let me know if you got it working

Tried with -

1. onRowClick={true}
2. onRowClick={() => null}
3. options={{ rowStyle: { "&:hover": { backgroundColor: "#0000000f" } }}}

Option 1 and 2 are making cursor type as pointer, and option 3 isn't working

I use only onRowClick={()=>null} to enable row hover

this is example

[fragmyte]

@InfinityKn that example isn't working. what i'm trying to say is onRowClick={()=>null} gives hover functionality, but it makes the cursor as a pointer, which is not a good UX practice as row isn't clickable always.

[arthurtyukayev]

The only way that I was able to disable the pointer cursor while having a onRowClick handler was to use a plain old CSS file imported that overwrites the classes.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[PedrinhowVieira]

I'm trying to achieve the same as @fragmyte and @Davst , @arthurtyukayev can you share what you done to disable the pointer cursor?