Can the width of a column be altered in a sortable primeng table?

Question

I want to reduce the width of a few columns I'm using in primeng grid. However as per my understanding, we can only change the width of columns we create using "p-column" or the "th" tag.

PFA code snippets below: 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>

And the 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'}
            ];

How can we change the width for a dynamic column in sortable primeng table?

Reorder

you are not using primeng table right? Have you trid using simpy assign style to your element – Brokaw

Tried doing that. Doesn't work. for eg: primefaces.org/primeng/#/table/sort The grid you see on this page: I want to reduce the width of the first column and increase that of fourth. How can we achieve the same? – Reorder

Answer 1

updated TS file as, Pass the required width value similar to that of header name for the dynamic columns:

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

Use ngStyle attribute to bind the value of width:

eg:

<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>

Reorder

The solution provided by @VaibhavTiwari seems to be correct solution based on your need. Thank you this has helped me as well. – Recrudesce

Answer 2

If you are using style below, add colgroup to define style for column.

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

Kirsten

Answer 3

You can do it by adding width="100%" in your <p-table> tag. And then you can define width percentage to each dynamic column.

Jervis

By setting the width: [style]="{'width':'100%'}" I was able to alter the width of the entire table. How should I pass the width of dynamic rows? – Reorder

do you want to set width of a column or row..? In your question you are talking about columns and here you are mentioning about rows...!! – Jervis

That was a mistake. For Clarity : this.cols = [ { field: 'first', header:'FIRST',width:'5%'}, { field: 'second', header: 'SECOND',width:'85%'}, { field: 'third', header: 'THIRD',width:'10%'}, ]; I want to attempt something of this sort. My columns need to be of different widths which is easily achievable in html tables. Any idea how we can achieve that? – Reorder

you can set dynamic width to columns by using ngStyle. – Jervis

If this solution is working fine for you then can you please make as approved solution..! so other can know this is working. – Jervis

Answer 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>

Pirzada