PrimeNg change p-column width with template

Question

I get following error when trying to set dynamic column width ERROR Error: Cannot find a differ supporting object '{width: '180px', 'text-align': 'center'}'

  <p-dataTable [value]="employees">
      <p-header>Employee List</p-header>
      <p-column *ngFor="let userColumn of userColumns" 
        [field]="userColumn.field"          [header]="userColumn.title" 
        [sortable]="userColumn.sort" [style]="userColumn.myStyle">
        </p-column>
  </p-dataTable>

userColumns defined as

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{width: \'180px\', \'text-align\': \'center\'}'
    }

i want to provide different width to different columns in my table and through externally defined userColumns definition. — Vivek, Jul 03 '17 at 06:42
I see this issue discussed here, don't understand answer though https://github.com/primefaces/primeng/issues/584 — Vivek, Jul 03 '17 at 18:31
"myStyle" is being treated as an string instead of object. If you fix the structure then it should work. — Murgin Boo, Nov 06 '18 at 20:35

score 0 · Answer 1 · answered Jul 04 '17 at 20:35

Try changing the definition of your styling and add a single quote around "width" like this:

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{\'width\': \'180px\', \'text-align\': \'center\'}'
    }

score 0 · Answer 2 · answered Jul 13 '17 at 15:39

Solution is to define myStyle as Object rather than string. Otherwise even if you don't get differ error but width will not be set.

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
       myStyle : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      myStyle: {width: '180px', 'text-align': 'center'}
    }

score 0 · Answer 3 · answered Jan 28 '22 at 12:11

In primeng 12 they removed colgroup template so if you are using colgroup over the application need to remove because custom width is not working for column if you are using scrollable check migration guide.

link:https://github.com/primefaces/primeng/wiki/Migration-Guide

solution: you need to add same width for both tags <th [style]="'width':'100px'"> and <td [style]="'width':'100px'"> if you are using dynamic columns then add one more property width like below

[{ header: "Name", field: "name", width: '100px' }] // column object array object

<p-table [value]="data" [columns]="ColumnObjectArray">   
<ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns; let idx=index;" class="" 
                           [style]="'width':col.width">{{col.header}}</th>
               </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns" [style]="'width':col.width">
                       {{data[col.field]}}
                    </td>
                </tr>
</ng-template>
</p-table>

try this one you will definitely get the responsive width to table and also you will get the custom column and header width hope this will work for you

PrimeNg change p-column width with template

3 Answers3