CODEWITHSUNDEEP
htmlcssangularangular2-templateprimeng
josh_boaz
josh_boaz

Reputation: 2023

angular 2 - primeng have a separate row for filter instead of inside header

Currenty when I add a filter it adds input field or dropdown inside the header, instead i want to have a separate row for filter described below, is there template i can modify to achieve this?

header    |  header  | header
------------------------------
[filter] | [filter]  | [filter]
------------------------------
row 1     | row 1    | row 1
row 2     | row 2    | row 2
row 3     | row 3    | row 3

<p-dataTable [value]="perfData" >
            <p-column field="field1" [sortable]="true" [filter]="true" header="header1"></p-column>
            <p-column field="field2" [sortable]="true" [filter]="true" header="header2"></p-column>
            <p-column field="field3" [sortable]="true" [filter]="true" header="header3"></p-column>
 </p-dataTable>

Upvotes: 1

Views: 967

Answers (1)

Aravind
Aravind

Reputation: 41581

You can use ng-template to customize your filter elements as below,

<ng-template pTemplate="filter" let-col> 
    <br/>
     <input type="text" [(ngModel)]="textval" (keydown)="dt.filter(textval,col.field,col.filterMatchMode)" />
     </ng-template>

LIVE DEMO

Upvotes: 1

Related Questions