Question

如何为PrimeNG数据表绑定列宽？

这两点都不起作用：

<p-dataTable [value]="rows">
    <p-column *ngFor="let col of cols2" [field]="col.FieldName" [header]="col.Caption" [style.width.px]="col.Width" >

也不是：

<p-dataTable [value]="rows" >
    <p-column *ngFor="let col of cols2" [field]="col.FieldName" [header]="col.Caption" [style]="col.Style" >

列的宽度不能像这样定义：

[style]="{width: '180px', 'text-align': 'center'}"

因为它是动态的。

Answer 1

构建列时，将Style设置为对象。这对我有用：

cols2: ColumnSettings[] = [
    {
        FieldName: 'Name',
        Caption: 'Caption',
        Style: { 'width': '180px', 'text-align': 'center' }
    },
    ....
];

Answer 2

改变列宽
使用以下解决方案设置单个列宽：

<p-column field="vin" header="Vin" [style]="{'width': someColWidthVariable }"></p-column>

您也可以指定为[style]="{'width':'22px'}"或[style]="{'width':'20%'}"或绑定到某个变量。一个例子是

<p-dataTable>
  <p-column *ngFor="let col of cols2" [field]="col.fieldName" 
         [header]="col.Caption" [style]="{'width': col.width }">
  </p-column>
</p-dataTable>

自动调整列
如果您想要Autofit列以便根据内容自动调整宽度，则将table-layout设置为auto。默认情况下，它在primeng中“固定”，这意味着列宽均匀分布。

e.g。

<p-dataTable [tableStyle]="{'table-layout':'auto'}" class="composite-table" [(value)]="model.calcLines"

Answer 3

这应该有效：

[tableStyle]="{width: '180px','text-align':'center'}"

请注意，text-align必须为'text-align'而不是text-align

<p-dataTable  [tableStyle]="{width: '180px','text-align':'center'}"  >
  <p-column *ngFor="let col of cols2" [field]="col.fieldName" 
         [header]="col.Caption">
  </p-column>
</p-dataTable>

这是一个有效的Plunker

Answer 4

您可以像这样设置表格宽度

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [responsive]="true" [stacked]="stacked" [style]="{'width': '500px'}">
    <p-header>Responsive</p-header>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

如果您知道有多少列，那么您可以根据需要进行排列，如果您需要180px的两列，然后将表格宽度设置为360像素，您将有两个相等的列，宽度为180px。

Answer 5

在.ts文件中指定样式，如下所示＆＃34;样式＆＃34; this.cols = [ { field: 'tableName', header: 'Table Name', Style: {width: '180px', 'text-align': 'center'}, sort : 'true' }, .....

然后在循环中添加名称dynamic

<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [style]="col.Style" [sortable]="col.sort"></p-column>

数据表：绑定列宽

5 个答案:

这是一个有效的Plunker