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?

you are not using primeng table right? Have you trid using simpy assign style to your element — Pardeep Jain, Jun 25 '18 at 07:03
Tried doing that. Doesn't work. for eg: https://www.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? — Vaibhav Tiwari, Jun 25 '18 at 08:23

score 22 · Answer 1 · answered Jun 26 '18 at 05:34

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>

The solution provided by @VaibhavTiwari seems to be correct solution based on your need. Thank you this has helped me as well. — Dong Hoon Kim, May 14 '19 at 14:42

score 2 · Answer 2 · answered Jun 25 '18 at 08:51

2

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

answered Jun 25 '18 at 08:51

Siddharth Shah

81
8

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? – Vaibhav Tiwari Jun 25 '18 at 09:13
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...!! – Siddharth Shah Jun 25 '18 at 10:59
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? – Vaibhav Tiwari Jun 25 '18 at 11:25
you can set dynamic width to columns by using `ngStyle`. – Siddharth Shah Jun 25 '18 at 11:34
If this solution is working fine for you then can you please make as approved solution..! so other can know this is working. – Siddharth Shah Jun 26 '18 at 05:25

score 2 · Answer 3 · answered Feb 02 '21 at 20:01

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

Vignesh palanisamy · Answer 4 · 2019-05-29T11:14:29.693

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>

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

4 Answers4