p-frozencolumn not wokring

[Balakoteswararo]

Describe the bug

in application iam using the p-frozencolumn for froze columns in table. with primeng version :11
below image is for the reference.

this is what iam using code in html:

<p-table  [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
    <ng-template pTemplate="header">
        <tr>
            <th pFrozenColumn>
                Vendor Description</th>
            <th pFrozenColumn colspan="6">Baseline</th>
            <th colspan="5">Vendor Name
                <!-- <ng-container *ngIf="lineitm.lineItemType=='Services'">
                {{lineitm.serviceBehaviour}}
                </ng-container>	 -->
            </th>
        </tr>
        <tr>
            <th pFrozenColumn></th>
            <th pFrozenColumn>Actions</th>
            <th pFrozenColumn colspan="2"></th>
            <th pFrozenColumn>$/Unit</th>
            <th pFrozenColumn>Total$</th>
            <th pFrozenColumn>Lowest Bid ($)</th>
            <th>Actions</th>
            <th>Qty Type</th>
            <th>Bid Value</th>
            <th>Savings</th>
            <th>Current Per Yard</th>
            
        </tr>
    </ng-template>
    <ng-template pTemplate="body">
        <tr>
            <td pFrozenColumn >
                <button type="button" pButton pRipple [pRowToggler]="lineitm"
                class="p-button-text p-button-rounded p-button-plain p-mr-2"
                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
                <span class="p-text-bold p-ml-2">{{lineitm.blVendorDescription}}</span>
            </td>
            <td pFrozenColumn >
                <span class="p-column-title" title="Edit">
                    <a (click)="onLineitemAddEdit(lineitm,'B')"> <i class="pi pi-pencil p-p-2"></i></a>
                </span>
                <span class="p-column-title" title="Move Out">
                    <a (click)="MoveOutBaseline(lineitm,'MoveOutBaseline','Service')">
                        <i class="pi pi-arrow-circle-right  p-p-2"></i></a>
                </span>
            </td>
            <td pFrozenColumn><p>Quantity - {{lineitm.blServiceQuantity}}</p>
                <p>Size - {{lineitm.blSize}}</p>
                <p>#of times - {{lineitm.blNoOfTimes}}</p>
            </td>
            <td pFrozenColumn>
                <p>Frequency - {{lineitm.blServiceFrequency}}</p>
                <p>MRC - <span>
                            <input type="checkbox" [(ngModel)]="lineitm.blMonthlyRecurringCharge"
                                [checked]="lineitm.blMonthlyRecurringCharge" (click)="onCheckClick($event)">
                        </span>
                </p>
                <p>Serviced On - {{lineitm.blServicedOn}} </p>
            </td>
                <td> {{lineitm.nlTotalPerUnit|currency:'USD':'symbol':'1.4-4'}} </td>
                <td> {{lineitm.nlTotal|currency:'USD':'symbol':'1.4-4'}} </td>
            <td pFrozenColumn>
                <a (click)="DisplayRelatedLineitems(lineitm);"
                style="cursor: pointer;text-decoration: underline;color:blue;">{{lineitm.lowestBidPrice}}</a>
                <p> Avg : {{lineitm.avgValue|currency:'USD':'symbol':'1.2-2'}} </p>
            </td>

            <td><span><a><i class="pi pi-pencil p-p-1"></i></a></span>
                <span class="p-column-title" title="Archive">
                    <a (click)="Archive(lineitm,'Archive','Service')"> <i
                            class="fa fa-archive p-p-1"></i></a></span>	
                <p-checkbox [(ngModel)]="lineitm.isBidAwarded" binary="true" [disabled]="isDisableEditFields"
                            (onChange)="onBidAwaredChange(lineitm)" inputId="binary"></p-checkbox>     
            </td>
            <td>
                <ng-container *ngIf="lineitm.lineItemType=='Services'">
                {{lineitm.serviceBehaviour}}
                </ng-container>
            </td>
            <td>
                <p-inputNumber [(ngModel)]="lineitm.vendorBidValue"
                        [disabled]="isDisableEditFields" inputId="vendorbilledintegeronly"
                        (onBlur)="UpdateSavings(lineitm);" mode="decimal" locale="en-US"
                        [minFractionDigits]="4" [style]="{'width':'100%'}"></p-inputNumber>
            </td>
            <td> {{ lineitm.savings |currency:'USD':'symbol':'1.4-4'}}</td>
            <td> {{lineitm.perYardRate}} </td>
        </tr>
    </ng-template>
</p-table>

Environment

local

Reproducer

No response

Angular version

12.2.18

PrimeNG version

11

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

16.10

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Balakoteswararo]

not appended css properties for frozencolumn form primeng

[Balakoteswararo]

can you any one resolved the issue?

[Balakoteswararo]

Describe the bug

