CODEWITHSUNDEEP
angularprimengprimeng-turbotable
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to solve globalFilter is not property of p-table

When I run the application I face error as

Can't bind to 'globalFilter' since it isn't a known property of 'p-table'. 1. If 'p-table' is an Angular component and it has 'globalFilter' input, then verify that it is part of this module.

HTML:

<p-table [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)" [totalRecords]="totalcount" [lazy]="!press" [globalFilter]="dt">

TS:

import { TableModule } from 'primeng/table';

Upvotes: 3

Views: 9896

Answers (3)

jfranko
jfranko

Reputation: 115

It's pretty simple to fix this issue. Unfortunately PrimeNg doesn't have good documentation. You need to do three things:

  1. In your <input> element, add the following:

    <input type="text" pInputText placeholder="Enter Filter Text" id="filterText" (input)="tt.filterGlobal($event.target.value, 'equals')" style="width:auto"> The (input) part is the important one where "tt" is the identifier of your p-treeTable as written in point 2.

  2. <p-treeTable #tt [value]="testData" [scrollable]="true" scrollHeight="400px" scrollWidth="300px" [globalFilterFields]="['label','dataId']"> <ng-template pTemplate="caption">

  3. You need to define the [globalFilterFields] property inside p-treeTable which takes as input an array of columns on which you want to perform your search.

Upvotes: 1

Pradeep B P
Pradeep B P

Reputation: 406

If you want to add filter inside lazy p-table do something like this.

     <p-table [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true"
         [rows]="10" (onLazyLoad)="loadLazy($event)" [totalRecords]="totalcount" [lazy]="!press" 
[globalFilterFields]="tableHeaders" #tt>
                 <input type="text" pInputText placeholder="Global Filter" (input)="tt.filterGlobal($event.target.value, 'contains')" >
     </p-table>

For [globalFilterFields] property, you need to pass columns name.

Upvotes: 5

Antikhippe
Antikhippe

Reputation: 6655

Have a better look at the doc and you will see that there is no globalFilter property.

You should replace your code with something like that :

<p-table #dt [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)"
 [totalRecords]="totalcount" [lazy]="!press">
    <ng-template pTemplate="caption">
        <div style="text-align: right">
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')"
             style="width:auto">
        </div>
    </ng-template>
</p-table>

I removed [globalFilter]="dt" and added #dt. I also added a caption template with an input for the global filter you want.

Upvotes: 0

Related Questions