web-dev-qa-db-fra.com

La largeur d'une colonne peut-elle être modifiée dans une table primeng triable?

Je veux réduire la largeur de quelques colonnes que j'utilise dans la grille primeng. Cependant, selon ma compréhension, nous ne pouvons changer la largeur des colonnes que nous créons en utilisant "p-column" ou la balise "th".

Extraits de code PFA ci-dessous: 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>

Et le 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'}
            ];

Comment pouvons-nous changer la largeur d'une colonne dynamique dans une table primeng triable?

angularhtml-tableprimengprimeng-datatableprimeng-turbotable
6
Vaibhav Tiwari

fichier TS mis à jour en tant que, transmettez la valeur de largeur requise similaire à celle du nom d'en-tête pour les colonnes dynamiques:

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

Utilisez l'attribut ngStyle pour lier la valeur de width:

par exemple:

<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

Vous pouvez le faire en ajoutant width = "100%" dans votre <p-table> tag. Et puis vous pouvez définir le pourcentage de largeur de chaque colonne dynamique.

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