The primeng p-table resizable column issue
<p-table [resizableColumns]="true" columnResizeMode="expand" [value]="data" sortMode="multiple" [style]="{width:'100%'}" [scrollable]="true" [scrollHeight]="height" [columns]="columnList" (onColResize)="onBusinessLogicTableColResize($event)">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of groupHeaderColSpan" [style.width]="col.width + 'px'">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr class="text-center">
<th *ngFor="let col of columnList" [colSpan]="col.colSpan" [rowSpan]="col.rowSpan" pResizableColumn>
{{col?.header}}
</th>
</tr>
<tr class="text-center">
<ng-template ngFor let-col [ngForOf]="columnList">
<th *ngFor="let subheader of col?.subheaders" [colSpan]="subheader.colSpan" [rowSpan]="subheader.rowSpan">
{{subheader?.header}}
</th>
</ng-template>
</tr>
</ng-template>
<ng-template pTemplate="body" let-columnValue let-rowIndex="rowIndex" let-columns="columns">
<ng-template ngFor let-col [ngForOf]="columns">
<ng-template [ngIf]="col.hasOwnProperty('subheaders')" [ngIfElse]="showData">
<td class="ui-resizable-column" *ngFor="let sub of col.subheaders" class="text-center">
{{columnValue[sub.field]}}
</td>
</ng-template>
<ng-template #showData>
<td class="ui-resizable-column">
{{columnValue[col.field]}}
</td>
</ng-template>
</ng-template>
</tr>
</ng-template>
</p-table>
The column list will be like this
columnList = [
{
header: "header1", field: "header1", subheaders: [
{ header: "subheader1", field: "subheader1" },
{ header: "subheader2", field: "subheader2" }
]
}
]
groupHeaderColSpan = [
{ field: 'subheader1', width: '100', child: 2 }
]
I want to apply the re-sizable column to the table, So I have applied it but not working properly as I increase the width of particular column but it increases the width of another column.
in 2nd image I tried to increase the width of MAT column but it increases the width of sub column