Two variable in a column in Angular 5 primeng

Question

How do I do so that the name and surname are in the same column?

<p-dataTable [value]="users" expandableRows="true" selectionMode="single" 
   [(selection)]="selectedUser" (onRowSelect)="onRowSelect($event)" 
   [paginator]="true" [rows]="10" [globalFilter]="gb" #dt>

  <p-column expander="true" styleClass="col-icon"></p-column>
  <p-column field="id" header="Identificador"></p-column>
  <p-column field="name" header="Names"></p-column>
  <p-column field="surname" header="Surnames"></p-column>
</p-dataTable>

Answer 1

Use templating functionnality. Something like :

<p-column field="name" header="Names">
    <ng-template let-user="rowData" pTemplate="body">
        {{user.name}} {{user.surname}}
    </ng-template>
</p-column>

See StackBlitz