Checkbox selection with frozen columns feature causing multiple checkbox columns inside primeng table

Question

I am implementing following two features of Primeng Table inside my angular Project.

1. Checkbox selection . Scroll down to the section named Checkbox Selection .
2. Frozen Columns . Scroll down to the section named Frozen Columns .

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

Answer 1

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 the p-tableCheckbox component

demo