update table, menu, topbar, dialog, toast components and css
This commit is contained in:
Çetin
@@ -4,11 +4,14 @@
|
||||
<h5>Default</h5>
|
||||
<p>Pagination, sorting, filtering and checkbox selection.</p>
|
||||
<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
|
||||
styleClass="p-datatable-customers" [rowHover]="true" [rows]="10" [paginator]="true"
|
||||
responsiveLayout="scroll"
|
||||
styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
|
||||
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
|
||||
List of Customers
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
|
||||
<h6>
|
||||
List of Customers
|
||||
</h6>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
@@ -70,16 +73,20 @@
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
<div>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
<div>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
@@ -112,7 +119,7 @@
|
||||
<h5>Customized</h5>
|
||||
<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
|
||||
<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
|
||||
styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm"
|
||||
styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm" responsiveLayout="scroll"
|
||||
[scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
|
||||
@@ -187,14 +194,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<p-toggleButton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-toggleButton>
|
||||
|
||||
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:200px" pFrozenColumn>Name</th>
|
||||
<th style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
|
||||
<th style="width:200px">Country</th>
|
||||
<th style="width:200px">Date</th>
|
||||
<th style="width:200px">Company</th>
|
||||
<th style="width:200px">Status</th>
|
||||
<th style="width:200px">Activity</th>
|
||||
<th style="width:200px">Representative</th>
|
||||
<th style="width:200px">Balance</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
|
||||
<td style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
|
||||
<td style="width:200px">{{customer.country.name}}</td>
|
||||
<td style="width:200px">{{customer.date}}</td>
|
||||
<td style="width:200px">{{customer.company}}</td>
|
||||
<td style="width:200px">{{customer.status}}</td>
|
||||
<td style="width:200px">{{customer.activity}}</td>
|
||||
<td style="width:200px">{{customer.representative.name}}</td>
|
||||
<td style="width:200px">{{formatCurrency(customer.balance)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<p-toast></p-toast>
|
||||
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers rowexpand-table">
|
||||
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<button pButton icon="pi pi-fw pi-plus" label="Expand All" (click)="expandAll()"></button>
|
||||
<button pButton icon="pi pi-fw pi-minus" class="ml-2" label="Collapse All" (click)="collapseAll()"></button>
|
||||
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
|
||||
<div class="flex table-header">
|
||||
</div>
|
||||
</ng-template>
|
||||
@@ -259,49 +301,49 @@
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Group and Scrolling</h5>
|
||||
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px"
|
||||
styleClass="p-datatable-customers">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>Company</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Country</span>
|
||||
<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><span class="p-column-title">Company</span>
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Group and Scrolling</h5>
|
||||
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
|
||||
styleClass="p-datatable-customers">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>Company</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="p-text-bold ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Country</span>
|
||||
<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><span class="p-column-title">Company</span>
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user