f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix table responsive

Browse Source
This commit is contained in:
Çetin 2021-12-21 15:57:32 +03:00
parent 974fa57761
commit c03b12a454
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/demo/view/tabledemo.component.html
View File

@ -211,11 +211,11 @@
<td> <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> <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>
<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><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td>{{product.price | currency:'USD'}}</td> <td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td> <td style="min-width: 10rem;">{{product.category}}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></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> <td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
</tr> </tr>
</ng-template> </ng-template>
@ -279,20 +279,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="min-width: 220px;"> <td style="min-width: 200px;">
{{customer.name}} {{customer.name}}
</td> </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"> <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> <span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
</td> </td>
<td style="min-width: 300px;"> <td style="min-width: 200px;">
{{customer.company}} {{customer.company}}
</td> </td>
<td style="min-width: 220px;"> <td style="min-width: 200px;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span> <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td> </td>
<td style="min-width: 220px;"> <td style="min-width: 200px;">
{{customer.date}} {{customer.date}}
</td> </td>
</tr> </tr>

21
src/app/pages/app.crud.component.html
View File

@ -1,4 +1,4 @@
<div class="grid crud-demo"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<p-toast></p-toast> <p-toast></p-toast>
@ -16,9 +16,9 @@
<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"> <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"> <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> <h5 class="m-0">Manage Products</h5>
<span class="p-input-icon-left"> <span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." /> <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
</span> </span>
@ -47,19 +47,22 @@
<td><span class="p-column-title">Code</span> <td><span class="p-column-title">Code</span>
{{product.code}} {{product.code}}
</td> </td>
<td><span class="p-column-title">Name</span> <td style="min-width:10rem;">
<span class="p-column-title">Name</span>
{{product.name}} {{product.name}}
</td> </td>
<td><span class="p-column-title">Image</span> <td><span class="p-column-title">Image</span>
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /> <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
</td> </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'}} {{product.price | currency:'USD'}}
</td> </td>
<td><span class="p-column-title">Category</span> <td style="min-width:10rem;">
<span class="p-column-title">Category</span>
{{product.category}} {{product.category}}
</td> </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> <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</td> </td>
<td><span class="p-column-title">Status</span> <td><span class="p-column-title">Status</span>
@ -74,9 +77,9 @@
</p-table> </p-table>
</div> </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"> <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"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus /> <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />