PrimeNg change p-column width with template

2
votes

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\'}'
    }
2
primengprimeng-datatable
If i define style inline there are no issues - Vivek
are you looking to add styles to the data? - Aravind
i want to provide different width to different columns in my table and through externally defined userColumns definition. - Vivek
I see this issue discussed here, don't understand answer though github.com/primefaces/primeng/issues/584 - Vivek
have you find any solution - Rituraj ratan

2 Answers

0
votes

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

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