Filtre datatable PrimeNG par colonne - Entrée de zone de texte externe

Question

PrimeNg utilise des données datables [filter]="true". Cela créera une zone de texte d'entrée utilisée en interne pour filtrer les données. Comment puis-je placer ce textbox en dehors du datatable et obtenir le filtre fait pour une colonne particulière?

Answer 1

Après avoir cherché toute la documentation de primeng Je trouve que primeng ne prend pas en charge cette fonctionnalité. Nous devrons filtrer les données par nous-mêmes et mettre à jour le modèle datable [value].

Answer 2

Exactement comme l'exemple sur la vitrine.

DataTable Filtering - Global Filter

Answer 3

Ci-dessous le code avec liste déroulante externe pour filtrer la primitive 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.