Not able to search in p-table frozen columns

UI Components for Angular
Post Reply
gauravarora
Posts: 4
Joined: 08 Jan 2019, 14:47

08 Jan 2019, 14:49

Hi, I am not able to use search filter in frozen table i.e. it's not searching in the frozen columns using filterGlobal($event.target.value, 'contains'). Is there any way to handle this ?

yigitfindikli
Posts: 286
Joined: 08 Aug 2018, 14:09

09 Jan 2019, 09:09

Can i see your code ?

gauravarora
Posts: 4
Joined: 08 Jan 2019, 14:47

10 Jan 2019, 07:42

yigitfindikli wrote:
09 Jan 2019, 09:09
Can i see your code ?
<p-table [value]="departmentItemData" [columns]="selectedColumns" #departmentItemTable [rows]="25" paginatorPosition="bottom"
[rowsPerPageOptions]="[25, 50, 75, 100]" [paginator]="true" (onFilter)="searchDepartmentItems($event)" [scrollable]="true"
class="tableWithfilters frozenTable" styleClass="scrollableTable" [frozenColumns]="frozenCols" frozenWidth="180px"
[reorderableColumns]="true" (onColReorder)="saveColumnsOrder($event)">
<ng-template pTemplate="caption">
<div class="filterBar d-flex w-100 j-space-between">
<div class="filterBar d-flex align-items-center">
<div class="filterBarOptions">
<div class="customSearch">
<input type="text" pInputText placeholder="{{'common.search' | translate}}" class="form-control searchUser"
(keyup)="checkInputLength()" #searchInput (input)="departmentItemTable.filterGlobal($event.target.value, 'contains')"
[disabled]="noDepartmentMsg">
</div>
</div>
</div>
</div>
<div class="pTableMultiSelect">
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" maxSelectedLabels="0"
selectedItemsLabel="" (onChange)="onColumnChange($event)" [filter]="false" [disabled]="noDepartmentMsg">
<p-header>
<span *ngIf="selectedColumns.length !== cols.length else default">{{'common.selectAll' | translate}}</span>
<ng-template #default><span>{{'common.removeAll' | translate}}</span></ng-template>
</p-header>
</p-multiSelect>
</div>
</ng-template>
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" class="scollableTableCol">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" pReorderableColumn [pReorderableColumnDisabled]="col.header === 'Department'" [class.hiddenColumn] = "col.header === 'Department'">
<span>{{col.header}}</span>
<p-sortIcon [field]="col.field"></p-sortIcon>
<i class="pi pi-bars" *ngIf="col.header !== 'Department'"></i>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-department let-rowIndex="rowIndex" let-columns="columns">
<tr>
<td *ngFor="let col of columns" [class.hiddenColumn] = "col.header === 'Department'">

<span (click)="redirectToItemPage(col.header, department)"
class="ellipsis-text">
{{department[col.field]}}
</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage" let-department>
<div class="noItemFound">
<p *ngIf="filteredRowLength === 0">{{'common.noResultFound' | translate}}</p>
<p *ngIf="noDepartmentMsg">{{'itemMovement.departmentItems.noDepartmentForDate' | translate}}.</p>
</div>
</ng-template>
</p-table>

Frozen Col

this.frozenCols = [
{ field: 'name', header: 'Department' }
];

Scrollable Cols
export const DepartmentItemTableCols = [
{ field: 'netSalesAmt', header: 'Net sales amount' },
];

I'm not able to search in frozen cols

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests