From c03b12a45469be6992dcb67e1af388d8a08b736a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 21 Dec 2021 15:57:32 +0300
Subject: [PATCH] fix table responsive

---
 src/app/demo/view/tabledemo.component.html | 18 +++++++--------
 src/app/pages/app.crud.component.html      | 27 ++++++++++++----------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index 2f91b56..94c3d21 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -211,11 +211,11 @@
 						<td>
 							<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
 						</td>
-						<td>{{product.name}}</td>
+						<td style="min-width: 12rem;">{{product.name}}</td>
 						<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
-						<td>{{product.price | currency:'USD'}}</td>
-						<td>{{product.category}}</td>
-						<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+						<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
+						<td style="min-width: 10rem;">{{product.category}}</td>
+						<td style="min-width: 10rem;"><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
 						<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
 					</tr>
 				</ng-template>
@@ -279,20 +279,20 @@
 						</td>
 					</tr>
 					<tr>
-						<td style="min-width: 220px;">
+						<td style="min-width: 200px;">
 							{{customer.name}}
 						</td>
-						<td style="min-width: 220px;">
+						<td style="min-width: 200px;">
 							<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
 							<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
 						</td>
-						<td style="min-width: 300px;">
+						<td style="min-width: 200px;">
 							{{customer.company}}
 						</td>
-						<td style="min-width: 220px;">
+						<td style="min-width: 200px;">
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 220px;">
+						<td style="min-width: 200px;">
 							{{customer.date}}
 						</td>
 					</tr>
diff --git a/src/app/pages/app.crud.component.html b/src/app/pages/app.crud.component.html
index 2ce2640..77c074d 100644
--- a/src/app/pages/app.crud.component.html
+++ b/src/app/pages/app.crud.component.html
@@ -1,4 +1,4 @@
-<div class="grid crud-demo">
+<div class="grid">
     <div class="col-12">
         <div class="card">
             <p-toast></p-toast>
@@ -16,12 +16,12 @@
 
             <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
                 <ng-template pTemplate="caption">
-                    <div class="flex flex-md-row justify-content-md-between table-header">
+                    <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                         <h5 class="m-0">Manage Products</h5>
-                        <span class="p-input-icon-left">
-                        <i class="pi pi-search"></i>
-                        <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
-                    </span>
+                        <span class="block mt-2 md:mt-0 p-input-icon-left">
+                            <i class="pi pi-search"></i>
+                            <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
+                        </span>
                     </div>
                 </ng-template>
                 <ng-template pTemplate="header">
@@ -47,19 +47,22 @@
                         <td><span class="p-column-title">Code</span>
                             {{product.code}}
                         </td>
-                        <td><span class="p-column-title">Name</span>
+                        <td style="min-width:10rem;">
+                            <span class="p-column-title">Name</span>
                             {{product.name}}
                         </td>
                         <td><span class="p-column-title">Image</span>
                             <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
                         </td>
-                        <td><span class="p-column-title">Price</span>
+                        <td style="min-width:8rem;">
+                            <span class="p-column-title">Price</span>
                             {{product.price | currency:'USD'}}
                         </td>
-                        <td><span class="p-column-title">Category</span>
+                        <td style="min-width:10rem;">
+                            <span class="p-column-title">Category</span>
                             {{product.category}}
                         </td>
-                        <td><span class="p-column-title">Reviews</span>
+                        <td style="min-width: 10rem;"><span class="p-column-title">Reviews</span>
                             <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
                         </td>
                         <td><span class="p-column-title">Status</span>
@@ -74,9 +77,9 @@
             </p-table>
         </div>
 
-        <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
+        <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
             <ng-template pTemplate="content">
-                <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
+                <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
                 <div class="field">
                     <label for="name">Name</label>
                     <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />