How can i implement frozen columns with sorting and filtering menus

[sjonnala]

Hi,

How can i freeze only the first 3 columns (Label, Name, Type) for the below code along with Sorting, Filtering on few columns, and Multiple selections?


<p-table #dt [value]="extract" editMode="row" id="experimentsGrid" [paginator]="true" sortMode="multiple" [loading]="loading"
[rows]="20" [autoLayout]="true" [(selection)]="selectedExtracts" selectionMode="multiple" [metaKeySelection]="true" [(contextMenuSelection)]="cmExt" [contextMenu]="cm"
[columns]="scrollableCols" [frozenColumns]="frozenCols">

<ng-template pTemplate="header">
<tr>
<th style="width: 3rem">
<p-checkbox [(ngModel)]="allSelected" (onChange)="toggleSelectAll($event)" [disabled]="checkboxDisabled" [binary]="true"></p-checkbox>
</th>
<th *ngIf="show">Id</th>
<th *ngIf="show">Label</th>
<th *ngIf="Intrnl" pSortableColumn="Label">
<div class="p-d-flex p-jc-between p-ai-center">
Label
<p-sortIcon field="Label"></p-sortIcon>
<p-columnFilter field="sourceLabel" matchMode="in" display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header"></ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="labelList" placeholder="Any"
(onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div>
<span>{{option}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="Alias">
<div class="p-d-flex p-jc-between p-ai-center">
Alias
<p-sortIcon field="Name"></p-sortIcon>
<p-columnFilter field="Alias" matchMode="in" display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header"></ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="AliasList" placeholder="Any"
(onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div>
<span>{{option}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="Type">
Type
<p-sortIcon field="Type"></p-sortIcon>
<p-columnFilter field="mediaType" matchMode="in" display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header"></ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="typeList" placeholder="Any"
(onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div>
<span>{{option}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th>Volume</th>
<th>Container</th>
<th>Tempe</th>
<th>Speed</th>
<th>Throw</th>
<th>Time</th>
<th>Vol</th>
<th>Plate</th>
<th>Row</th>
<th>Col</th>
<th>Name</th>
<th *ngIf="condition">Loc</th>
<th>Comments</th>
</tr>
</ng-template>
</p-table>

Thnaks,