Mat-Table inside a MAt-Table shows extra row for every record

[Partha Majumdar]

Dear Sir/Madam,

I have implemented a MAt-Table inside a Mat-Table. The data displayed is correct. However, for every row of the parent row, it shows one extra empty row in the Mat-Table. As I am unable to trace the error, I seek help on this forum. Please help.

Regards,

Partha

The HTML code is as follows.

<div class="mat-elevation-z8">

<table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort multiTemplateDataRows width="100%">

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<!-- Tax Code Column -->

<ng-container matColumnDef="taxCode">

<th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.taxCode}} </td>

</ng-container>

<!-- Tax Name Column -->

<ng-container matColumnDef="taxDescription">

<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.taxDescription}} </td>

</ng-container>

<!-- Tax Type Code Column -->

<ng-container matColumnDef="taxTypeCode">

<th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Type Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.taxTypeCode}} </td>

</ng-container>

<!-- Edit Column -->

<ng-container matColumnDef="edit">

<th mat-header-cell *matHeaderCellDef>

</th>

<td mat-cell *matCellDef="let row">

<a mat-button matTooltip="Edit" [routerLink]="['/tax/edit', row.taxCode]" *ngIf="isUserAuthenticated"><mat-icon>create</mat-icon></a>

</td>

</ng-container>

<!-- Delete Column -->

<ng-container matColumnDef="delete">

<th mat-header-cell *matHeaderCellDef>

</th>

<td mat-cell *matCellDef="let row">

<button mat-button matTooltip="Delete" color="warn" (click)="onDelete(row.taxCode)" *ngIf="isUserAuthenticated"><mat-icon>clear</mat-icon></button>

</td>

</ng-container>

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->

<ng-container matColumnDef="expandedDetail">

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">

<div class="example-element-detail"

[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="element.taxVersion.length > 0">

<table mat-table [dataSource]="element.taxVersion" class="mat-elevation-z8" width="100%">

<ng-container matColumnDef="taxID">

<th mat-header-cell *matHeaderCellDef> Tax ID </th>

<td mat-cell *matCellDef="let element"> {{element.taxID}} </td>

</ng-container>

<ng-container matColumnDef="versionCode">

<th mat-header-cell *matHeaderCellDef> Version Code </th>

<td mat-cell *matCellDef="let element"> {{element.versionCode}} </td>

</ng-container>

<ng-container matColumnDef="versionDate">

<th mat-header-cell *matHeaderCellDef> Version Date </th>

<td mat-cell *matCellDef="let element"> {{element.versionDate}} </td>

</ng-container>

<ng-container matColumnDef="taxRate">

<th mat-header-cell *matHeaderCellDef> Tax Rate </th>

<td mat-cell *matCellDef="let element"> {{element.taxRate}} </td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumnsVersion"></tr>

<tr mat-row *matRowDef="let row; columns: displayedColumnsVersion;"></tr>

</table>

</div>

</td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: displayedColumns;"

class="example-element-row"

[class.example-expanded-row]="expandedElement === row"

(click)="expandedElement = row"

></tr>

<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

</table>

<mat-paginator [pageSizeOptions]="[7, 15, 20]" showFirstLastButtons></mat-paginator>

</div>

The display is as follows:

[Partha Majumdar]

I solved this by adding CSS file

[Amit Kumar]

Hi Sir, 

Please share the css change.

Thanks

Amit

[ssaba...@gmail.com]

Hi Partha,

I am looking to implement exactly the same thing ,can you please share your component.ts and css please.

Thanks