3

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>
Smooth
  • 956
  • 1
  • 15
  • 37
  • Solution by @Shantanu worked for me, additionally I had to add `@ViewChild('dt1') dt1: ElementRef;` in my TS file for `dt1` to be accessible outside `p-table`. Without it, it gives an error. – Amit Das Sep 22 '21 at 14:15

1 Answers1

5

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

Shantanu
  • 3,483
  • 2
  • 17
  • 20
  • another question: how would I do this if the search input needs to go inside of the parent component and not just outside the ? – Smooth Sep 18 '18 at 18:13
  • @Smooth For that make use of `@ViewChild` https://angular.io/guide/component-interaction . Check this answer https://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular – Shantanu Sep 18 '18 at 18:43
  • I was able to make use of @ViewChild to trigger the function in the child component but I'm not sure how to pass the reference to the "dt" table object that is required in order to call the filterGlobal function. I don't have access to the dt object in the parent template for passing through? Any ideas? – Smooth Sep 19 '18 at 00:16
  • can you upload how did you use @ViewChild, as i have to move the global filter to child component while p-table stays in parent component. – Arushi Bajpai Jun 09 '20 at 05:37
  • When I move the input outside the table, it doesn't recognize the id anymore, any idea why? – Lossan Jan 27 '21 at 11:18