<p-table [value]="pacientes" [paginator]="true" [rows]="5"
[responsive]="true" dataKey="vin">
  <ng-template pTemplate="caption">
    Pacientes
  </ng-template>
  <ng-template pTemplate="header">
  <tr>
    <th class="col-expand"></th>
    <th class="col-codigo">Código</th>
    <th>Nome</th>
    <th class="col-rg">RG</th>
    <th class="col-cpf">CPF</th>
    <th class="col-telefone">Telefone</th>
    <th class="col-acoes">Ações</th>
  </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-expanded="expanded"             let-rowIndex="rowIndex">
<tr>
  <td>
    <a href="javascript:;" [pRowToggler]="rowData">
      <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
    </a>
  </td>
  <td style="text-align: center;">{{rowData.codigo}}</td>
  <td>{{rowData.nome}}</td>
  <td style="text-align: center;">{{rowData.rg}}</td>
  <td style="text-align: center;">{{rowData.cpf}}</td>
  <td style="text-align: center;">{{rowData.telefonePrincipal}}</td>
  <td>
    <a pButton icon="fa fa-pencil" pTooltip="Editar" tooltipPosition="top" style="margin-right: 9px;"></a>
    <button pButton icon="fa fa-trash" pTooltip="Excluir" tooltipPosition="top"></button>
  </td>
</tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData>
<tr>
  <td [attr.colspan]="7">
    <div class="ui-g ui-fluid" style="font-size:16px;padding:20px" [@rowExpansionTrigger]="'active'">
      <div class="ui-g-12 ui-md-9">
        <div class="ui-g">
          <div class="ui-g-12 ui-md-6">
              <b>Código:</b> {{rowData.codigo}}
          </div>
          <div class="ui-g-12 ui-md-6">
              <b>Nome:</b> {{rowData.nome}}
          </div>
          <div class="ui-g-12 ui-md-6">
              <b>RG:</b> {{rowData.rg}}
          </div>
          <div class="ui-g-12 ui-md-6">
              <b>CPF:</b> {{rowData.cpf}}
          </div>
          <div class="ui-g-12 ui-md-6">
              <b>Telefone:</b> {{rowData.telefonePrincipal}}
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>

import { Component, OnInit } from '@angular/core';
    import { trigger,state,style,transition,animate } from '@angular/animations';

    @Component({
      selector: 'app-paciente-grid',
      templateUrl: './paciente-grid.component.html',
      styleUrls: ['./paciente-grid.component.css'],
      animations: [
        trigger('rowExpansionTrigger', [
          state('void', style({
          transform: 'translateX(-10%)',
        opacity: 0
      })),
      state('active', style({
        transform: 'translateX(0)',
        opacity: 1
      })),
      transition('* <=> *', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
    ])
  ]
    })
    export class PacienteGridComponent implements OnInit {
       pacientes = [
       {codigo: 1, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 2, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 3, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 4, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 5, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 6, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 7, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'},
    {codigo: 8, nome: 'Alisson', rg: '99999999-99', cpf: '999999999-99', telefonePrincipal: '(43) 9999-9999'}
  ];

  constructor() { }

  ngOnInit() {
      }
  }