CODEWITHSUNDEEP
angularprimeng
Smooth
Smooth

Reputation: 956

Angular 6 how do I move a PrimeNG global filter outside of the <p-table>?

UI mocks from the designer require me to move the global search filter outside of the p-table but I'm not sure how to do this or if it's even possible? Does anyone have experience doing something similar? Can I do this strictly using CSS styling while maintaining a responsive layout for different screen sizes?

<p-table #dt [value]="tags" [paginator]="true" [rows]="25" [columns]="cols" [resizableColumns]="true" [globalFilterFields]="['vendor']">
  <ng-template pTemplate="caption">
    <div style="text-align: right; overflow-x: hidden;">
      <p class="wrapper"><input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></p>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th class="{{col.class}}" *ngFor="let col of columns" [pSortableColumn]="col.field">
        <p-sortIcon [field]="col.field" *ngIf="col.field == 'fieldThree' || col.field == 'fieldOne' || col.field == 'fieldTwo' "></p-sortIcon>
        {{col.header}}
        <fa *ngIf="col.field == 'fieldThree' || col.field == 'fieldTwo'" name="info-circle" pTooltip="{{col.tooltip}}" tooltipPosition="right" showDelay="1000" hideDelay="500"></fa>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="cols">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of cols" [ngClass]="{'toggle-tag': col.field==''}">
        <div *ngIf="col.field == 'fieldThree'; then vendorRow"></div>
        <div *ngIf="col.field == 'fieldTwo' || col.field == 'domain' || col.field == 'fieldThree'; then default"></div>
        <ng-template #vendorRow><a (click)="showVendorDetails(rowData)">{{rowData[col.field]}}</a></ng-template>
        <ng-template #default>{{rowData[col.field]}}</ng-template>
      </td>
    </tr>
  </ng-template>
</p-table>

Upvotes: 3

Views: 3892

Answers (1)

Shantanu
Shantanu

Reputation: 3513

Yes it's possible. Just remove ng-template pTemplate="caption" block inside p-table and have exactly same input field (like below) outside of p-table

<input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" 
 (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">

This work exactly how it works inside of p-table. You can then have whatever CSS on it (to make it responsive & all). Keep remaining p-table code as it is.

Follow Official docs

Upvotes: 5

Related Questions