PrimeNg change p-column width with template - primeng

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\'}'
}

Answer 1

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\'}'
}

Answer 2

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

Answer 3

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