Dropdown inside primeng table

Question

I am using a drop down list inside primeng turbo table. I have an array that consists of two arrays that form the options for the drop down menu. I want the first option to come in the first row and the second options to come in the second row of the table.I tried using ngFor but I am getting two drop downs in all the rows of the table with both set of options.

Here is my ts code:

arr1.push({label: "id", value: "1"});
arr2.push({label: "id", value: "2"});
masterArr.push(arr1);
masterArr.push(arr2);

Here is my template:

<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">

            <td>{{rowData.name}}</td>
            <td>{{rowData.rollNo}}</td>

            <td>
                <p-dropdown *ngFor="let s of masterArr,let i = index" [options]="masterArr[i]" ></p-dropdown>
            </td>

        </tr>
    </ng-template>

StackBlitz: https://stackblitz.com/edit/p-table-primeng-v6-tq33vs

@MaihanNijat I've added stackblitz.As you can see I'm getting two dropdown whereas I want one drop down for each row — rock11, May 08 '19 at 14:04
Do you want color drop down under color column and brand drop down under brand column for each row? or post screenshot how you want to display it. — Maihan Nijat, May 08 '19 at 14:55
I want to iterate the master Arr and construct one drop down from each child array.So if I have 2 arrays in the masterArray,I want that the first dropdown goes to the first row of the table and the second goes to the second row. — rock11, May 09 '19 at 04:52
@rock11 if possible pls add a screenshot or create table and show what you are trying to achieve with hardcoded data in your stackblitz ... so that we can easily understand your requirement ? — DirtyMind, May 09 '19 at 05:38
Long time...but was this solved? I have exact same requirement. — guravman, May 20 '20 at 11:29

score 4 · Answer 1 · edited Jul 10 '21 at 02:03

You can add appendTo="body" property to p-dropdown. It will fix the issue if you have your dropdown inside the p-table body, without changing any CSS.

AppendTo target element to attach the overlay in primeNG p-dropdown

<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    ...
    <tr>
        <td>
            <p-dropdown *ngFor="let s of masterArr,let i = index" [options]="masterArr[i]" appendTo="body"></p-dropdown>
        </td>
    </tr>
</ng-template>

Dropdown inside primeng table

1 Answers1