Блог

У меня есть таблица со столбцом статических действий в первой позиции, остальные динамические столбцы, как заморозить только первый столбец действий

Например, здесь Name является статическим столбцом, а остальные являются динамическими, тогда как заморозить только столбец name

Вы можете определить замороженные и прокручиваемые столбцы, как показано ниже

     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>
 

Ссылка на Стекблитц — https://stackblitz.com/edit/angular-primeng-frozen-columns-nytg8b?file=src/app/table-scroll-demo.component.html