p-table 保持第一列固定/凍結

Question

我正在使用primeng p-table，我想從水平滾動中凍結第一列。 當表格水平滾動時，header、正文和頁腳第一列不會滾動。 我怎樣才能做到這一點？

我在 header、正文和頁腳中使用 *ngIf。 按照下面的代碼。 忽略任何語法錯誤，原始代碼中沒有語法錯誤。

<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

您可以使用pFrozenColumn指令，放置在 header 和表格主體模板中的th和td元素上。
如果要動態凍結和解凍列，請將該指令與輸入[frozen]一起使用。

這是 PrimeNG 文檔中的一個示例，可在此處找到（在頁面上查找“Frozen Columns”）：

<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>