title: How to concatenate columns in a p-table with dynamic columns
body: <p>My data source serves a json data file in the following format.</p>
  
  <p><strong>subjects.json</strong></p>
  
  <pre><code>[
    {
      "subjectCode": "1111",
      "subjectTitle": "English Literature",
      "subjectGroup": "English",
      "status": "Available"
    },
    {
      "subjectCode": "2222",
      "subjectTitle": "Algebra III",
      "subjectGroup": "Mathematics",
      "status": "Not Available"
    }
  ]
  </code></pre>
  
  <p>Here is the interface class used to read the data file.</p>
  
  <p><strong>subject.model.ts</strong></p>
  
  <pre><code>export interface Subject {
      subjectCode: string;
      subjectTitle: string;
      subjectGroup: string;
      status: string;
  }
  </code></pre>
  
  <p>and the component file</p>
  
  <p><strong>subject.component.ts</strong></p>
  
  <pre><code>export class SubjectComponent implements OnInit {
  
      searchResults: Subject[];
  
      // lots of other stuff
  
  }
  </code></pre>
  
  <p>For UI design reasons, I need to display the subject code and subject title as a single column in the browser. This is easily done if I used static columns.</p>
  
  <p><strong>subject.component.html with static columns</strong></p>
  
  <pre><code>&lt;p-table [columns]="cols" [value]="searchResults"&gt;
      &lt;ng-template pTemplate="header" let-columns&gt;
          &lt;tr&gt;
              &lt;th&gt;Subject&lt;/th&gt;
              &lt;th&gt;Group&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;          
          &lt;/tr&gt;
       &lt;/ng-template&gt;
       &lt;ng-template pTemplate="body" let-rowData&gt;
           &lt;tr&gt;
              &lt;td&gt;{{rowData.subjectCode}}&amp;nbsp;{{rowData.subjectTitle}}&lt;/td&gt;
              &lt;td&gt;{{rowData.subjectGroup}}&lt;/td&gt;
              &lt;td&gt;{{rowData.status}}&lt;/td&gt;
           &lt;/tr&gt;
       &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  
  <p>However, when I tried doing the same with dynamic columns, I cannot find a way to do it with the {{rowData[col.field]}} parameters that dynamic column uses, and I can't find any mention of how to do it in the PrimeNG documentation.</p>
  
  <p><strong>modified subject.component.ts to use dynamic columns</strong></p>
  
  <pre><code>export class SubjectComponent implements OnInit {
  
      searchResults: Subject[];
  
      // table columns
      this.cols = [
          { field: 'subjectCode', header: 'Subject code'},
          { field: 'subjectTitle', header: 'Subject title'},
          { field: 'subjectGroup', header: 'Group'},
          { field: 'status', header: 'Status'}
      ];
  
  // lots of other stuff
  }
  </code></pre>
  
  <p><strong>modified subject.component.html with dynamic columns</strong></p>
  
  <pre><code>&lt;p-table [columns]="cols" [value]="searchResults"&gt;
      &lt;ng-template pTemplate="header" let-columns&gt;
          &lt;tr&gt;
              &lt;th *ngFor="let col of columns"&gt;
                  {{col.header}}
                  &lt;p-sortIcon [field]="col.field"&gt;&lt;/p-sortIcon&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
          &lt;tr&gt;
              &lt;td *ngFor="let col of columns"&gt;
                  {{rowData[col.field]}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  
  <p>How do I concatenate the subject code and title from the interface into a single column in a p-table using dynamic columns?</p>