<p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single">
...</p-dataTable>
exists some like this
<ng-template let-col let-period="rowData" let-ri="rowIndex" pTemplate="body">...</ng-template>
for DataTable
In your ng-template for the expansion of row use the below code
<ng-template let-i="rowIndex">
<button (click)="expand(i)"> expand </button>
</ng-template>
In the button that is clicked during expansion use the below code to get the rowindex
expand(i){
//... your logic to expand the row...
this.expandedRowIndex = i;
}
<p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single" (onRowExpand)="onRowExpand($event)">
Update 1:
As you are clicking the entire row to be expanded. You can use the onRowExpand
property of the <p-datatable>
to achieve this.
onRowExpand(cc){
console.log(cc)
//logs the entire object which is clicked
}
This method is triggered when the row is expanded
LIVE DEMO
<ng-template let-i="rowIndex" let-line pTemplate="rowexpansion">
rowIndex
is probably added to rowExpansion
now, works for me in latest version
You can use it:
<ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
<tr [pSelectableRow]="record">
<td>
{{rowIndex + 1}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With