nx-primeng-sakai-v17/src/app/demo/view/tabledemo.component.html

<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']">
				<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">
							<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 style="width: 3rem">
							<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
						</th>
						<th pSortableColumn="name">
							<div class="flex align-items-center">
								Name
								<p-sortIcon field="name"></p-sortIcon>
							</div>
						</th>
						<th pSortableColumn="country.name">
							<div class="flex align-items-center">
								Country
								<p-sortIcon field="country.name"></p-sortIcon>
							</div>
						</th>
						<th pSortableColumn="representative.name">
							<div class="flex align-items-center">
								Agent
								<p-sortIcon field="representative.name"></p-sortIcon>
							</div>
						</th>
						<th pSortableColumn="date">
							<div class="flex align-items-center">
								Date
								<p-sortIcon field="date"></p-sortIcon>
							</div>
						</th>
						<th pSortableColumn="status">
							<div class="flex align-items-center">
								Status
								<p-sortIcon field="status"></p-sortIcon>
							</div>
						</th>
						<th pSortableColumn="activity">
							<div class="flex align-items-center">
								Activity
								<p-sortIcon field="activity"></p-sortIcon>
							</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>
							{{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>
						<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>
						<td>
							<span class="p-column-title">Date</span>
							{{customer.date | date: 'MM/dd/yyyy'}}
						</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>
						<td style="text-align: center">
							<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
						</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">
		<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">
		<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 p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
				<ng-template pTemplate="caption">
					<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>
				<ng-template pTemplate="header">
					<tr>
						<th style="width: 3rem"></th>
						<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
						<th>Image</th>
						<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
						<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
						<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
						<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
					</tr>
				</ng-template>
				<ng-template pTemplate="body" let-product let-expanded="expanded">
					<tr>
						<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><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>{{product.price | currency:'USD'}}</td>
						<td><span class="p-column-title">Category</span>{{product.category}}</td>
						<td><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><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
					</tr>
				</ng-template>
				<ng-template pTemplate="rowexpansion" let-product>
					<tr>
						<td colspan="7">
							<div class="p-3">
								<p-table [value]="product.orders" dataKey="id">
									<ng-template pTemplate="header">
					<tr>
						<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
						<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
						<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
						<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
						<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
						<th style="width: 4rem"></th>
					</tr>
				</ng-template>
				<ng-template pTemplate="body" let-order>
					<tr>
						<td><span class="p-column-title">Id</span>{{order.id}}</td>
						<td><span class="p-column-title">Customer</span>{{order.customer}}</td>
						<td><span class="p-column-title">Date</span>{{order.date}}</td>
						<td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td>
						<td><span class="p-column-title">Status</span><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
						<td><p-button type="button" icon="pi pi-search"></p-button></td>
					</tr>
				</ng-template>
				<ng-template pTemplate="emptymessage">
					<tr>
						<td colspan="6">There are no order for this product yet.</td>
					</tr>
				</ng-template>
			</p-table>
		</div>
		</td>
		</tr>
		</ng-template>
		</p-table>
	</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()" 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>