Using p-dropdown as a filter in p-dataTable
Posted: 20 Aug 2017, 19:42
I'm trying to use a dropdown as a filter in a dataTable. The problem is that when a dropdown is clicked, the list of items is not rendered (actually, it seems to be rendered below the rows).
This is the data table in question:
And this is the result:
This is the data table in question:
Code: Select all
<p-dataTable [value]="documents" [style]="{'margin-bottom':'20px'}" selectionMode="single"
[rows]="20" [paginator]="true" [pageLinks]="5" [rowsPerPageOptions]="[20,50,100]"
resizableColumns="true"
[loading]="loading" loadingIcon="fa-spinner"
[lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadDocumentsPage($event)"
sortField="sentDate" [sortOrder]="-1">
<p-column field="from.name" header="From" sortable="true"></p-column>
<p-column field="to.name" header="To" sortable="true"></p-column>
<p-column field="documentType" header="Type" sortable="true"></p-column>
<p-column field="documentNumber" header="Number" sortable="true"></p-column>
<p-column field="documentDate" header="Date" sortable="true"></p-column>
<p-column field="status" header="Status" [filter]="true" filterMatchMode="equals">
<ng-template pTemplate="filter">
<p-dropdown [options]="possibleStatuses" [style]="{'width':'100%'}" styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
</p-dataTable>
