How to add rowClassName to a particular row in antd table on onClick of the row and not after onMouseLeave

user_7229389 0
Viewed 1455

I am using antd table to display the information and I want to apply the class to the particular row when I click on it.
Currently its applying the class when I move the mouse out of the row after clicking it.
please consider this Code Sandbox for the code.
the the background color of the row is changing when I move the mouse out of the row after clicking on it.
I want it change as soon as I click on it.
Also when I sort any column the background color for that column is being removed, how can I avoid that?
Any solution, reference or hint is appreciated. thank you

antd reactjs javascript
2 Answers

The background color is working as you have intended. The problem is that you are hovering on the row aswell which is changing the color. Try using a table that does not have the :hover functionality.

user_70358860

The problem was even after applying another class the default styles for hover are still being applied, I had to suppress the default styles for hover on a row, for that I added this style for that particular antd css class in my App.css

.ant-table-tbody > tr.ant-table-row:hover > td {
  background: unset;
}

is what I did.

user_72293890
Related