we are using Angular Material table for our app:
https://material.angular.io/components/table/overview
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
could you please to show how to highlight a row on mouse hover?
Add some CSS with the :hover
selector to the mat-row
elements:
.mat-row:hover {
background-color: red;
}
StackBlitz demo
You can do this styling the component in your theme file:
@mixin newName-theme($dark-theme)
mat-table tbody tr:hover{
cursor: pointer;
background: #b4b4b433;
}
@include newName-theme($dark-theme);
you can find more examples here
in my case .mat-row:hover didn't work, it was highlighting the whole table. this works for me:
tr.mat-row:hover {
background-color: yellow;
}
Angular Material currently has that feature here but if you want to stylize more, here is my solution
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With