冻结 P 表中的静态列

Question

我有一个表，其中静态操作列位于剩余动态列的第一位， 如何仅冻结第一个操作列

例如这里的名称是静态列，其余是动态的，那么如何仅冻结名称列

Answer 1

您可以如下定义冻结和可滚动的列

    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' },
    ];

您的 html 如下所示。

<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 链接 - https://stackblitz.com/edit/angular-primeng-frozen-columns-nytg8b?file=src/app/table-scroll-demo.component.html