Angular Material. to highlight a table row on mouse over

Question

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?

p4r1 · Answer 1 · 2020-05-19T19:17:07.697

93

Add some CSS with the :hover selector to the mat-row elements:

.mat-row:hover {
  background-color: red;
}

StackBlitz demo

edited May 19 '20 at 19:17

answered Apr 09 '18 at 19:21

p4r1

2,490
16
18

I mean something like this: (onmouseover) highlightedRow.indexOf(row) style.background = 'grey' – Vladyslav Plakhuta Apr 09 '18 at 19:48
That is not the `Material` way - If you change the theme then all other Material hover over will change but not this particular one – Piotr Kula Aug 07 '18 at 13:52
7

This isn't changing the theme, this is an addition to the Material theme behavior. Can you specify what is "the Material way" of doing this? – p4r1 Aug 07 '18 at 15:01
1

user tr.mat-row:hover instead – Sebastian Castaldi Aug 07 '19 at 17:31
1

!important is necessary for me – Amir Azizkhani Aug 18 '19 at 06:25
OMG, why people don't like simple way like this according to other comments in this thread? I feel people are afraid and they need to be under some framework to protect them. – Feb 18 '21 at 11:31
1

@AmirAzizkhani it should be: ```.mat-mdc-table tr.mat-mdc-row:hover { background-color: red; } ``` – Peter Boomsma Mar 16 '23 at 16:59

score 7 · Answer 2 · answered Dec 27 '18 at 18:03

7

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

answered Dec 27 '18 at 18:03

Sandy Veliz

690
9
16

This is better because it allows you to easily set different hover colors for different themes you may use in the same project. But I had to use `tr.mat-row:hover` – Carl Kroeger Ihl Sep 13 '19 at 13:48

score 6 · Answer 3 · answered Aug 07 '19 at 17:29

6

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;
  }

answered Aug 07 '19 at 17:29

Sebastian Castaldi

8,580
3
32
24

score 4 · Answer 4 · answered Aug 17 '19 at 19:21

4

Angular Material currently has that feature here but if you want to stylize more, here is my solution

answered Aug 17 '19 at 19:21

John Osorio

81
5

2

It would be nice if you can quote some documentation. answer containing mostly link may be deleted – alt255 Aug 17 '19 at 20:09
1

Actually, it doesn't, you can see the linked stackblitz have custom style of `tr.example-element-row:not(.example-expanded-row):hover { background: #777; }` applied. It have nothing to do with default material styling. – im.pankratov Feb 10 '20 at 11:23

score 2 · Answer 5 · answered Feb 02 '23 at 12:20

2

Angular 15 changed this slightly. I'm now using:

  tr.mat-mdc-row:hover {
      background-color: yellow;
  }

answered Feb 02 '23 at 12:20

Corey

226
1
13

score 2 · Answer 6 · answered Jul 17 '23 at 16:14

2

If you use Angular material > 15 and also .css style file for components, this could be helpful

.mat-mdc-table .mdc-data-table__row:hover{
 background-color: rgba(236, 236, 236, 0.514) !important;
 }

answered Jul 17 '23 at 16:14

B.Habibzadeh

490
6
10

score 0 · Answer 7 · answered Sep 02 '20 at 23:49

0

This worked for me. I applied Bootstrap 4 class .table-hover to Angular material table.

<table class="table-hover" mat-table>...</table>

answered Sep 02 '20 at 23:49

Anudeep

289
3
8

score 0 · Answer 8 · answered May 22 '23 at 09:51

For me neither of those worked in Angular 15, had to set background color for <table> and then change it for <mat-row> and <mat-header-row> (it seems that it already has hover but in same background color):

.table {
  background-color: whitesmoke;
}

.header-row {
  background-color: white;
}

.element-row {
  background-color: white;
}

and assign those classes to mentioned elements

score 0 · Answer 9 · answered Jul 23 '23 at 13:59

Thanks to B.Habibzadeh post here

for me this was enough

.mat-mdc-row:hover {
  background-color: red !important
}

And when you use your own class for all rows, even this worked for me:

.myRowClass:hover {
  font-weight: bold;
  background-color: red !important
}

Hope this will help someone who has issues in new Angular version.

Angular Material. to highlight a table row on mouse over

9 Answers9

Linked