-
+
- Name
- Country
- Company
- Representative
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -41,14 +66,39 @@
-<p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
- [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading">
+<p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
+ [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']">
<ng-template pTemplate="header">
<tr>
- <th>Name</th>
- <th>Country</th>
- <th>Company</th>
- <th>Representative</th>
+ <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+ <th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
+ <th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
+ <th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></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 type="text" field="company"></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">
+ <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
+ <span class="p-ml-1">{{option.name}}</span>
+ </div>
+ </ng-template>
+ </p-multiSelect>
+ </ng-template>
+ </p-columnFilter>
+ </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
@@ -64,18 +114,15 @@
import { Component, OnInit } from '@angular/core';
-import { Customer } from '../../domain/customer';
+import { Customer, Representative } from '../../domain/customer';
import { CustomerService } from '../../service/customerservice';
import { LazyLoadEvent } from 'primeng/api';
-import { FilterMetadata } from 'primeng/api';
@Component({
templateUrl: './tablelazydemo.html'
})
export class TableLazyDemo implements OnInit {
- datasource: Customer[];
-
customers: Customer[];
totalRecords: number;
@@ -83,15 +130,24 @@
diff --git a/src/app/showcase/components/table/tablelazydemo.ts b/src/app/showcase/components/table/tablelazydemo.ts
index 43db33b1b59..d1a2afb8940 100755
--- a/src/app/showcase/components/table/tablelazydemo.ts
+++ b/src/app/showcase/components/table/tablelazydemo.ts
@@ -1,16 +1,13 @@
import { Component, OnInit } from '@angular/core';
-import { Customer } from '../../domain/customer';
+import { Customer, Representative } from '../../domain/customer';
import { CustomerService } from '../../service/customerservice';
import { LazyLoadEvent } from 'primeng/api';
-import { FilterMetadata } from 'primeng/api';
@Component({
templateUrl: './tablelazydemo.html'
})
export class TableLazyDemo implements OnInit {
- datasource: Customer[];
-
customers: Customer[];
totalRecords: number;
@@ -18,15 +15,24 @@ export class TableLazyDemo implements OnInit {
cols: any[];
loading: boolean;
+
+ representatives: Representative[];
constructor(private customerService: CustomerService) { }
ngOnInit() {
- //datasource imitation
- this.customerService.getCustomersLarge().then(data => {
- this.datasource = data;
- this.totalRecords = data.length;
- });
+ this.representatives = [
+ {name: "Amy Elsner", image: 'amyelsner.png'},
+ {name: "Anna Fali", image: 'annafali.png'},
+ {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+ {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+ {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+ {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+ {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+ {name: "Onyama Limba", image: 'onyamalimba.png'},
+ {name: "Stephen Shaw", image: 'stephenshaw.png'},
+ {name: "Xuxue Feng", image: 'xuxuefeng.png'}
+ ];
this.loading = true;
}
@@ -34,20 +40,12 @@ export class TableLazyDemo implements OnInit {
loadCustomers(event: LazyLoadEvent) {
this.loading = true;
- //in a real application, make a remote request to load data using state metadata from event
- //event.first = First row offset
- //event.rows = Number of rows per page
- //event.sortField = Field name to sort with
- //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
- //filters: FilterMetadata object having field as key and filter value, filter matchMode as value
-
- //imitate db connection over a network
setTimeout(() => {
- if (this.datasource) {
- this.customers = this.datasource.slice(event.first, (event.first + event.rows));
+ this.customerService.getCustomers({lazyEvent: JSON.stringify(event)}).then(res => {
+ this.customers = res.customers;
+ this.totalRecords = res.totalRecords;
this.loading = false;
- }
+ })
}, 1000);
}
-
}
\ No newline at end of file
diff --git a/src/app/showcase/service/customerservice.ts b/src/app/showcase/service/customerservice.ts
index 1d18761b5c3..d9b6c3f23fe 100644
--- a/src/app/showcase/service/customerservice.ts
+++ b/src/app/showcase/service/customerservice.ts
@@ -1,5 +1,6 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
import { Customer } from '../domain/customer';
@Injectable()
@@ -35,4 +36,7 @@ export class CustomerService {
.then(data => { return data; });
}
+ getCustomers(params) {
+ return this.http.get(environment.apiUrl, {params: params}).toPromise();
+ }
}
\ No newline at end of file
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index fe1fbd6d105..11d6645eab4 100755
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
export const environment = {
- production: true
+ production: true,
+ apiUrl: 'https://www.primefaces.org/data/customers'
};
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 6de40bf29c8..89834242a16 100755
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
+ production: false,
+ apiUrl: 'https://www.primefaces.org/data/customers'
};
/*
+ 
+ {{option.name}}
+
+
+ {{option.name}}
+