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://stackguides.com/questions/50741591/prime-ng-create-custom-filter-for-column-filed-set-outside-of-data-table-in-angu/50754243#50754243 — Nitin Wahale

Jan69 Jan69 · Accepted Answer · 2017-12-08T18:07:22

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.

PrimeNG datatable filter by column - External textbox input

4 Answers