Update tabledemo and add primeblocks & icons pages
This commit is contained in:
Çetin
@@ -1,197 +1,139 @@
|
||||
<div class="grid table-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<p>Pagination, sorting, filtering and checkbox selection.</p>
|
||||
<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
|
||||
responsiveLayout="scroll"
|
||||
styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
|
||||
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<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">
|
||||
<ng-template pTemplate="caption">
|
||||
<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">
|
||||
<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">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Agent
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="px-3 pt-3 pb-0">
|
||||
<span class="p-text-bold">Agent Picker</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
|
||||
<ng-template let-option pTemplate="item">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="ml-1">{{option.name}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="date">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="status">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Balance
|
||||
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
<p-columnFilter field="status" matchMode="equals" display="menu">
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
|
||||
<ng-template let-option pTemplate="item">
|
||||
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
|
||||
</ng-template>
|
||||
</p-dropdown>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="activity">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="filter" let-filter="filterCallback">
|
||||
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
|
||||
<div class="flex align-items-center justify-content-between px-2">
|
||||
<span>{{activityValues[0]}}</span>
|
||||
<span>{{activityValues[1]}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem">
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Verified
|
||||
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr class="p-selectable-row">
|
||||
<td>
|
||||
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Name</span>
|
||||
<tr>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</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 style="min-width: 200px;">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text ml-2">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</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 style="min-width: 200px;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
|
||||
<span class="image-text ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Status</span>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.balance | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Activity</span>
|
||||
<td style="min-width: 200px;">
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
|
||||
<td class="text-center" style="min-width: 50px;">
|
||||
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
<td colspan="7">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<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" 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">
|
||||
List of Customers
|
||||
<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"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">Representative
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="date">Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="status">Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="activity">Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr [pSelectableRow]="customer">
|
||||
<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;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</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">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
@@ -203,7 +145,7 @@
|
||||
<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" 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>
|
||||
@@ -216,7 +158,7 @@
|
||||
<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" 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>
|
||||
@@ -305,7 +247,7 @@
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Group and Scrolling</h5>
|
||||
<h5>Subheader Grouping</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">
|
||||
@@ -319,26 +261,26 @@
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5">
|
||||
<td colspan="5" style="min-width: 200px;">
|
||||
<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>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Country</span>
|
||||
<td style="min-width: 220px;"><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>
|
||||
<td style="min-width: 300px;"><span class="p-column-title">Company</span>
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<td style="min-width: 220px;"><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>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user