Not able to search in p-table frozen columns
-
- Posts: 4
- Joined: 08 Jan 2019, 14:47
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 ?
-
- Posts: 4
- Joined: 08 Jan 2019, 14:47
<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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 20 guests