<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
<br>
<br>
<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
  
  <ng-template pTemplate="body" let-planner>
      <td >
        <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
          <ng-template pTemplate="header">
          </ng-template>
          <p>{{planner.description}}</p>
          <ng-template pTemplate="footer">
              <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
              <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" label="Delete" [style]="{'margin-left': '.5em'}"></button>
            </ng-template>
        </p-card>
      </td>
  </ng-template>
</p-table>


