Components: Document limitation of matRipple on native table rows and possible solutions

[jchafik]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ripple effect should be contained within the table row.

What is the current behavior?

When using <tr mat-row> in Angular 6 instead of <mat-row ...>, the ripple effect isn't contained within its parent container. I believe this is caused by the fact that div (the container used for the ripple) is not a valid child of the tr element it's applied to.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-myteuk

What is the use-case or motivation for changing an existing behavior?

N/A

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.x

[devversion]

Actually that's a different issue than #11165. The issue seems to be that position: relative on elements with display table-row does not have any effect.

Meaning that the ripples won't have the proper positions. Also overflow: hidden does not work. Both things are the foundation for the ripples.

[Chris2011]

Have exactly the same problem. Any workrounds here?

[devversion]

A workaround would be using <mat-row> instead of the native <tr> element.

[julien-vonoetinger]

I have faced the same problem too and it would be nice to have a fix for this.

[daniel-mckenna-zz]

Also have the same issue.

[glains]

I am having the same issue as well, but <mat-row> is not working as well.

[rocos-yishi]

  <table mat-table [dataSource]="items">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple></mat-row>
  </table>

That works for me. :)

[theunreal]

Using Material 7.0.1 - I still experience this issue.

[MatthiasKunnen]

I believe this is because <tr> may only contain <td> and <th> (See spec). The overflow: hidden on the <tr> is simply not respected by the browser (Chrome nor Firefox). Using a ripple on mat-row works, contrary to @glains' comment. I tested using 7.0.1.

Opinion
After trying out the ripple on a table I came to the conclusion that, in my case, it's not a good idea due to the following reasons:

1. The row is far larger horizontally compared to vertically, this makes the ripple quite ugly
2. The ripple distracts when selecting text

[nalexander50]

@rocos-yishi solution worked for me. It would be nice if it were added to the Examples section for Table on the Angular Material website.

[glains]

@MatthiasKunnen Using the mat-row element, the ripple effect indeed works now.

[simeyla]

Still not working?

You probably forgot imports: [ MatRippleModule ]

[gautamkrishnar]

@simeyla thats the exact cause.. ripple is working fine for me even on tr.

[ccjmne]

@gautamkrishnar It's not working for me either, and @MatthiasKunnen's comment does make sense to me.
Would you be able to share a working StackBlitz using <tr mat-row matRipple> please? We can't get it to work wit the "plain" <table mat-table><tr mat-row><td mat-cell> model :(

[qortex]

Any valid workaround on the <table mat-table><tr mat-row><td mat-cell> scenario?

[spyter]

@MicMicMon, have you tried using the flex version of the table?

I'm using that in a project and matRipple works for me. If you have buttons in the row, you need to work some magic to disable the ripple effect from being propagated by the buttons, but other than that it seems to work.

See this link for more info:

https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

[qortex]

Thanks @spyter

Actually, because of the warning in the docs, and all the good reasons listed here, I wanted to stick with the <table mat-table> scenario - but indeed, moving to <mat-table> makes ripple work out of the box.

[alicanertop]

Thanks @spyter

Actually, because of the warning in the docs, and all the good reasons listed here, I wanted to stick with the <table mat-table> scenario - but indeed, moving to <mat-table> makes ripple work out of the box.

When i used like u said then sticky scenario will broken

Sorry for bad english

[QuickScoP3s]

2 years after the original issue, Angular 9 still has this issue...
Luckily the workaround by @rocos-yishi still works, thanks!

[devversion]

@QuickScoP3s Do you have any proposal in mind? This is obviously a limitation in browsers we are hitting due to our ripple implementation. tr, td elements are not displayed as blocks, hence overflow: hidden does not work. he incorrect position is also caused by a limitation of these table elements. See: https://bugs.chromium.org/p/chromium/issues/detail?id=417223.

There is not much we can do about this. Given there is a reasonable solution of using the non-native table when needing ripples, I'm closing this issue.

I'd love chatting more about this, but given our current situation, I believe there is no good way to make this work for native tables.

Here is an alternative example that shows how to make ripples work for native table-rows: https://stackblitz.com/edit/comp-11883?file=app/app.component.html.

[QuickScoP3s]

I didn't mean to sound rude (apologies if I did), but since the issue was still open, I though the team was still working on it. I've been using the approach to work around the problem, as suggested, with the downside being the sticky headers not working... I'd loved seeing a solution as I originally wanted to use sticky headers 😉 I had no idea that the table itself was the limiting factor, but thanks for clearing this up!

[devversion]

@QuickScoP3s No worries at all! Sorry if the state of the issue was unclear. I think we failed communicating clearly why this hasn't been resolved yet. Hopefully my latest message is clear enough. I've also created a demo StackBlitz that shows how ripples can be used together with native tables. That might be helpful to some people.

[Spencer-Easton]

@devversion StackBliz demo works as advertised. If this issue is not easily solvable your work around should be discoverable from the docs. Would save a bit of hair pulling ;)

Edit:
Demo needs:
<th mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></th>
changed to
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>

[devversion]

@Spencer-Easton Sounds reasonable. I'll re-open this as we could certainly have this documented in the ripple overview. Any help on this would be appreciated as it's most likely low-priority for us.