title: PrimeNG table column filter customize - add button and select all checkbox
body: <p>i am new to PrimeNG library, i want to customize the primeng table column drowndown for filter</p>
  <p><a href="https://i.stack.imgur.com/4owy2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4owy2.png" alt="enter image description here" /></a></p>
  <p>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</p>
  <p><a href="https://i.stack.imgur.com/Dpvz6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dpvz6.png" alt="enter image description here" /></a></p>
  <p>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</p>
  <p><a href="https://stackblitz.com/edit/primeng-tablefilter-demo" rel="nofollow noreferrer">https://www.primefaces.org/primeng/showcase/#/table/filter</a></p>
  <p>app.component.html</p>
  <pre><code>&lt;p-table #dt [value]=&quot;customers&quot; dataKey=&quot;id&quot;
          [rows]=&quot;10&quot; [showCurrentPageReport]=&quot;true&quot; [rowsPerPageOptions]=&quot;[10,25,50]&quot; [loading]=&quot;loading&quot; styleClass=&quot;p-datatable-customers&quot;
          [paginator]=&quot;true&quot; currentPageReportTemplate=&quot;Showing {first} to {last} of {totalRecords} entries&quot;
          [filterDelay]=&quot;0&quot; [globalFilterFields]=&quot;['name','country.name','representative.name','status']&quot;&gt;
          &lt;ng-template pTemplate=&quot;caption&quot;&gt;
              &lt;div class=&quot;table-header&quot;&gt;
                  List of Customers
                  &lt;span class=&quot;p-input-icon-left&quot;&gt;
                      &lt;i class=&quot;pi pi-search&quot;&gt;&lt;/i&gt;
                      &lt;input pInputText type=&quot;text&quot; (input)=&quot;dt.filterGlobal($event.target.value, 'contains')&quot; placeholder=&quot;Global Search&quot; /&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate=&quot;header&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Representative&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
                  &lt;th&gt;Activity&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      &lt;input pInputText type=&quot;text&quot; (input)=&quot;dt.filter($event.target.value, 'name', 'startsWith')&quot; placeholder=&quot;Search by Name&quot; class=&quot;p-column-filter&quot;&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;input pInputText type=&quot;text&quot; (input)=&quot;dt.filter($event.target.value, 'country.name', 'contains')&quot; placeholder=&quot;Search by Country&quot; class=&quot;p-column-filter&quot;&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;p-multiSelect [options]=&quot;representatives&quot; placeholder=&quot;All&quot; (onChange)=&quot;onRepresentativeChange($event)&quot; styleClass=&quot;p-column-filter&quot; optionLabel=&quot;name&quot;&gt;
                          &lt;ng-template let-option pTemplate=&quot;item&quot;&gt;
                              &lt;div class=&quot;p-multiselect-representative-option&quot;&gt;
                                  &lt;img [alt]=&quot;option.label&quot; src=&quot;assets/showcase/images/demo/avatar/{{option.value.image}}&quot; width=&quot;32&quot; style=&quot;vertical-align: middle&quot; /&gt;
                                  &lt;span class=&quot;p-ml-1&quot;&gt;{{option.label}}&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/ng-template&gt;
                      &lt;/p-multiSelect&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;p-calendar (onSelect)=&quot;onDateSelect($event)&quot; (onClearClick)=&quot;dt.filter('', 'date', 'equals')&quot; [showButtonBar]=&quot;true&quot; styleClass=&quot;p-column-filter&quot; placeholder=&quot;Registration Date&quot; [readonlyInput]=&quot;true&quot; dateFormat=&quot;yy-mm-dd&quot;&gt;&lt;/p-calendar&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;p-dropdown [options]=&quot;statuses&quot; (onChange)=&quot;dt.filter($event.value, 'status', 'equals')&quot; styleClass=&quot;p-column-filter&quot; placeholder=&quot;Select a Status&quot; [showClear]=&quot;true&quot;&gt;
                          &lt;ng-template let-option pTemplate=&quot;item&quot;&gt;
                              &lt;span [class]=&quot;'customer-badge status-' + option.value&quot;&gt;{{option.label}}&lt;/span&gt;
                          &lt;/ng-template&gt;
                      &lt;/p-dropdown&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;input pInputText type=&quot;text&quot; (input)=&quot;onActivityChange($event)&quot; placeholder=&quot;Minimum&quot; class=&quot;p-column-filter&quot; &gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate=&quot;body&quot; let-customer&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      {{customer.name}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;img src=&quot;assets/showcase/images/demo/flag/flag_placeholder.png&quot; [class]=&quot;'flag flag-' + customer.country.code&quot; width=&quot;30&quot;&gt;
                      &lt;span class=&quot;image-text&quot;&gt;{{customer.country.name}}&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;img [alt]=&quot;customer.representative.name&quot; src=&quot;assets/showcase/images/demo/avatar/{{customer.representative.image}}&quot; width=&quot;32&quot; style=&quot;vertical-align: middle&quot; /&gt;
                      &lt;span class=&quot;image-text&quot;&gt;{{customer.representative.name}}&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{customer.date}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span [class]=&quot;'customer-badge status-' + customer.status&quot;&gt;{{customer.status}}&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p-progressBar [value]=&quot;customer.activity&quot; [showValue]=&quot;false&quot;&gt;&lt;/p-progressBar&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate=&quot;emptymessage&quot;&gt;
              &lt;tr&gt;
                  &lt;td colspan=&quot;6&quot;&gt;No customers found.&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
      &lt;/p-table&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>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 =&gt; {
              this.customers = customers;
              this.loading = false;
          });
  
          this.representatives = [
              {name: &quot;Amy Elsner&quot;, image: 'amyelsner.png'},
              {name: &quot;Anna Fali&quot;, image: 'annafali.png'},
              {name: &quot;Asiya Javayant&quot;, image: 'asiyajavayant.png'},
              {name: &quot;Bernardo Dominic&quot;, image: 'bernardodominic.png'},
              {name: &quot;Elwin Sharvill&quot;, image: 'elwinsharvill.png'},
              {name: &quot;Ioni Bowcher&quot;, image: 'ionibowcher.png'},
              {name: &quot;Ivan Magalhaes&quot;,image: 'ivanmagalhaes.png'},
              {name: &quot;Onyama Limba&quot;, image: 'onyamalimba.png'},
              {name: &quot;Stephen Shaw&quot;, image: 'stephenshaw.png'},
              {name: &quot;XuXue Feng&quot;, 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 &amp;&amp; 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 &lt; 10) {
              month = '0' + month;
          }
  
          if (day &lt; 10) {
              day = '0' + day;
          }
  
          return date.getFullYear() + '-' + month + '-' + day;
      }
  
      onRepresentativeChange(event) {
          this.table.filter(event.value, 'representative', 'in')
      }
      
  }
  </code></pre>
  <p>Any suggetion would be great help. thanks in advance.</p>