Filter
Filter Menu
<p-table #dt1 [value]="customersfilterMenu" dataKey="id" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" styleClass="p-datatable-gridlines" [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [globalFilterFields]="["name","country.name","representative.name","status"]">
<ng-template pTemplate="caption">
<div class="p-d-flex">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left p-ml-auto">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, "contains")" placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Name
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Country
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Agent
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="p-px-3 p-pt-3 p-pb-0">
<span class="p-text-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<span class="p-ml-1">{ { option.name } }</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Date
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Balance
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Status
<p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
<ng-template let-option pTemplate="item">
<span [class]=""customer-badge status-" + option.value">{ { option.label } }</span>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</div>
</th>
<th>
<div class="p-d-flex p-jc-between p-ai-center">
Activity
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="p-m-3"></p-slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
<span>{ { activityValues[0] } }</span>
<span>{ { activityValues[1] } }</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="width: 8rem">
<div class="p-d-flex p-jc-between p-ai-center">
Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{ { customer.name } }
</td>
<td>
<span class="image-text">{ { customer.country.name } }</span>
</td>
<td>
<span class="image-text">{ { customer.representative.name } }</span>
</td>
<td>
{ { customer.date | date: "MM/dd/yyyy" } }
</td>
<td>
{ { customer.balance | currency:"USD":"symbol" } }
</td>
<td>
<span [class]=""customer-badge status-" + customer.status">{ { customer.status } }</span>
</td>
<td>
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td class="p-text-center">
<i class="pi" [ngClass]="{"true-icon pi-check-circle": customer.verified, "false-icon pi-times-circle": !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
</p-table>Filter Row
<p-table #dt2 [value]="customersfilterRow" dataKey="id" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [globalFilterFields]="["name","country.name","representative.name","status"]">
<ng-template pTemplate="caption">
<div class="p-d-flex">
<span class="p-input-icon-left p-ml-auto">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, "contains")" placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Agent</th>
<th>Status</th>
<th style="width: 6rem">Verified</th>
</tr>
<tr>
<th>
<p-columnFilter type="text" field="name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="country.name"></p-columnFilter>
</th>
<th>
<p-columnFilter field="representative" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<span class="p-ml-1">{ { option.name } }</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th>
<p-columnFilter field="status" matchMode="equals" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true">
<ng-template let-option pTemplate="item">
<span [class]=""customer-badge status-" + option.value">{ { option.label } }</span>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</th>
<th>
<p-columnFilter type="boolean" field="verified"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{ { customer.name } }
</td>
<td>
<span class="image-text">{ { customer.country.name } }</span>
</td>
<td>
<span class="image-text">{ { customer.representative.name } }</span>
</td>
<td>
<span [class]=""customer-badge status-" + customer.status">{ { customer.status } }</span>
</td>
<td>
<i class="pi" [ngClass]="{"true-icon pi-check-circle": customer.verified, "false-icon pi-times-circle": !customer.verified}"></i>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="5">No customers found.</td>
</tr>
</ng-template>
</p-table>