Mat-table with expandable rows, remove hidden rows

0
votes

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>
1
cssangularangular-materialangular-material-table

1 Answers

2
votes

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