<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>

