Components: feat-req(table): row hover on desktop

[ghost]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

If the used device is a desktop device, each row of the data table should have a background on hover:

Display a background in a table row if a user hovers over any part of that row. If there are separate hover states on individual table cells, display both the hover state of the cell and row at the same time.

Hover background

• Grey 200 (#EEEEEE)

https://material.io/guidelines/components/data-tables.html#data-tables-interaction

[donroyco]

Have you checked #6202?

[willshowell]

@donroyco I dunno if it's clear from that issue whether there's a canonical issue tracking hover styles.

Or maybe it simply falls under https://github.com/angular/material2/issues/5889?

[ghost]

Have you checked #6202?

Nah, i didn't see that becuz it's closed. :\

But simply adding a :hover state to .mat-row would close this issue, or am I wrong with that!? 😕

[jelbourn]

I'm leaning towards saying that it's best for users to add their own :hover state since it avoids us adding something that won't fit all use-cases. @andrewseguin thoughts?

[dhniels]

Following this as well. I suppose adding our own :hover styles works, though I'm always in favor of built-in solutions for stuff like this. Perhaps it could be disabled by default but enabled by users.

[danger89]

I also like to see some built-in feature in material2, especially with this checkbox + hover background combi.. :+1:

It's like using a framework, were I need to "hack" again to meet the basic requirements.

Please don't close this issue.

[andrewseguin]

This should only be the case if the rows are selectable, which not all uses of <mat-table> are. We would like to provide a simple table that includes this use case.

For now, I definitely don't think adding a a CSS :hover state is hacking it, especially since the table does not natively know about selection.

Closing this as a duplicate of #5889 which will be such a table that comes with selection built-in

[ppumkin]

So yea,I agree with @danger89 - if you think about it is like that it is hacking on extra css outside the scope of Material intentions. I did not have to add special classes or css to mat-buttons, mat-nav-list, mat-menu, etc... !?!? (do they know about selection?)

In case somebody wants to quickly add it in as CSS which will work if you select the correct colour and don't use dynamic material theme switching.

For a light theme base

.mat-table .mat-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

For a dark theme base

.mat-table .mat-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

And if you are on Anglur with Material then you probably want to use mixins - So in your sites styles.scss you can use this (the includes are generated in another file using the mat-light-theme() / mat-dark-theme(). Included below)

@mixin mat-table-hover($is-dark) {
  [mat-row] {
    @if $is-dark {
      &:hover {
        background: rgba(255, 255, 255, 0.04);
      }
    }
    @else {
      &:hover {
        background: rgba(0, 0, 0, 0.04);
      }
    }
  }
}

.material-deeppurple-amber-theme {
  @include angular-material-theme($material-deeppurple-amber-theme);
  @include mat-table-hover(false);
}

.material-indigo-pink-theme {
  @include angular-material-theme($material-indigo-pink-theme);
  @include mat-table-hover(false);
}

.material-pink-bluegrey-theme {
  @include angular-material-theme($material-pink-bluegrey-theme);
  @include mat-table-hover(true);
}

.material-purple-green-theme {
  @include angular-material-theme($material-purple-green-theme);
  @include mat-table-hover(true);
}

I apply these classes to my body so I can switch between the example themes. The mixins used in angular-material-theme are extracted from the source code scss

//deeppurple-amber.scss
$material-deeppurple-amber-primary: mat-palette($mat-deep-purple);
$material-deeppurple-amber-accent: mat-palette($mat-amber, A200, A100, A400);
$material-deeppurple-amber-theme: mat-light-theme($material-deeppurple-amber-primary, $material-deeppurple-amber-accent);

//indigo-pink.scss
$material-indigo-pink-primary: mat-palette($mat-indigo);
$material-indigo-pink-accent: mat-palette($mat-pink, A200, A100, A400);
$material-indigo-pink-theme: mat-light-theme($material-indigo-pink-primary, $material-indigo-pink-accent);

//pink-bluegrey.scss
$material-pink-bluegrey-primary: mat-palette($mat-pink, 700, 500, 900);
$material-pink-bluegrey-accent: mat-palette($mat-blue-grey, A200, A100, A400);
$material-pink-bluegrey-theme: mat-dark-theme($material-pink-bluegrey-primary, $material-pink-bluegrey-accent);

//purple-green.scss
$material-purple-green-primary: mat-palette($mat-purple, 700, 500, 800);
$material-purple-green-accent: mat-palette($mat-green, A200, A100, A400);
$material-purple-green-theme: mat-dark-theme($material-purple-green-primary, $material-purple-green-accent);

Very easy!
Thank you.