[英]primeng table preserve columns widths based on user selection
I have an issue with primeNG table.我对 primeNG 表有疑问。 The table has many columns, on the column toggle, the column width is changing and the table looks like a mess.
表格有很多列,在列切换时,列宽正在变化,表格看起来很乱。
The table Scrollable and Resizable, so according to documentation auto-layout is not supported due to technical reasons.表格可滚动和可调整大小,因此根据文档,由于技术原因不支持自动布局。
So maybe there is some workaround, or is there a way of preserving column size when user change it manually.因此,也许有一些解决方法,或者当用户手动更改列大小时是否有保留列大小的方法。 Any help or idea.. see stackblitz project for repro
任何帮助或想法..请参阅 stackblitz project for repro
https://stackblitz.com/edit/angular-primeng-width-rjgg7f?file=src/app/app.component.ts
https://stackblitz.com/edit/angular-primeng-width-rjgg7f?file=src/app/app.component.ts
<p-table #dt [columns]="selectedColumns" [value]="carsData" [paginator]="true" [rows]="10"[scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
<ng-template pTemplate="caption">
<div style="text-align:left">
<p-multiSelect [options]="columns" [(ngModel)]="selectedColumns" optionLabel="header"
selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}"
defaultLabel="Choose Columns"></p-multiSelect>
</div>
</ng-template>
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th rowspan="2" style="width:10%;text-align: center" pResizableColumn>
</th>
<th *ngFor="let col of columns" pResizableColumn>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" >
<tr>
<td (click)="onRowSelectAction(rowData)">
<div id="btnwrap" style="width:100%">
<p-menu #menu [popup]="true" [model]="items" appendTo="body"></p-menu>
<button type="button" pButton icon="pi pi-ellipsis-h"
style="margin-left:2px;margin-top:2px;text-align: center" [label]="additionalButtonTitle"
(click)="menu.toggle($event)" class="btn btn-dark">
</button>
</div>
</td>
<td *ngFor="let col of columns" class="ui-resizable-column" class="ui-resizable-column">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
I found the problem, it's the first column that contains an action button.我发现了问题,它是包含操作按钮的第一列。 I was setting the column style in pTemplate="header" but it needs to be set in pTemplate="colgroup"
我在 pTemplate="header" 中设置列样式,但需要在 pTemplate="colgroup" 中设置
updated pTemplate="colgroup"更新了 pTemplate="colgroup"
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width:4%;text-align: center">
<col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
</colgroup>
</ng-template>
updated pTemplate="header"更新了 pTemplate="header"
<ng-template pTemplate="header" let-columns>
<tr>
<th rowspan="2" pResizableColumn>
</th>
<th *ngFor="let col of columns" pResizableColumn>
{{col.header}}
</th>
</tr>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.