#159 implement table columns individual filtering (#161)

* add filter-funnel icon

* close menu on escape key

* table sortable input

* cps menu optional event

* fix colSortable directive

* general filter component

* matchmodes

* fix datepicker valueChanged emitter

* tableColumnFilterConstraint component

* style column filter

* clean code

* fix filter icon paddings

* cpsColFilter directive

* fix sortMode

* filter apply button logic fix

* show sort icon on hover

* remove unnecessary tests

projects/composition/src/app/pages/datepicker-page/datepicker-page.component.html

@@ -2,11 +2,13 @@
   <div class="datepickers-group">
     <cps-datepicker
       label="Required datepicker with a tooltip"
+      [clearable]="true"
       infoTooltip="Provide any information here"
       formControlName="requiredDatepicker">
     </cps-datepicker>
     <cps-datepicker
       label="Disabled datepicker"
+      [clearable]="true"
       [disabled]="true"
       hint="This datepicker is disabled"
       [value]="today">
@@ -15,22 +17,26 @@
       label="Datepicker with a dropdown on input focus"
       hint="This datepicker shows a calendar when input field is focused"
       [value]="today"
+      [clearable]="true"
       [openOnInputFocus]="true">
     </cps-datepicker>
     <cps-datepicker
       label="Datepicker with restricted date range"
       hint="This datepicker has selectable dates from 01/01/2023 to 12/31/2025"
       [showTodayButton]="false"
       [value]="defaultDate"
+      [clearable]="true"
       [minDate]="minDate"
       [maxDate]="maxDate">
     </cps-datepicker>
     <cps-datepicker
       label="Datepicker without Today button"
+      [clearable]="true"
       [showTodayButton]="false">
     </cps-datepicker>
     <div class="sync-val-example">
       <cps-datepicker
+        [clearable]="true"
         label="Datepicker with two-way binding, select a date"
         [(ngModel)]="syncVal"
         width="350"

projects/composition/src/app/pages/table-page/table-page.component.html

@@ -1,31 +1,39 @@
 <cps-table
   [showGlobalFilter]="true"
   [data]="data"
+  [columns]="cols"
   dataKey="a"
   [showActionBtn]="true"
   [reorderableRows]="true"
   [selectable]="true"
   [paginator]="true"
+  sortMode="multiple"
   [showRowMenu]="true"
   (editRowBtnClicked)="onEditRowButtonClicked($event)"
   (actionBtnClicked)="onActionBtnClicked()"
   toolbarTitle="This is an alpha version of table component">
   <ng-template #header>
-    <th cpsColSortable="a">A</th>
-    <th>B</th>
-    <th cpsColSortable="c">C</th>
+    <th cpsColSortable="a" cpsColFilter="a" filterType="text">A</th>
+    <th cpsColSortable="b" cpsColFilter="b" filterType="date">B</th>
+    <th cpsColSortable="c" cpsColFilter="c" filterType="number">C</th>
+    <th cpsColSortable="d" cpsColFilter="d" filterType="boolean">D</th>
+    <th cpsColSortable="e" cpsColFilter="e" filterType="category">E</th>
   </ng-template>
 
   <ng-template let-item #body>
-    <td>{{ item.a }}</td>
-    <td>{{ item.b | uppercase }}</td>
+    <td>{{ item.a | uppercase }}</td>
+    <td>{{ item.b | date : 'MM/dd/yyyy' }}</td>
     <td>{{ item.c | percent }}</td>
+    <td [style.color]="item.d ? 'green' : 'red'">
+      {{ item.d ? '&#10004;' : '&#10008;' }}
+    </td>
+    <td>{{ item.e }}</td>
   </ng-template>
 
   <ng-template let-item #rowexpansion>
     <div class="expanded-row-contents">
-      <div>id: {{ item.d.id }}</div>
-      <div>desc: {{ item.d.desc }}</div>
+      <div>id: {{ item.f.id }}</div>
+      <div>desc: {{ item.f.desc }}</div>
     </div>
   </ng-template>
 </cps-table>