I have a PrimeNG datatable as follows, with frozen columns initially loaded:
When i try to hide one of the frozen columns, the table does not realign itself to accomodate the remaining frozen columns in the blank space but rather leaves an empty space as follows:
The more frozen columns i try to hide ,the blank space expands.
Another anomaly observed is when i try to resize my screen dimensions, the attribute responsiveLayout="scroll" does not work and my table breaks as follows:
Here below is the HTML Code:
<div class="col-12">
<p-table #dt
[columns]="selectionService.selectedScrollableColumns"
[loading]="loading"
[value]="selectionService?.listOfRetrievedDepositValuations"
(onHeaderCheckboxToggle)="onClickHeaderCheckbox()"
(onRowSelect)="onRowSelect()" (onRowUnselect)="onRowUnselect()"
(onFilter)="updateGroupingTotalsAfterFilters($event)"
responsiveLayout="scroll" scrollDirection="both"
[paginator]="true" [rows]="25" [scrollable]="true"
[(selection)]="selectionService.selectedDepositValuation"
[resizableColumns]="false" stateStorage="session" stateKey="{{userLoggedInWithTenant}}-valuation-selection"
dataKey="uid"
styleClass="sticky-datatable p-datatable-striped">
<ng-template pTemplate="header" let-columns *transloco="let t">
<tr>
<ng-container *ngFor="let col of columns; let colIndex = index">
<th *ngIf="col.field === 'checkbox'" [style]="getColumnWidth(col.type)"
pResizableColumn [id]="'headerCheckbox'+colIndex" pFrozenColumn [frozen]="col.isFrozenColumn">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngIf="col.field !== 'checkbox'" pResizableColumn pFrozenColumn [frozen]="col.isFrozenColumn" [pSortableColumn]="col.field" style="text-align:center ;" [style]="getColumnWidth(col.type)"
[pTooltip]="col.header" [id]="'header'+colIndex" [ngClass]="col?.class">
<div class="text-overflow-ellipsis p-fluid">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</div>
</th>
</ng-container>
</tr>
<tr>
<ng-container *ngFor="let col of columns; let colIndex = index">
<th *ngIf="col.field === 'checkbox'" [style]="getColumnWidth(col.type)"
pFrozenColumn [frozen]="col.isFrozenColumn">
</th>
<th class="filter-header-height" [ngSwitch]="col.type" *ngIf="col.field!=='checkbox'" style="text-align:center;" pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)"
[id]="'filterHeader' + colIndex">
<div class="p-fluid">
<p-columnFilter type="text" [field]="col.field" [matchMode]="'contains'" *ngSwitchCase="'deposit'"></p-columnFilter>
<p-columnFilter *ngSwitchCase="'code'" [field]="col.field" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect
[options]="getProperty(col.options)" [placeholder]="t('common.choose')"
[emptyFilterMessage]="t('common.empty-message')" [ngModel]="dt.filters[col.field]?.value"
(onChange)="filter($event.value, col.field, 'in')" [panelStyle]="{width:'12em'}" appendTo="body">
</p-multiSelect>
</ng-template>
</p-columnFilter>
<p-columnFilter *ngSwitchCase="'currency'" [field]="col.field" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect
[options]="getProperty(col.options)" [placeholder]="t('common.choose')"
[emptyFilterMessage]="t('common.empty-message')" [ngModel]="dt.filters[col.field]?.value"
(onChange)="filter($event.value, col.field, 'in')" [panelStyle]="{width:'12em'}" appendTo="body">
</p-multiSelect>
</ng-template>
</p-columnFilter>
<ng-bdi-number-filter [width]="100" [decimalPlaces]="2" *ngSwitchCase="'number'"
[value]="dt.filters[col.field.toString()] ? dt.filters[col.field.toString()].value : null"
(onChange)="dt.filter($event, col.field.toString(), 'number_range')">
</ng-bdi-number-filter>
<ng-bdi-number-filter [width]="100" [decimalPlaces]="0" *ngSwitchCase="'value'"
[value]="dt.filters[col.field] ? dt.filters[col.field].value : null"
(onChange)="dt.filter($event, col.field, 'number_range')">
</ng-bdi-number-filter>
</div>
</th>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="body" let-deposit let-columns="columns">
<tr [pSelectableRow]="deposit">
<ng-container *ngFor="let col of columns">
<td *ngIf="col.field==='checkbox'" pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)" >
<p-tableCheckbox [value]="deposit"></p-tableCheckbox>
</td>
<td *ngIf="col.field!=='checkbox'" pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)" [ngClass]="col.scrollable === true ? 'non-frozen' : null">
<div *ngIf="col.type==='deposit'" class="text-left p-fluid">
{{resolveRowData(deposit, col.field)}} </div>
<div *ngIf="col.type==='code'" class="text-center p-fluid">
{{resolveRowData(deposit, col.field)}} </div>
<div *ngIf="col.type==='currency'" class="text-center p-fluid">
<app-currency-flag [isoCode]="resolveRowData(deposit, col.field)"></app-currency-flag>
</div>
<div *ngIf="col.type==='number'" [style.color]="getColor(deposit[col.field])"
class="text-right p-fluid">
<em [ngClass]="determinePerformance(resolveRowData(deposit,col.field))"
*ngIf="col.field==='performance'"></em>
{{resolveRowData(deposit, col.field) | number : '1.2-2'}}
</div>
<div *ngIf="col.type==='value'" [style.color]="getColor(deposit[col.field])"
class="text-right p-fluid"> {{resolveRowData(deposit, col.field) | number : '1.0-0'}}
</div>
</td>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="footer" let-columns>
<tr>
<ng-container *ngFor="let col of columns">
<td [style]="getColumnWidth(col.type)" pFrozenColumn [frozen]="col?.isFrozenColumn">
<span *ngIf="col.field==='depositReferenceCurrencyNegativeValue'"
class="text-right">
{{totalNegativeReferenceCurrencyValue | number : '1.0-0'}} </span>
<span *ngIf="col.field==='depositReferenceCurrencyPositiveValue' "
class="text-right">
{{totalPositiveReferenceCurrencyValue | number : '1.0-0'}} </span>
<span *ngIf="col.field==='depositReferenceCurrencyValue' "
class="text-right">
{{totalReferenceCurrencyValue | number : '1.0-0'}} </span>
<span class="text-right"
*ngIf="col.field!=='depositReferenceCurrencyValue' &&
col.field!=='depositReferenceCurrencyPositiveValue' && col.field!=='depositReferenceCurrencyNegativeValue' ">
</span>
</td>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage" >
<tr>
<td [attr.colspan]="selectionService.frozenColumns.length" *transloco="let t">
{{ t('common.table.empty') }}
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<tr>
<td colspan="3" >
<strong style="float:left">#: {{dt?.totalRecords}}</strong>
</td>
</tr>
</ng-template>
</p-table>
</div>
Below is the code to filter the selected columns:
displayAndHideColumns(event: any): void {
this.selectionService.selectedColumns.forEach(x=>{
if(this.selectionService.frozenColumns.find(col => x.field===col.field)){
x.isFrozenColumn=true;
}
else{
x.isFrozenColumn=false;
}
})
const selectedScrollableColumns = [...this.selectionService.selectedColumns];
this.selectionService.selectedScrollableColumns = [];
this.selectionService.selectedColumns.forEach(x=>{
this.selectionService.selectedScrollableColumns.push(x);
})
this.selectionService.selectedScrollableColumns.sort((a, b) => a.order - b.order);
this.loadFreezeTableHeaders();
}
Any suggestions to the above two issues?