prime ng row expansion data key issue - primeng

Question

I am using prime ng table with row expansion, but I think the problem is with my data key. row is not expanding when I use dataKey="id" if I use Munit.id all rows expand instead of one
html file
<p-table #dt dataKey= "id" [columns]="cols" [value]="mUnit" [paginator]="true" [rows]="5" [showCurrentPageReport]="true"
paginatorright currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[rowsPerPageOptions]="[5,10,15]" [globalFilterFields]="['mUnitName']" rowExpandMode="single" expandableRows="true"
styleClass="p-datatable-striped" #tableContextMenu>
<ng-template pTemplate="caption" class=" hidden">
<div class=" grid justify-content-between ">
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder="Search keyword" />
</span>
<span class="wrap ml-auto ">
<button mat-button class='bd ' (click)="routed()">Add</button>
<button mat-button class='bd' (click)="print()">Print</button>
</span>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<!-- <th pSortableColumn="id">ID <p-sortIcon field="id"></p-sortIcon></th>
<th pSortableColumn="Name">ID <p-sortIcon field="mUnitName"></p-sortIcon></th> -->
<th style="width: 2.25e ml"></th>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">
<tr>
<!-- (click)="showIt(rowData)" -->
<td>
<button type="button" pButton pRipple [pRowToggler]="columns"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td colspan="3">
<div class="p-3">
<div>its row</div>
<p-table [value]="mUnit" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
(click)="showIt(rowData)"
<td>
<button type="button" pButton pRipple [pRowToggler]="rowData"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
my ts. file
showData() {
this.MUnitService.getData().subscribe(
(data: any) => {
if (data) {
this.mUnit = data
this.cols = [
{ field: 'id', header: 'ID' },
{ field: 'mUnitName', header: 'Name' },
];
}
}
);
showData is called in ngOnInit()

Answer 1

you must repeat dataKey= "id" of your table
<p-table #dt dataKey= "id"
in
<ng-template pTemplate="rowexpansion" dataKey= "id"
I hope and serve you.