PrimeNG table, How to have a frozen column at the right of the table?

i had the Problem too, i just figured an easy way with scss

:host ::ng-deep .p-datatable { .p-datatable-scrollable-wrapper { display: flex; flex-direction: row-reverse; .p-datatable-scrollable-view.p-datatable-unfrozen-view { position: initial; }

the only problem you will have, that you need to set the height on the td and th to archive the same layout with the standard table

So that was the part to move it on the right side. Now i have a quick and dirty solution. The better option is to solve it over an directive and work with throttleTime(rxjs so wrap it in an observable) for better performance.

To get along you need to get the table itself with an #table as example on the <p-table #table> After that you need to get it in your .ts file. For that you implements AfterViewInit for further coding. Also you need a @ViewChild('table') table: Table; Then you need to use ngAfterViewInit like that:

  ngAfterViewInit(): void {
    (this.table.scrollableViewChild.scrollBodyViewChild.nativeElement as HTMLElement).style.overflowY = 'hidden';
    (this.table.scrollableFrozenViewChild.scrollBodyViewChild.nativeElement as HTMLElement).style.overflowY = 'scroll';
    (this.table.scrollableFrozenViewChild.scrollBodyViewChild.nativeElement as HTMLElement).addEventListener('scroll', ((e) => (this.table.scrollableViewChild.scrollBodyViewChild.nativeElement as HTMLElement).scrollTop = (e.target as HTMLElement).scrollTop));
  }

Here you can also update the td and th of the frozenTable ;) But as i said, pls do it in a directive instead of doing it like that :)

Sorry by the way for this bad formatting im new to this, i appreciate better formattings, thanks :)

Tested on PrimeNG V12.0.0

this solution work for me. The stick value for position is similar to fixed and relative. So you can use this for fix in the horizontal scroll but not in vertical in this case.

.p-datatable .p-datatable-scrollable-body td:last-child{
    background: #fff;
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    right: 0;
}