Highlight in a row when the mouse is over a row in material-table

Question

Which component i must use, to obtain a highlight in a row when the mouse is over a row, using the material-table component?

I dint find any property or which component override to obtain that.

Thanks in advace for your time Best Regards

score 3 · Answer 1 · answered Apr 19 '19 at 14:16

3

you could create a css to highlight row

tr:hover{
background:gray;
}

Refer to sandbox

answered Apr 19 '19 at 14:16

Abdulla Thanseeh

score 1 · Accepted Answer · answered Apr 19 '19 at 14:23

1

If you want only this table to have an hover effect, wrap it in another element or give it a class as in the example above:

.myTable tr:hover {
  background-color: red;
}

answered Apr 19 '19 at 14:23

Mosè Raguzzini

Your codesandbok dont have your solutions, but i understand you explanation and did it. Using your logic what could be the solutions to change color if that row are cliked? – Orestes Apr 19 '19 at 15:22
Sorry, I've forgotten to copy in the clipboard the forked link :) – Mosè Raguzzini Apr 19 '19 at 15:29
and change different color of the row if clicked? – Orestes Apr 19 '19 at 16:03
You can use :active selector – Mosè Raguzzini Apr 19 '19 at 16:15

2 Answers2