Я новичок в библиотеке PrimeNG, я хочу настроить раскрытие столбца таблицы primeng для фильтра
i got this mock up from design team, i want to add apply button to filter the records based on the checked checkboxes and also select all checkbox..
i go through the primeng examples, i found similar examples in the primeng official website
I am referring this example, but i need to add the apply button and select all checkbox... can anyone help me on this, how can i achieve this ?
Below is the code i am referring
https://www.primefaces.org/primeng/showcase/# / table / filter
app.component. html
<p-table #dt [value]="customers" dataKey="id"
[rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-customers"
[paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption">
<div class="table-header">
List of Customers
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Representative</th>
<th>Date</th>
<th>Status</th>
<th>Activity</th>
</tr>
<tr>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" placeholder="Search by Name" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value, 'country.name', 'contains')" placeholder="Search by Country" class="p-column-filter">
</th>
<th>
<p-multiSelect [options]="representatives" placeholder="All" (onChange)="onRepresentativeChange($event)" styleClass="p-column-filter" 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.value.image}}" width="32" style="vertical-align: middle" />
<span class="p-ml-1">{{option.label}}</span>
</div>
</ng-template>
</p-multiSelect>
</th>
<th>
<p-calendar (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" styleClass="p-column-filter" placeholder="Registration Date" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
</th>
<th>
<p-dropdown [options]="statuses" (onChange)="dt.filter($event.value, 'status', 'equals')" styleClass="p-column-filter" placeholder="Select a Status" [showClear]="true">
<ng-template let-option pTemplate="item">
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-dropdown>
</th>
<th>
<input pInputText type="text" (input)="onActivityChange($event)" placeholder="Minimum" class="p-column-filter" >
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{{customer.name}}
</td>
<td>
<img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text">{{customer.country.name}}</span>
</td>
<td>
<img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="image-text">{{customer.representative.name}}</span>
</td>
<td>
{{customer.date}}
</td>
<td>
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td>
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="6">No customers found.</td>
</tr>
</ng-template>
</p-table>
app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Customer, Representative } from '../../domain/customer';
import { CustomerService } from '../../service/customerservice';
import { Table } from 'primeng/table';
@Component({
templateUrl: './tablefilterdemo.html',
styleUrls: ['./tabledemo.scss']
})
export class TableFilterDemo implements OnInit {
customers: Customer[];
representatives: Representative[];
statuses: any[];
loading: boolean = true;
@ViewChild('dt') table: Table;
constructor(private customerService: CustomerService) { }
ngOnInit() {
this.customerService.getCustomersLarge().then(customers => {
this.customers = customers;
this.loading = false;
});
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.statuses = [
{label: 'Unqualified', value: 'unqualified'},
{label: 'Qualified', value: 'qualified'},
{label: 'New', value: 'new'},
{label: 'Negotiation', value: 'negotiation'},
{label: 'Renewal', value: 'renewal'},
{label: 'Proposal', value: 'proposal'}
]
}
onActivityChange(event) {
const value = event.target.value;
if (value && value.trim().length) {
const activity = parseInt(value);
if (!isNaN(activity)) {
this.table.filter(activity, 'activity', 'gte');
}
}
}
onDateSelect(value) {
this.table.filter(this.formatDate(value), 'date', 'equals')
}
formatDate(date) {
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return date.getFullYear() + '-' + month + '-' + day;
}
onRepresentativeChange(event) {
this.table.filter(event.value, 'representative', 'in')
}
}
Любое предложение будет большим подспорьем. заранее спасибо.