Freez static column in P-table

Question

I have a table with static actions column in first position remaining dynamic columns, How to freeze only first actions column

For example here Name is static column and remaining are dynamic then how to freeze name column only

Answer 1

You could define frozen and scrollable columns as below

    this.scrollableCols = [
        { field: 'year', header: 'Year' },
        { field: 'brand', header: 'Brand' },
        { field: 'color', header: 'Color' },
        { field: 'year', header: 'Year' },
        { field: 'brand', header: 'Brand' },
        { field: 'color', header: 'Color' }
    ];

    this.frozenCols = [
        { field: 'vin', header: 'Vin' },
    ];

Your html would like below.

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars" [scrollable]="true" scrollHeight="200px" frozenWidth="200px">
 <ng-template pTemplate="colgroup" let-columns>
 <colgroup>
   <col *ngFor="let col of columns" style="width:200px">
 </colgroup>
 </ng-template>
 <ng-template pTemplate="header" let-columns>
 <tr>
   <th *ngFor="let col of columns">
     {{col.header}}
   </th>
 </tr>
 </ng-template>
 <ng-template pTemplate="body" let-rowData let-columns="columns">
 <tr>
   <td *ngFor="let col of columns">
     {{rowData[col.field]}}
   </td>
 </tr>
 </ng-template>
</p-table>

Stackblitz link - https://stackblitz.com/edit/angular-primeng-frozen-columns-nytg8b?file=src/app/table-scroll-demo.component.html