0

I am using this stackblitz example of nested material tables to create similar table in my project. https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts

This approach creates a "hidden" row, if you will inspect the page there will be rows with class "example-element-row" followed by a row with class "example-detail-row". The "example-detail-row". is the hidden one.

The issue I have is related to my corporate CSS table class which adds extra padding + strip like view (every even row is has gray background) - with this CSS classes my table looks awful as hidden row is displayed anyway enter image description here

Is it possible to overcome this issue? I tried to add ngif with some flag to code below, but it breaks expandable rows feature even though the table is rendered very well

<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
Dmitriy Ashmarin
  • 97
  • 1
  • 8

1 Answers1

2

To replicate the behavior caused by your corporate CSS, I added the following CSS block to the stackblitz link which you shared:

tr td {
  padding:5px 0;
}

this is typical over-arching css rules for websites... to resolve, we just need to override this through a more detailed css rule:

.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
  padding:0;
}

complete working stackblitz here

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • This is so simple, and works, I spent many hours trying different combinations in the component CSS file and they didn't work. Thank you so much! One more question, with this solution is it still possible to apply gray/white background to odd/even rows? – Dmitriy Ashmarin Jan 22 '20 at 20:50
  • Thank you for your kind words... for css, the issue with us is that each 2nd row needs to be hidden, so we can't use `:nth-child(odd)` or `:nth-child(even)`... but we can use the following: ` tr:nth-child(4n+1) { background: lightgreen; } tr:nth-child(4n+3) { background: lightblue; } tr.mat-header-row { background: lightpink; }` - the stackblitz in my answer is also updated with this – Akber Iqbal Jan 22 '20 at 21:12