p-table keep first column fixed/freeze

Question

I am using primeng p-table and I want to freeze the first column from horizontal scrolling. The header, body and footer first columns does not scroll when the table is scrolled horizontally. How can I do that?

I am using for *ngIf in header, body and footer. Follow code below. Ignore any syntax error, there are no syntax error in original code.

<tr>
  <ng-container *ngFor="let col of columns">
    <ng-container *ngIf="condition; else nextTh2">
      <th>{{col.label}}</th>
    </ng-container>
    <ng-template #nextTh>
      <ng-container *ngIf="condition2; else nextTh3">
        <th>{{col.label}}</th>
      </ng-container>
    </ng-template>
    .
    .
    .
  </ng-container>
</tr>

Answer 1

You can use the pFrozenColumn directive, placed on th and td elements in the header and body templates for the table.
If you want to freeze and unfreeze the column dynamically, use the directive together with the input [frozen].

Here's an example from the PrimeNG documentation, found here (Look for "Frozen Columns" on the page):

<p-table [value]="customers" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:200px" pFrozenColumn>Name</th>
            <th style="width:100px">Id</th>
            <th style="width:200px">Country</th>
            <th style="width:200px">Date</th>
            <th style="width:200px">Company</th>
            <th style="width:200px">Status</th>
            <th style="width:200px">Activity</th>
            <th style="width:200px">Representative</th>
            <th style="width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>
            <td style="width:200px" pFrozenColumn>{{customer.name}}</td>
            <td style="width:100px">{{customer.id}}</td>
            <td style="width:200px">{{customer.country.name}}</td>
            <td style="width:200px">{{customer.date}}</td>
            <td style="width:200px">{{customer.company}}</td>
            <td style="width:200px">{{customer.status}}</td>
            <td style="width:200px">{{customer.activity}}</td>
            <td style="width:200px">{{customer.representative.name}}</td>
            <td style="width:200px" alignFrozen="right"  pFrozenColumn [frozen]="balanceFrozen">{{formatCurrency(customer.balance)}}</td>
        </tr>
    </ng-template>
</p-table>