Primeng: DataTable - DropDown not working as filter in column

[gregkopp]

I posted this as a reply to another issue, but it made more sense for me to create a new issue.

I'm having an issue getting a dropdown to work as a filter. The drop down is there, but clicking on it does nothing. Am I missing something here or is this a bug? I've included some of the code from my component, some of the other classes (data provider, reducer, etc.) that are not relevant are not shown.

If I move the dropdown outside the datatable, the drop down works fine. but not in the table header.

Did I miss something?

<p-dataTable [value]="dataProvider.items$ | async" [(selection)]="selectedItem" selectionmode="single" [rows]="10" [paginator]="true"
    [pageLinks]="3" [rowsPerPageOptions]="[5,10,20,50]" [resizableColumns]="true" [responsive]="true" #dt>
    <header>Animal Types</header>
    <p-column styleClass="col-button" [style]="{'width':'40px'}">
        <template let-item="rowData" pTemplate="body">
            <button *ngIf="item.Name !== 'UNKNOWN'" type="button" pButton (click)="onRowSelect(item)" icon="fa-edit"></button>
        </template>
    </p-column>
    <p-column field="Name" header="Name" [filter]="true" filterPlaceholder="Search"></p-column>
    <p-column field="AnimalType" header="Type" [filter]="true" filterMatchMode="equals">
        <template pTemplate="filter" let-col>
            <p-dropdown [options]="animalTypes" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
        </template>
    </p-column>
</p-dataTable>

import { SelectItem } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';

import { AnimalTypesDataProvider } from '../../../entities/AnimalType/provider';

import { NgRedux, select } from 'ng2-redux';
import { IAppState } from '../../../../../store/appstate';

@Component({
    selector: 'AnimalTypes',
    templateUrl: './AnimalTypes.component.html'
})
export class AnimalTypesComponent
    implements OnInit {

    animalTypes: SelectItem[];

    constructor(
        protected ngRedux: NgRedux<IAppState>,
        protected dataProvider: AnimalTypesDataProvider) {
    }

    ngOnInit() {
        this.animalTypes = [];
        this.animalTypes.push({ label: 'All', value: null });
        this.animalTypes.push({ label: 'Reptile', value: 'R' });
        this.animalTypes.push({ label: 'Mammal', value: 'M' });
    }
}

[Klinton90]

It works, you have to add [style]="{'overflow':'visible'}" to p-column that holds dropdown. Same is reflected in demo.

[gregkopp]

I figured it was something I missed. Thanks.

[HililiMed]

try this : this.animalTypes.push({ label: 'All', value: all});
this.animalTypes.push({ label: 'Reptile', value: 'Reptile' });
this.animalTypes.push({ label: 'Mammal', value: 'Mammal' });

[AhmedHamedTN]

I was facing the same issue, solution was simply to add appendTo="body" as an attribute to your p-dropdown .. something like this :

<p-dropdown [options]="data" appendTo="body" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,itemCol.field,itemCol.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>