CODEWITHSUNDEEP
angularprimeng
Arun
Arun

Reputation: 3841

PrimeNG datatable filter by column - External textbox input

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?

Upvotes: 2

Views: 19204

Answers (4)

Jan69
Jan69

Reputation: 1139

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.

Upvotes: 5

Harikrishnan
Harikrishnan

Reputation: 3822

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.

Upvotes: 2

Arun
Arun

Reputation: 3841

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.

Upvotes: 1

BillF
BillF

Reputation: 864

Exactly like the example on the showcase.

DataTable Filtering - Global Filter

Upvotes: -4

Related Questions