Build rowgroup in dataTable of PrimeNG

[vuongvm]

Hi all,

I am trying to build table like below:


And I have coded below:

Code: Select all

<p-dataTable [(value)]="propertys" emptyMessage="{{ 'LABEL.NO_RECORDS_FOUND' | translate }}"
		[lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadPageLazy($event)"
		[rows]="mainConfig.defaultPaging" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="mainConfig.paging">
		<p-headerColumnGroup>
			<p-row>
				<p-column styleClass="pmR-table__head w-5" [header]="'LABEL.NUMERICAL_ORDER' | translate"></p-column>
				<p-column styleClass="pmR-table__head w-12" [header]="'PROPERTY_WARE.CUSTOMER_NAME_JAPAN' | translate"
					field="ownerName" [sortable]="true"></p-column>
				<p-column styleClass="pmR-table__head" [header]="'PROPERTY_WARE.CUSTOMER_NAME_ENGLISH' | translate"
						  [sortable]="true" field="customerAddress"></p-column>
				<p-column styleClass="pmR-table__head w-12" [header]="'PROPERTY_WARE.NUMBER_OF_PROPERTIES' | translate"
					field="propertyName" [sortable]="true"></p-column>
				<p-column [colspan]="numberOfProperties" styleClass="pmR-table__head" [header]="'PROPERTY_WARE.PROPERTY_ADDRESS' | translate"
					field="propertyAddress1" [sortable]="true"></p-column>
				<p-column styleClass="pmR-table__head w-10" [header]="'PROPERTY.LIST.CREATE_TIME' | translate" 
					field="createdDatetime" [sortable]="true"></p-column>
				<p-column styleClass="pmR-table__head oha-ved" [header]="'PROPERTY.LIST.VIEW' | translate"></p-column>
				<p-column styleClass="pmR-table__head oha-ved" [header]="'LABEL.DELETE' | translate"></p-column>
			</p-row>
		</p-headerColumnGroup>
		<p-column [rowspan]="numberOfProperties" styleClass="text-center">
			<ng-template let-i="rowIndex" pTemplate="body"> {{ i + 1 }} </ng-template>
		</p-column>
		<p-column [rowspan]="numberOfProperties" styleClass="text-left" field="ownerName"></p-column>
		<p-column [rowspan]="numberOfProperties" styleClass="text-left" field="ownerName"></p-column>
		<p-column [rowspan]="numberOfProperties" styleClass="text-left" field="numberOfProperties"></p-column>
		<p-column >
			<ng-template let-property="rowData" pTemplate="body">
				<tr *ngFor="let address of property.addressProperty">
					<td>{{ address }}</td>
				</tr>
			</ng-template>
		</p-column>
		<p-column [rowspan]="numberOfProperties" styleClass="text-center" field="createdDatetime" [sortable]="true">
			<ng-template let-property="rowData" pTemplate="body">
				{{ property.createdDatetime | date:'yyyy/MM/dd HH:mm:ss' }}
			</ng-template>
		</p-column>
		<p-column styleClass="text-center">
			<ng-template let-property="rowData" pTemplate="body">
				<a routerLink="/property-ware/view/{{property.id}}">
					<i class="fa fa-eye icon-edit"></i>
				</a>
			</ng-template>
		</p-column>
		<p-column styleClass="text-center">
			<ng-template let-property="rowData" let-i="rowIndex" pTemplate="body">
				<i (click)="doDelete(property, i)" class="fa fa-remove icon-delete"></i>
			</ng-template>
		</p-column>
	</p-dataTable>

And result is not expected:



Please help me in this case!
many thank!