Wrapping a body template in primeNg table in component

Question

I have a p-table of primeNg in angular. Some rows in the table are expanded to a sub table with same body as the main table. Therefore I want to extract the template of the body to a component. but I don't see this component redered. What's wrong in my code? Thank you.

Here is the code of the table without my "body-component":

<p-table [value]="fields" [autoLayout]="true" dataKey="fieldNumber" editMode="row" styleClass="p-datatable-striped">

<ng-template pTemplate="header">
    <tr>
        <th style="width:1rem" class="text-center">...</th>
        <th style="width:8rem" class="text-center">...</th>
        <th style="width:1rem" class="text-center">...</th>
        ...
    </tr>
</ng-template>

<ng-template pTemplate="body" let-field let-expanded="expanded" let-ri="rowIndex" let-editing="editing">
    <tr [pEditableRow]="field">
            <td style="width:1rem" class="text-center">{{ field.fieldNumber }}</td>

            <td style="width:8rem" class="text-center">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input type="text" pInputText [(ngModel)]="field.scalar.name" class="form-control">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{field.scalar?.name}}
                    </ng-template>
                </p-cellEditor>
            </td>

            <td style="width:1rem" class="text-center">
               ...
            </td>
            <td style="width:7rem" class="text-center">
               ...
            </td>
    </tr>
</ng-template>

Here is the code of the table using my "body-component":

<p-table [value]="fields" [autoLayout]="true" dataKey="fieldNumber" editMode="row" styleClass="p-datatable-striped">

<ng-template pTemplate="header">
    <tr>
        <th style="width:1rem" class="text-center">...</th>
        <th style="width:8rem" class="text-center">...</th>
        <th style="width:1rem" class="text-center">...</th>
        ...
    </tr>
</ng-template>
   <app-body-component [fields]="fields"></app-body-component>
</p-table>

And here is my "body-component" html:

<ng-template pTemplate="body" let-field let-expanded="expanded" let-ri="rowIndex" let-editing="editing">
<tr [pEditableRow]="field">

...

Waiting for any idea, Thank you:)

Wrapping a body template in primeNg table in component

0 Answers0