I am implementing following two features of Primeng Table inside my angular Project.
Problem: When I freeze a column, the checkbox column appears both in Frozen columns and Scroll-able columns.
Required Behavior: There should always be one Checkbox column, No matter if a column is frozen or not.
Here is the Stackblitz minimal reproduction of the issue.
https://stackblitz.com/edit/primeng-tableselection-demo-cs4wqw?file=src%2Fapp%2Fapp.component.ts
I 'm not really sure why this happens we need to look at the source to find out ,but you can go around it by adding an extra field for the columns.
components
this.scrollableCols = [
{ field: 'checkBox', header: 'checkBox' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' }
];
template
<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars1" [scrollable]="true"
scrollHeight="200px" frozenWidth="300px">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:300px;">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<!-- <th>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th> -->
<th *ngFor="let col of columns" style="height:35px">
<ng-container *ngIf="col.field === 'checkBox' else baseTemp">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</ng-container>
<ng-template #baseTemp>
{{col.header}}
</ng-template>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<!-- <td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
-->
<td *ngFor="let col of columns" style="height:35px">
<ng-container *ngIf="col.field === 'checkBox' else baseTemp">
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</ng-container>
<ng-template #baseTemp>
{{rowData[col.field]}}
</ng-template>
</td>
</tr>
</ng-template>
</p-table>
in here
ng-container *ngIf="col.field === 'checkBox' else baseTemp"
we check for columns with field checkbox then we add thep-tableCheckbox
component