48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<div class="flex-row w-full h-full">
|
|
<p-table #dt2 [value]="familyList()" sortMode="multiple"
|
|
class="p-datatable-sm" paginatorDropdownAppendTo="body"
|
|
dataKey="id" selectionMode="single" [(selection)]="selectedPerson"
|
|
[paginator]="true" [globalFilterFields]="['lastName', 'firstName', 'sex']"
|
|
[rows]="10" [rowsPerPageOptions]="[5,10, 20,50]"
|
|
[loading]="loading">
|
|
<ng-template #caption>
|
|
<div class="flex">
|
|
<p-iconfield iconPosition="left" class="ml-auto">
|
|
<p-inputicon>
|
|
<i class="pi pi-search"></i>
|
|
</p-inputicon>
|
|
<input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
|
|
</p-iconfield>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
|
|
</th>
|
|
<th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
|
|
</th>
|
|
<th pSortableColumn="sex">Sex<p-sortIcon field="sex"></p-sortIcon>
|
|
</th>
|
|
<th></th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-user>
|
|
<tr [pSelectableRow]="user">
|
|
<td>{{user.lastName}}</td>
|
|
<td>{{user.firstName}}</td>
|
|
<td>{{user.sex}}</td>
|
|
<td></td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
<div class="flex justify-end mr-2 mb-2 p-2">
|
|
<button pButton type="submit" class="p-button-sm mr-2"
|
|
icon="pi pi-check" iconPos="left" label="Select"
|
|
(click)="select($event)" [disabled]="selectedPerson == null" ></button>
|
|
<button pButton pRipple class="p-button-sm" type="button"
|
|
icon="pi pi-times" iconPos="left"
|
|
label="Cancel" (click)="cancel($event)"></button>
|
|
</div>
|
|
</div>
|
|
|