CODEWITHSUNDEEP
primengangular2-templateprimeng-datatableprimeng-turbotable
Developper
Developper

Reputation: 1

Freez static column in P-table

I have a table with static actions column in first position remaining dynamic columns, How to freeze only first actions column sample image here

For example here Name is static column and remaining are dynamic then how to freeze name column only

Upvotes: 0

Views: 1711

Answers (1)

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

You could define frozen and scrollable columns as below

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

Your html would like below.

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

Upvotes: 0

Related Questions