2
I need the expansion to be just in the line of the clicked icon, tried several ways but could not.
I have the following html code:
<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>
And I have the following component:
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() {
}
}