From 66f735959f6ff00e84fb68c95e277152fd27a2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 22 Dec 2021 20:03:56 +0300
Subject: [PATCH] remove unnecessary css from table

---
 src/app/demo/view/buttondemo.component.html |  14 +-
 src/app/demo/view/tabledemo.component.html  |   6 +-
 src/app/demo/view/tabledemo.component.ts    |   4 +
 src/styles.scss                             | 182 ++++++++++----------
 4 files changed, 111 insertions(+), 95 deletions(-)

diff --git a/src/app/demo/view/buttondemo.component.html b/src/app/demo/view/buttondemo.component.html
index 67e2a9d..f90232c 100644
--- a/src/app/demo/view/buttondemo.component.html
+++ b/src/app/demo/view/buttondemo.component.html
@@ -58,7 +58,19 @@
 			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
 			<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
 		</div>
-
+		<div class="card">
+			<h5>Templating</h5>
+			<p-button styleClass="mr-2 mb-2 px-3">
+				<ng-template pTemplate="content">
+					<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
+				</ng-template>
+			</p-button>
+			
+			<p-button styleClass="p-button-outlined mr-2 mb-2">
+				<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
+				<span class="ml-2 p-text-bold">PrimeNG</span>
+			</p-button>
+		</div>
 	</div>
 	<div class="col-12 md:col-6">
 		<div class="card">
diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index f84971e..c6cd8d9 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -1,8 +1,8 @@
-<div class="grid table-demo">
+<div class="grid">
 	<div class="col-12">
 		<div class="card">
 			<h5>Filter Menu</h5>
-			<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">
+			<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
 				<ng-template pTemplate="caption">
 					<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>
@@ -118,7 +118,7 @@
 						<td style="min-width: 12rem;">
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 12rem;">
+						<td style="min-width: 12rem; ">
 							<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
 						</td>
 						<td class="text-center" style="min-width: 8rem;">
diff --git a/src/app/demo/view/tabledemo.component.ts b/src/app/demo/view/tabledemo.component.ts
index c47834c..33a5491 100644
--- a/src/app/demo/view/tabledemo.component.ts
+++ b/src/app/demo/view/tabledemo.component.ts
@@ -18,6 +18,10 @@ import { MessageService, ConfirmationService } from 'primeng/api'
         :host ::ng-deep .p-datatable-frozen-tbody {
             font-weight: bold;
         }
+
+        :host ::ng-deep .p-progressbar {
+            height:.5rem;
+        }
     `]
 })
 export class TableDemoComponent implements OnInit {
diff --git a/src/styles.scss b/src/styles.scss
index 43090fe..9bfe8a7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -101,116 +101,116 @@
     }
 }
 
-.table-demo {
-    .p-progressbar {
-        height: .5rem;
-        background-color: #D8DADC;
+// .table-demo {
+//     .p-progressbar {
+//         height: .5rem;
+//         background-color: #D8DADC;
 
-        .p-progressbar-value {
-            background-color: #607D8B;
-        }
-    }
+//         .p-progressbar-value {
+//             background-color: #607D8B;
+//         }
+//     }
 
-    .table-header {
-        font-size: 1.25rem;
-        display: flex;
-        justify-content: space-between;
-    }
+//     .table-header {
+//         font-size: 1.25rem;
+//         display: flex;
+//         justify-content: space-between;
+//     }
 
-    .p-datatable.p-datatable-customers {
-        .p-datatable-header {
-            padding: 1rem;
-            text-align: left;
-            font-size: 1.5rem;
-        }
+//     .p-datatable.p-datatable-customers {
+//         .p-datatable-header {
+//             padding: 1rem;
+//             text-align: left;
+//             font-size: 1.5rem;
+//         }
 
-        .p-paginator {
-            padding: 1rem;
-        }
+//         .p-paginator {
+//             padding: 1rem;
+//         }
 
-        .p-datatable-thead > tr > th {
-            text-align: left;
-        }
+//         .p-datatable-thead > tr > th {
+//             text-align: left;
+//         }
 
-        .p-datatable-tbody > tr > td {
-            cursor: auto;
-        }
+//         .p-datatable-tbody > tr > td {
+//             cursor: auto;
+//         }
 
-        .p-dropdown-label:not(.p-placeholder) {
-            text-transform: uppercase;
-        }
-    }
+//         .p-dropdown-label:not(.p-placeholder) {
+//             text-transform: uppercase;
+//         }
+//     }
 
-    /* Responsive */
-    .p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
-        display: none;
-    }
+//     /* Responsive */
+//     .p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
+//         display: none;
+//     }
 
-    .p-progressbar-value.ui-widget-header {
-        background: #607d8b;
-    }
+//     .p-progressbar-value.ui-widget-header {
+//         background: #607d8b;
+//     }
 
-    @media (max-width: 640px) {
-        .p-progressbar {
-            margin-top: .5rem;
-        }
-    }
+//     @media (max-width: 640px) {
+//         .p-progressbar {
+//             margin-top: .5rem;
+//         }
+//     }
 
-    .product-image {
-        width: 100px;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
-    }
+//     .product-image {
+//         width: 100px;
+//         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+//     }
 
-    .orders-subtable {
-        padding: 1rem;
-    }
+//     .orders-subtable {
+//         padding: 1rem;
+//     }
 
 
-    @media screen and (max-width: 960px) {
-        .p-datatable {
-            &.p-datatable-customers {
-                .p-datatable-thead > tr > th,
-                .p-datatable-tfoot > tr > td {
-                    display: none !important;
-                }
+//     @media screen and (max-width: 960px) {
+//         .p-datatable {
+//             &.p-datatable-customers {
+//                 .p-datatable-thead > tr > th,
+//                 .p-datatable-tfoot > tr > td {
+//                     display: none !important;
+//                 }
 
-                .p-datatable-tbody > tr {
-                    > td {
-                        text-align: left;
-                        display: block;
-                        border: 0 none !important;
-                        width: 100% !important;
-                        float: left;
-                        clear: left;
-                        border: 0 none;
+//                 .p-datatable-tbody > tr {
+//                     > td {
+//                         text-align: left;
+//                         display: block;
+//                         border: 0 none !important;
+//                         width: 100% !important;
+//                         float: left;
+//                         clear: left;
+//                         border: 0 none;
 
-                        .p-column-title {
-                            padding: .4rem;
-                            min-width: 30%;
-                            display: inline-block;
-                            margin: -.4rem 1rem -.4rem -.4rem;
-                            font-weight: bold;
-                        }
+//                         .p-column-title {
+//                             padding: .4rem;
+//                             min-width: 30%;
+//                             display: inline-block;
+//                             margin: -.4rem 1rem -.4rem -.4rem;
+//                             font-weight: bold;
+//                         }
 
-                        .p-progressbar {
-                            margin-top: .5rem;
-                        }
-                    }
-                }
+//                         .p-progressbar {
+//                             margin-top: .5rem;
+//                         }
+//                     }
+//                 }
 
-                colgroup {
-                    display: none;
-                }
-            }
+//                 colgroup {
+//                     display: none;
+//                 }
+//             }
 
-            .p-datatable-header {
-                .table-header {
-                    flex-direction: column !important;
-                }
-            }
-        }
-    }
-}
+//             .p-datatable-header {
+//                 .table-header {
+//                     flex-direction: column !important;
+//                 }
+//             }
+//         }
+//     }
+// }
 
 .crud-demo {
     .p-toolbar {