PrimeNG datatable filter by column - External textbox input

Question

PrimeNg datatable uses built in [filter]="true". This will create a input text box internally that is used to filter data. How can I place this textbox outside the datatable and get the filter done for a particular column?

You should try this way also .. [https://stackoverflow.com/questions/50741591/prime-ng-create-custom-filter-for-column-filed-set-outside-of-data-table-in-angu/50754243#50754243](https://stackoverflow.com/questions/50741591/prime-ng-create-custom-filter-for-column-filed-set-outside-of-data-table-in-angu/50754243#50754243) — Nitin Wahale, Jun 08 '18 at 06:06

score 5 · Answer 1 · edited Mar 10 '20 at 12:05

Below is the code with external dropdown to filter the primeng datatable.

html page:

<!-- Top of the page -->
<div>
<p-dropdown [options]="orgs" [(ngModel)]="selectedOrg"  (onChange)="updateOrgFilter(dt);getFilteredOutput($event,dt)" styleClass="ui-column-filter"></p-dropdown>
</div>

<!-- Pie Chart -->

<!-- Bar Chart -->

<!-- Datatable -->

<p-dataTable #dt [value]="itemslist"  [rows]="30" [paginator]="true" [rowsPerPageOptions]="[30,50,75]" sortMode="multiple" scrollable="true"   resizableColumns="true" scrollHeight="350px">
    <p-header>
        <div class="ui-helper-clearfix">
            List of Items
        </div>
    </p-header>

    <p-column [style]="{'width':'100px'}"field="wipJobNum" header ="Title" [sortable]="true" [filter]="true" ></p-column>
    <p-column [style]="{'width':'150px'}"field="partNum" header ="Part Number" [sortable]="true" [filter]="true" ></p-column>
    <p-column [style]="{'width':'90px'}" field="org" header ="Org" [sortable]="true" [filter]="true"  filterMatchMode="equals">
        <ng-template pTemplate="filter" let-col>
            <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg" appendTo="body" [style]="{'width':'100%'}"  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode);getFilteredOutput(event,dt)"  styleClass="ui-column-filter"></p-dropdown>
        </ng-template>
    </p-column>
</p-dataTable>

component.ts:

updateOrgFilter(dt) {
    dt.filter(this.selectedOrg, 'org', 'equals');
}

In this example if you change value of org drop down inside the datatable , then the external dropdown will change and my charts will be updated. if you change the external drop down value then primeng datatable filter will be updated and displays the filtered output + charts will be updated.

Can you please add a live demo like on stackblitz. – rogue lad May 02 '19 at 00:51 — rogue lad, May 02 '19 at 00:51

score 2 · Answer 2 · answered Sep 19 '18 at 05:45

Please have a look at https://www.primefaces.org/primeng/#/table/filter

If you replace dt.filterGlobal($event.target.value, 'contains') with dt.filter($event.target.value, 'your field name','contains'), the datatable will filter with the field.

If you have an external search field, call the same function from the event handler.

score 1 · Accepted Answer · answered Sep 03 '17 at 04:19

1

After searching entire primeng documentation I found that primeng currently do not support this feature. We will have to filer the data by ourselves and update prime ng datatable [value] model.

answered Sep 03 '17 at 04:19

Arun

3,701
5
32
43

score -4 · Answer 4 · answered Aug 31 '17 at 12:23

-4

Exactly like the example on the showcase.

DataTable Filtering - Global Filter

answered Aug 31 '17 at 12:23

BillF

804
10
20

I need a column filter outside data table. – Arun Aug 31 '17 at 12:25
1

click the link takes you to a blank page – bilpor Mar 04 '20 at 11:48

PrimeNG datatable filter by column - External textbox input

4 Answers4