web-dev-qa-db-ja.com

ソート可能なprimengテーブルで列の幅を変更できますか？

Primengグリッドで使用しているいくつかの列の幅を小さくしたいのですが。ただし、私の理解によると、「p-column」または「th」タグを使用して作成する列の幅のみを変更できます。

以下のPFAコードスニペット：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テーブルの動的列の幅をどのように変更できますか？

angularhtml-tableprimengprimeng-datatableprimeng-turbotable
6
Vaibhav Tiwari

更新されたTSファイルとして、動的列のヘッダー名と同様の必要な幅の値を渡します。

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

NgStyle属性を使用して幅の値をバインドします。

例えば：

<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>
13
Vaibhav Tiwari

これを行うには、<p-table>タグにwidth = "100％"を追加します。そして、各動的列に幅の割合を定義できます。

1
Siddharth Shah
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>
0
Vignesh palanisamy