冻结 P 表中的静态列

如何解决冻结 P 表中的静态列

我有一个静态操作列在第一个位置剩余动态列的表，如何只冻结第一个操作列

sample image here

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

解决方法

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

    this.scrollableCols = [
        { field: 'year',header: 'Year' },{ field: 'brand',header: 'Brand' },{ field: 'color',header: 'Color' },{ field: 'year',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