From cb2ea219d4ce9ebe036507c9ad596debc0cc6b4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 21 Dec 2021 10:14:39 +0300
Subject: [PATCH] Update filter menu table & icons

---
 src/app/demo/view/iconsdemo.component.html |  2 +-
 src/app/demo/view/tabledemo.component.html | 10 +++++-----
 src/styles.scss                            |  6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/demo/view/iconsdemo.component.html b/src/app/demo/view/iconsdemo.component.html
index 637507c..a8da3dd 100644
--- a/src/app/demo/view/iconsdemo.component.html
+++ b/src/app/demo/view/iconsdemo.component.html
@@ -49,7 +49,7 @@ npm install primeicons --save
 	</div>
 
 	<div class="grid icons-list">
-		<div class="md:col-2 sm:col-12 md-2" *ngFor="let icon of filteredIcons">
+		<div class="col-12 md:col-2" *ngFor="let icon of filteredIcons">
 			<i class="pi pi-{{icon.properties.name}}"></i>
 			<div>pi-{{icon.properties.name}}</div>
 		</div>
diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index 62e2fd6..e91fc10 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -2,13 +2,13 @@
 	<div class="col-12">
 		<div class="card">
 			<h5>Filter Menu</h5>
-			<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [showCurrentPageReport]="true" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
+			<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
 				<ng-template pTemplate="caption">
-					<div class="flex">
-						<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
-						<span class="p-input-icon-left ml-auto">
+					<div class="flex justify-content-between flex-column sm:flex-row">
+						<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
+						<span class="p-input-icon-left mb-2">
 							<i class="pi pi-search"></i>
-							<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
+							<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" class="w-full"/>
 						</span>
 					</div>
 				</ng-template>
diff --git a/src/styles.scss b/src/styles.scss
index da9a06f..b92d450 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -161,9 +161,9 @@
         }
     }
 
-    .p-datatable .p-column-filter {
-        display: none;
-    }
+    // .p-datatable .p-column-filter {
+    //     display: none;
+    // }
 
     .table-header {
         font-size: 1.25rem;