in application iam using the p-frozencolumn for froze columns in table. with primeng version :11 below image is for the reference.

this is what iam using code in html:

<p-table  [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
    <ng-template pTemplate="header">
        <tr>
            <th pFrozenColumn>
                Vendor Description</th>
            <th pFrozenColumn colspan="6">Baseline</th>
            <th colspan="5">Vendor Name
                <!-- <ng-container *ngIf="lineitm.lineItemType=='Services'">
                {{lineitm.serviceBehaviour}}
                </ng-container>	 -->
            </th>
        </tr>
        <tr>
            <th pFrozenColumn></th>
            <th pFrozenColumn>Actions</th>
            <th pFrozenColumn colspan="2"></th>
            <th pFrozenColumn>$/Unit</th>
            <th pFrozenColumn>Total$</th>
            <th pFrozenColumn>Lowest Bid ($)</th>
            <th>Actions</th>
            <th>Qty Type</th>
            <th>Bid Value</th>
            <th>Savings</th>
            <th>Current Per Yard</th>
            
        </tr>
    </ng-template>
    <ng-template pTemplate="body">
        <tr>
            <td pFrozenColumn >
                <button type="button" pButton pRipple [pRowToggler]="lineitm"
                class="p-button-text p-button-rounded p-button-plain p-mr-2"
                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
                <span class="p-text-bold p-ml-2">{{lineitm.blVendorDescription}}</span>
            </td>
            <td pFrozenColumn >
                <span class="p-column-title" title="Edit">
                    <a (click)="onLineitemAddEdit(lineitm,'B')"> <i class="pi pi-pencil p-p-2"></i></a>
                </span>
                <span class="p-column-title" title="Move Out">
                    <a (click)="MoveOutBaseline(lineitm,'MoveOutBaseline','Service')">
                        <i class="pi pi-arrow-circle-right  p-p-2"></i></a>
                </span>
            </td>
            <td pFrozenColumn><p>Quantity - {{lineitm.blServiceQuantity}}</p>
                <p>Size - {{lineitm.blSize}}</p>
                <p>#of times - {{lineitm.blNoOfTimes}}</p>
            </td>
            <td pFrozenColumn>
                <p>Frequency - {{lineitm.blServiceFrequency}}</p>
                <p>MRC - <span>
                            <input type="checkbox" [(ngModel)]="lineitm.blMonthlyRecurringCharge"
                                [checked]="lineitm.blMonthlyRecurringCharge" (click)="onCheckClick($event)">
                        </span>
                </p>
                <p>Serviced On - {{lineitm.blServicedOn}} </p>
            </td>
                <td> {{lineitm.nlTotalPerUnit|currency:'USD':'symbol':'1.4-4'}} </td>
                <td> {{lineitm.nlTotal|currency:'USD':'symbol':'1.4-4'}} </td>
            <td pFrozenColumn>
                <a (click)="DisplayRelatedLineitems(lineitm);"
                style="cursor: pointer;text-decoration: underline;color:blue;">{{lineitm.lowestBidPrice}}</a>
                <p> Avg : {{lineitm.avgValue|currency:'USD':'symbol':'1.2-2'}} </p>
            </td>

            <td><span><a><i class="pi pi-pencil p-p-1"></i></a></span>
                <span class="p-column-title" title="Archive">
                    <a (click)="Archive(lineitm,'Archive','Service')"> <i
                            class="fa fa-archive p-p-1"></i></a></span>	
                <p-checkbox [(ngModel)]="lineitm.isBidAwarded" binary="true" [disabled]="isDisableEditFields"
                            (onChange)="onBidAwaredChange(lineitm)" inputId="binary"></p-checkbox>     
            </td>
            <td>
                <ng-container *ngIf="lineitm.lineItemType=='Services'">
                {{lineitm.serviceBehaviour}}
                </ng-container>
            </td>
            <td>
                <p-inputNumber [(ngModel)]="lineitm.vendorBidValue"
                        [disabled]="isDisableEditFields" inputId="vendorbilledintegeronly"
                        (onBlur)="UpdateSavings(lineitm);" mode="decimal" locale="en-US"
                        [minFractionDigits]="4" [style]="{'width':'100%'}"></p-inputNumber>
            </td>
            <td> {{ lineitm.savings |currency:'USD':'symbol':'1.4-4'}}</td>
            <td> {{lineitm.perYardRate}} </td>
        </tr>
    </ng-template>
</p-table>

Environment

local

Reproducer

No response

Angular version

12.2.18

PrimeNG version

11

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

16.10

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[jagdishpatil02]

Hi, @Balakoteswararo. From what I see, there is no data present for the columns, so it appears that the frozen column is not working. I have created the same demo with dummy data, and it is working perfectly fine. Additionally, you can display the message 'no data available' if the data is not present (check attached images for reference)

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,