How can I resolve this problem with PrimeNG's p-table pTemplate="rowexpansion"? The table rows don’t expand

I have a problem. pTemplate="rowexpansion" for p-table doesn't work, because maybe my approach is different from the PrimeNG documentation.

For expanding, I want to use p-button's (click) and a specific function inside to retrieve data. I have [pRowToggler]="entry" on a button, but it doesn't work. What is the possible approach?

File component.html

<div style="height: calc(100vh - 230px)"> <p-table #dt [columns]="columns" dataKey="someKey" [value]="smthliste" [expandedRowKeys]="expandedRowKeys" [(selection)]="selectedsmthliste" selectionMode="multiple" [totalRecords]="totalElements" [rowsPerPageOptions]="[10, 50, 100]" [lazy]="true" (onLazyLoad)="filtersmthliste($event)" [scrollable]="true" scrollHeight="flex" [paginator]="true" [(rows)]="numberOfRows" [showCurrentPageReport]="true" styleClass="p-datatable-gridlines, p-datatable-striped, p-datatable-sm" > <ng-template pTemplate="header" let-columns> ... </ng-template> <ng-template pTemplate="body" let-entry let-columns="columns" let-ri="rowIndex" > <tr [attr.data-test]="'smthliste-' + ri"> <td class="sticky-checkbox" [attr.data-test]="'smthliste-' + ri + '-column-checkbox'" > <p-tableCheckbox [name]="'checkbox' + ri" [value]="entry" ></p-tableCheckbox> </td> <td class="sub-super-elements-td sticky-checkbox"> <div class="sub-super-elements"> @if (!rowExpansionExpanded.includes(entry.someKey)) { <p-button class="sub-super-elements__button-super" [pRowToggler]="smthliste" (click)="onClickExpansion('super', entry)" data-test="button-super" [icon]="'pi pi-directions'" [plain]="true" pRipple [rounded]="true" size="large" [text]="true" type="button" ></p-button> } @if (!rowExpansionExpanded.includes(entry.someKey)) { <p-button class="sub-super-elements__button-sub" (click)="onClickExpansion('sub', entry)" data-test="button-sub" [icon]="'pi pi-directions'" [plain]="true" pRipple [pRowToggler]="entry" [rounded]="true" size="large" [text]="true" type="button" ></p-button> } @if (rowExpansionExpanded.includes(entry.someKey)) { <p-button class="sub-super-elements__button-close" (click)="onClickExpansion('close', entry)" data-test="button-close" [icon]="'pi pi-chevron-up'" [plain]="true" pRipple [pRowToggler]="entry" [rounded]="true" size="large" [text]="true" type="button" ></p-button> } </div> </td> </tr> ... <ng-template pTemplate="rowexpansion" let-entry> <tr> <td colspan="999"> <div class="p-3"> <div>DEBUG: {{ entry.someKey }} | expansion length: {{ entry.expansion?.length }}</div> <app-smthliste-row-expansion [...]="..." [columns]="columns" [...]=" ... " [...]="..." [onClickExpansion]="onClickExpansion" [(pTableSelection)]="selectedsmthliste" [rowExpansionExpanded]="rowExpansionExpanded" [selectedUserGroup]="sessionService...." [smthlisten]="entry.expansion" [...]="..." [...]="..." > </app-smthliste-row-expansion> </div> </td> </tr> </ng-template> </p-table>

File component.ts

... onClickExpansion(type: 'super' | 'sub' | 'close', smthliste: Smthliste) { this.table.toggleRow(smthliste); console.log('1. onClick called', type, smthliste.someKey); if (type === 'close') { const indexOf = this.rowExpansionExpanded.indexOf(someliste.someKey); if (indexOf >= 0) { this.rowExpansionExpanded.splice(indexOf, 1); } delete this.expandedRowKeys[smthliste.someKey]; return; } if (this.rowExpansionExpanded.includes(smthliste.smthKey)) { console.log('2. Already expanded, returning'); return; } console.log('3. Calling API for', type); const superSubSmthlistenObservable = type === 'super' ? this.smthlisteService.getSuperSmthlisten(smthliste) : this.smthlisteService.getSubSmthlisten(smthliste); superSubSmthlistenObservable.subscribe({ next: (superSubSmthlisten) => { console.log('4. API returned', superSubSmthlisten); if (!superSubSmthlisten || superSubSmthlisten.length === 0) { this.messageService.add({ severity: 'info', summary: 'No data', detail: `No ${type} elements found for ${smthliste.someKey}`, }); return; // Do not expand empty row } smthliste.expansion = superSubSmthlisten; this.rowExpansionExpanded.push(smthliste.someKey); this.expandedRowKeys[smthliste.someKey] = true; this.cdr.detectChanges(); }, error: (err) => { console.error('API ERROR:', err); }, }); } ... this.dt.toggleRow(entry); // It doesn't work

Delete (click) doesn’t work.

Only this works, but it’s not what I want:

<!-- ...existing code... --> <ng-template pTemplate="body"> <tr > @if (rowExpansionExpanded.includes(entry.someKey)) { <tr> <td colspan="999"> <div class="p-3"> <div>DEBUG: </div> <app-smthliste-row-expansion > </app-smthliste-row-expansion> </div> </td> </tr> } </ng-template>