Table: Having any rowexpansion template breaks loadingbody

[Xymanek]

Describe the bug

Adding a rowexpansion template makes the table component completely ignore the presence of a loadingbody template.

I believe the problem stems from

primeng/src/app/components/table/table.ts

Lines 3079 to 3144 in 512f03d

	@Component({
	selector: '[pTableBody]',
	template: `
	<ng-container *ngIf="!dt.expandedRowTemplate">
	<ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
	<ng-container *ngIf="dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, rowIndex)" role="row">
	<ng-container
	*ngTemplateOutlet="dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
	></ng-container>
	</ng-container>
	<ng-container *ngIf="dt.rowGroupMode !== 'rowspan'">
	<ng-container
	*ngTemplateOutlet="rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
	></ng-container>
	</ng-container>
	<ng-container *ngIf="dt.rowGroupMode === 'rowspan'">
	<ng-container
	*ngTemplateOutlet="
	rowData ? template : dt.loadingBodyTemplate;
	context: {
	$implicit: rowData,
	rowIndex: getRowIndex(rowIndex),
	columns: columns,
	editing: dt.editMode === 'row' && dt.isRowEditing(rowData),
	frozen: frozen,
	rowgroup: shouldRenderRowspan(value, rowData, rowIndex),
	rowspan: calculateRowGroupSize(value, rowData, rowIndex)
	}
	"
	></ng-container>
	</ng-container>
	<ng-container *ngIf="dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)" role="row">
	<ng-container
	*ngTemplateOutlet="dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
	></ng-container>
	</ng-container>
	</ng-template>
	</ng-container>
	<ng-container *ngIf="dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)">
	<ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="value" [ngForTrackBy]="dt.rowTrackBy">
	<ng-container *ngIf="!dt.groupHeaderTemplate">
	<ng-container
	*ngTemplateOutlet="template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }"
	></ng-container>
	</ng-container>
	<ng-container *ngIf="dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))" role="row">
	<ng-container
	*ngTemplateOutlet="
	dt.groupHeaderTemplate;
	context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
	"
	></ng-container>
	</ng-container>
	<ng-container *ngIf="dt.isRowExpanded(rowData)">
	<ng-container *ngTemplateOutlet="dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }"></ng-container>
	<ng-container *ngIf="dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))" role="row">
	<ng-container
	*ngTemplateOutlet="
	dt.groupFooterTemplate;
	context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }
	"
	></ng-container>
	</ng-container>
	</ng-container>
	</ng-template>
	</ng-container>

The loadingBodyTemplate property is not referenced at all in the *ngIf="dt.expandedRowTemplate branch.

Environment

Reproducible in StackBlitz (forked from virtual scroll / lazy loading example in docs)

Reproducer

https://stackblitz.com/edit/scxuay?file=src%2Fapp%2Ftable-virtual-scroll-lazy-demo.html

Angular version

18.1.4

PrimeNG version

17.18.7

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.20.3

Browser(s)

FF 129.0

Steps to reproduce the behavior

No response

Expected behavior

The loadingbody template is automatically used even if row expansion is configured (there is nothing to expand anyway while the row is loading)

[Xymanek]

Current workaround if anyone is facing the same issue:

<p-table>

<ng-template pTemplate="body" let-rowData>
    @if (rowData === undefined) {
      <ng-container [ngTemplateOutlet]="loadingRow" />
    } @else {
      <!-- Normal row display -->
    } 
<ng-template/>

<ng-template pTemplate="body" let-rowData>
     <!-- Fallback for whenever this bug is fixed -->
    <ng-container [ngTemplateOutlet]="loadingRow" />
<ng-template/>

<ng-template #loadingRow>
  <!-- Loading placehoders -->
<ng-template/>

</p-table>

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