I am using the new primeng p-table component. My first column is frozen and contains three buttons on each row. Other columns are dynamically generated and plain text outputs. Primeng generates a header, body, and frozen column in its own html table. If I press a button in a frozen column, I want to get the whole row using the directive #tableCol(not sure if there is a directive) of my table and select it, but I get only the frozen column row. Isolation occurs in a method rowDeletionMark(tableCol).
How to get a row in the "main" table where the actual data / rows are?
My primeng table:
<p-table #dt [columns]="header" [value]="data" [resizableColumns]="true" [frozenColumns]="frozenCols" [paginator]="true"
[rows]="10" [rowsPerPageOptions]="[10,20,30]" sortMode="multiple" [reorderableColumns]="true" class="ptable row-cancel"
[scrollable]="true" frozenWidth="150px">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:200px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="width:150px;font-size:13px" pResizableColumn pReorderableColumn
[pSortableColumn]="col.field !== 'ACTION' ? col.field : null">
{{col.field}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr>
<td #tableCol *ngFor="let col of columns" height="48" style="width:150px;padding:0 5px 0 5px;line-height: 1;" [ngStyle]="getRowMarking(rowData)"
pEditableColumn>
<div *ngIf="col.field === 'ACTION'">
<button pButton type="button" class="row-btn" icon="fa fa-fw fa-save"></button>
<button pButton type="button" class="row-btn ui-button-danger" icon="fa fa-fw fa-eraser" (click)="rowDeletionMark(tableCol)"></button>
<button pButton type="button" class="row-btn ui-button-info" icon="far fa-clock-o" (click)="showRowHistory(rowData)"></button>
</div>
<div *ngIf="col.editable && col.field !== 'ACTION'">
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="data[col.field]">
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</div>
<div *ngIf="!col.editable">
{{rowData[col.field]}}
</div>
</td>
</tr>
</ng-template>
</p-table>
extraction method:
rowDeletionMark(tableCol) {
tableCol.className += ' canceled';
}
source
share