How to change or disable :hover of a table's row

Hi!!!

I´m trying to disable :hover from all the rows of a table. It would be ok changing hovering background color if were not possible to disable it.

How could I do? I tried with custom CSS based on the topic below but I don´t have any result:

All data appearing in the picture related to people is mocked

1 Like

not a web dev, but does !important make any difference in your CSS?

Thanks for the reply!

I've just tried but it doesn´t make any difference.

Hi @Mikel_Maximiliana

Welcome to the community!

Generally, we recommend not using CSS where you can since class names and DOM structure may change as features are added, and that could break custom style overrides. I suspect this is what has occurred since the post you are referencing was written.

I have found a way to achieve the result you want, but it disables hover effects globally, which is obviously not best practise. I will continue to research the method to do this in CSS currently.

In the meantime, I have submitted a feature request to the team as this would be great functionality to have directly in the product. Thanks for pointing this out!

I'll keep you updated with anything else I find.

Hey @Mikel_Maximiliana

Currently, to do it you would use the following code:
.YDTwCs.GaHkub.sxDQ7c{background-color: rgb(255, 255, 255) !important;

But you will have to tweak the class name on import, as they get randomised. On import, you will have to check the grid cell class name and change it to what is being displayed for you.

As I say, I have also submitted a feature request for this to be in-built within Retool.

Hi @sarasey

Good to see the feature request. I think it would be useful when you are only displaying information in the table, but the rows are not clickable, or when you want to indicate that a component is not user-interactive.

what are the three class selector you are using in CSS? I tried but I can´t get any result.

In my case the random class names are like this:
._main_l9s26_1
._grid_l9s26_41
._row_134i4_1

Hey @Mikel_Maximiliana

When you import, it's randomly generated, so generally just hovering over the class and seeing what it highlights until it hits the one for table row is the suggested course of action. You can get yourself in the right place by searching the element tree for the row content text :slightly_smiling_face: