primeNG dataTable colspan tbody - solution

Question

Я столкнулся с этой проблемой, как и многие другие, где вам нужен промежуток col для tbody, а не только заголовки, указанные в документации PrimeNG. Я попытался использовать некоторые директивы и Javascript, чтобы добавить их программно. Здесь я демонстрирую код. Я не уверен, является ли это универсальным решением и будет работать для всех, но это определенно станет стартером для решения вашей проблемы.

Answer 1

Создать пользовательскую директиву:

colspan.ts 

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ 
selector:'[inColSpan]', 
inputs:['description:inColSpan'] 
}) 

export class ColSpanDirective { 

constructor(private el: ElementRef) {} 

set description(desc:string){ 
    let row = document.createElement("tr"); 
    let data = document.createElement("td"); 
    data.colSpan = 3; 
    let description = document.createTextNode(desc); 
    data.appendChild(description); 
    row.appendChild(data); 
    this.insertAfter(this.el.nativeElement.parentNode.parentNode.parentNode,row); 
} 

insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling); 
} 
} 

Тогда вы можете просто передать в данных в директиве. Я вставив свой код:

<p-dataTable [value]="products" [responsive]="true" styleClass="margin-top-20"> 

      <p-column field="productNames" header="Product Item" styleClass="item-width"> 
       <template let-col let-product="rowData" pTemplate type="body"> 
        <h4><tr>{{product[col.field][0]?.name}}</tr></h4> 
        <p inColSpan="{{ product['productDescriptions'][0]?.description }}"></p> 
       </template> 
      </p-column> 

      <p-column field="price" header="Price" styleClass="price-width"></p-column> 

      <p-column styleClass="select-width"> 
       <template pTemplate type="header"> 
        <span class="ui-column-title">Select</span> 
       </template> 
       <template let-col let-product="rowData" pTemplate type="body"> 
        <p-checkbox name="selectOrderItem" [value]="stringifyProductItem(product)" 
           [(ngModel)]="selectedProductItemStrings" 
           (onChange)="setSubTotal()"></p-checkbox> 
       </template> 
      </p-column> 

     </p-dataTable>