Merge pull request #15854 from ranthonissen/issue-15852

Fixed #15852 - Table: Frozen columns are displaced
primefaces · Aug 1, 2024 · 20b8cbc · 20b8cbc
2 parents 9eee5df + 68bce16
commit 20b8cbc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -2,6 +2,7 @@ import { animate, AnimationEvent, style, transition, trigger } from '@angular/an
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
     AfterContentInit,
+    AfterViewChecked,
     AfterViewInit,
     booleanAttribute,
     ChangeDetectionStrategy,
@@ -3317,37 +3318,29 @@ export class RowGroupHeader {
         '[class.p-frozen-column]': 'frozen'
     }
 })
-export class FrozenColumn implements AfterViewInit {
+export class FrozenColumn implements AfterViewChecked {
     @Input() get frozen(): boolean {
         return this._frozen;
     }
 
     set frozen(val: boolean) {
         this._frozen = val;
-        Promise.resolve(null).then(() => this.updateStickyPosition());
+        this.updateStickyPosition();
     }
 
     @Input() alignFrozen: string = 'left';
 
     constructor(private el: ElementRef, private zone: NgZone) {}
 
-    ngAfterViewInit() {
+    ngAfterViewChecked() {
         this.zone.runOutsideAngular(() => {
-            setTimeout(() => {
-                this.recalculateColumns();
-            }, 1000);
+            this.recalculateColumns();
         });
     }
 
     @HostListener('window:resize', ['$event'])
     recalculateColumns() {
-        const siblings = DomHandler.siblings(this.el.nativeElement);
-        const index = DomHandler.index(this.el.nativeElement);
-        const time = (siblings.length - index + 1) * 50;
-
-        setTimeout(() => {
-            this.updateStickyPosition();
-        }, time);
+        this.updateStickyPosition();
     }
 
     _frozen: boolean = true;

diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts
@@ -16,7 +16,7 @@ import { CustomerService } from '@service/customerservice';
                     <ng-template pTemplate="header">
                         <tr>
                             <th style="min-width:200px" pFrozenColumn>Name</th>
-                            <th style="min-width:100px">Id</th>
+                            <th style="min-width:100px" pFrozenColumn>Id</th>
                             <th style="min-width:200px">Country</th>
                             <th style="min-width:200px">Date</th>
                             <th style="min-width:200px">Company</th>
@@ -29,7 +29,7 @@ import { CustomerService } from '@service/customerservice';
                     <ng-template pTemplate="body" let-customer>
                         <tr>
                             <td pFrozenColumn>{{ customer.name }}</td>
-                            <td style="min-width:100px">{{ customer.id }}</td>
+                            <td pFrozenColumn style="min-width:100px">{{ customer.id }}</td>
                             <td>{{ customer.country.name }}</td>
                             <td>{{ customer.date }}</td>
                             <td>{{ customer.company }}</td>
@@ -64,11 +64,11 @@ export class FrozenColumnsDoc {
     }
 
     code: Code = {
-        basic: `<p-toggleButton 
-    [(ngModel)]="balanceFrozen" 
+        basic: `<p-toggleButton
+    [(ngModel)]="balanceFrozen"
     [onIcon]="'pi pi-lock'"
-    offIcon="pi pi-lock-open" 
-    [onLabel]="'Balance'" 
+    offIcon="pi pi-lock-open"
+    [onLabel]="'Balance'"
     offLabel="Balance" />
 
 <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
@@ -100,10 +100,10 @@ export class FrozenColumnsDoc {
     </ng-template>
 </p-table>`,
         html: `<div class="card">
-    <p-toggleButton 
-        [(ngModel)]="balanceFrozen" 
-        [onIcon]="'pi pi-lock'" 
-        offIcon="pi pi-lock-open" 
+    <p-toggleButton
+        [(ngModel)]="balanceFrozen"
+        [onIcon]="'pi pi-lock'"
+        offIcon="pi pi-lock-open"
         [onLabel]="'Balance'"
         offLabel="Balance" />
 
@@ -174,7 +174,7 @@ export class TableFrozenColumnsDemo implements OnInit{
 
     formatCurrency(value: number) {
         return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-    } 
+    }
 }`,
         scss: `
 :host ::ng-deep  .p-frozen-column {