可以在可排序的primeng表中更改列的宽度吗？

Posted 2023-03-05

【中文标题】可以在可排序的primeng表中更改列的宽度吗？

【英文标题】：Can the width of a column be altered in a sortable primeng table?

【发布时间】：2018-12-03 16:45:19

【问题描述】：

我想减小我在primeng 网格中使用的几列的宽度。 但是根据我的理解，我们只能更改使用“p-column”或“th”标签创建的列的宽度。

PFA代码sn-ps如下：html：

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                col.header
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

还有 TS：

this.cols = [
                 field: 'first', header:'FIRST',
                 field: 'second', header: 'SECOND',
                 field: 'third', header: 'THIRD',
                 field: 'fourth', header: 'FOURTH',
                 field: 'fifth', header: 'FIFTH',
                 field: 'sixth', header: 'SIXTH'
            ];

我们如何更改可排序primeng表中动态列的宽度？

【问题讨论】：

你没有使用primeng表吧？您是否尝试过使用 simpy 为您的元素分配样式

试过这样做。不工作。例如：primefaces.org/primeng/#/table/sort 您在此页面上看到的网格：我想减小第一列的宽度并增加第四列的宽度。我们怎样才能做到这一点？

【参考方案1】：

更新 TS 文件为，传递与动态列标题名称类似的所需宽度值：

this.cols = [
field: 'first', header: 'FIRST', width: '20%',
field: 'second', header: 'SECOND', width: '30%',
field: 'third', header: 'SECOND', width: '50%']

使用ngStyle属性绑定width的值：

例如：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" colspan="col.colspan" 
       [ngStyle]="'width': col.width">
                col.header
       <p-sortIcon [field]="col.field"></p-sortIcon>
</th>

【讨论】：

@VaibhavTiwari 提供的解决方案似乎是根据您的需要的正确解决方案。谢谢你，这对我也有帮助。

【参考方案2】：

您可以通过在 <p-table> 标记中添加 来实现。然后您可以为每个动态列定义宽度百分比。

【讨论】：

通过设置宽度：[style]="'width':'100%'" 我能够改变整个表格的宽度。我应该如何传递动态行的宽度？

你想设置列宽还是行宽..？在您的问题中，您正在谈论列，而在这里您提到的是行......！

那是个错误。对于清晰度：this.cols = [ field: 'first', header:'FIRST',width:'5%', field: 'second', header: 'SECOND',width:'85%', 字段：'第三'，标题：'THIRD'，宽度：'10％'，];我想尝试这样的事情。我的列需要具有不同的宽度，这在 html 表格中很容易实现。知道我们如何实现这一目标吗？

您可以使用ngStyle为列设置动态宽度。

如果此解决方案适合您，那么您能否将其作为批准的解决方案..！所以其他人可以知道这是有效的。

【参考方案3】：

如果您使用下面的样式，请添加 colgroup 以定义列的样式。

`     <p-table ...>
        <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width: 40px;">
        </colgroup>
        </ng-template>
       </p-table>`

【参考方案4】：

provide style like this 

[ngStyle]="'width': '100%'"

for eg
 <th *ngFor="let col of columns" [ngSwitch]="col.name">
        <div *ngIf="col.filterable">
          <div *ngIf="col.datatype == 'string'  || col.datatype == 'float'">
            <input pInputText *ngSwitchCase="col.name" type="text" [ngStyle]="'width': '100%'" (keyup.enter)="onFilter($event.target.value, col.dataIndex)" />
          </div>
        </div>
      </th>