'primeng table:p-table row grouping width not working when scrollable enable
I am using primeng table with angular.Below is the code for using table:
<p-table [value]="cars" dataKey="brand" [scrollable]="'true'" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th style="width:50px">Vin</th>
<th style="width:50px"> Year</th>
<th style="width:100px"> Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
<tr class="ui-widget-header" *ngIf="rowGroupMetadata2[rowData.brand].index === rowIndex">
<td colspan="4">
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
<span>{{rowData.brand}}</span>
</a>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
<tr>
<td>{{rowData.vin}}</td>
<td>{{rowData.year}}</td>
<td>{{rowData.brand}}</td>
<td>{{rowData.color}}</td>
</tr>
</ng-template>
</p-table>
As you can see the code above, I want to use row group with scrollable property.On running the application I found that width is not working(header width is working only).Below is UI on running application:
If I remove [scrollable] property from table, then width works you can see in below screen shot:
Solution 1:[1]
p-table has class ui-table which as css property table-layout: fixed. This is the reseon you are getting the default result.
To get the result as per your widths, you need to have table-layout: auto.
Put below css in the component you are using p-table,
p-table::ng-deep .ui-table table {
table-layout: auto !important;
}
EDIT:
If you have column value eceeding the column width, then for the colunm width to break your text, assign word-break: break-all to td elemets.
Solution 2:[2]
I was able to solve the issue by using colgroup(with columnresizable).Below is my final code.
<p-table [resizableColumns]="'false'" *ngIf="groupKey" class="png-table" [value]="data" [dataKey]="groupKey" scrollHeight="500px"
[scrollable]="'true'" [columns]="cols">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<ng-container *ngFor="let col of columns">
<col *ngIf="!col.hide" [style.width.px]="col.width">
</ng-container>
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<ng-container *ngFor="let col of columns">
<th [pSortableColumn]="col.field" *ngIf="!col.hide" pResizableColumn pReorderableColumn [class]="col.filter?'sortable':'non-sortable'">
{{col.headerName}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</ng-container>
</tr>
<!-- <tr class="filter-row">
<th *ngFor="let col of columns" [hidden]="col.hide">
<input class="filter-input" *ngIf="col.filter" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
</th>
</tr> -->
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
<tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData[groupKey]].index === rowIndex">
<td colspan="7">
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
<span>{{rowData[groupKey]}}</span>
</a>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex" let-columns="columns">
<tr>
<ng-container *ngFor="let col of columns" [ngSwitch]="col.type">
<td classs="ui-resizable-column" *ngSwitchCase="'del'" [ngStyle]="getHeaderStyle(col)">
<i class="fa fa-close delete-icon g-act-icon" (click)='deleteRow()'></i>
</td>
<td classs="ui-resizable-column" *ngSwitchCase="'edit'" [ngStyle]="getHeaderStyle(col)">
<i class="fa fa-edit edit-icon g-act-icon" (click)='deleteRow()'></i>
</td>
<td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='type'" [ngStyle]="getHeaderStyle(col)">
{{rowData[col.field]}}
</td>
<td classs="ui-resizable-column" [pEditableColumn] *ngSwitchCase="'cep'" [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<p-inputMask (keyup)="onEnterCEP()" mask="aaaaaa-999-999"></p-inputMask>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" [hidden]="col.hide" *ngSwitchCase="'cb'" [ngStyle]="getHeaderStyle(col)">
{{rowData[col.field]}}
</td>
<td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='act'" [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='com'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='tsk'" [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='sco'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" [pEditableColumn] *ngIf="!col.hide && col.type=='hrs'" [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
<td classs="ui-resizable-column" *ngIf="!col.hide && col.type=='des'" [pEditableColumn] [ngStyle]="getHeaderStyle(col)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData[col.field]}}
</ng-template>
</p-cellEditor>
</td>
</ng-container>
</tr>
</ng-template>
Solution 3:[3]
primeng using table display:"block" style. Change it to table
.p-datatable table {
display: table !important;
}
Solution 4:[4]
Use [style.flex-basis] in th and td
eg.
<th [style.flex-basis]="'5em'">Column 1</th>
<td [style.flex-basis]="'5em'">Value 1</td>
Ref: https://github.com/primefaces/primeng/issues/10688#issuecomment-929915095
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Suresh Negi |
| Solution 3 | praveen kumar |
| Solution 4 |