Search code examples
cssangularangular-materialangular-material-table

Mat-table with expandable rows, remove hidden rows

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>
Solution

  • 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