PrimeNG dataTable rowspan пример

Question

Я использую PrimeTG dataTable. Я хотел бы, чтобы некоторые строки охватывали несколько столбцов в содержимом таблицы. Существует отличный пример для этого в заголовках (http://www.primefaces.org/primeng/#/datatablegroup), но я не уверен, как это сделать в содержимом таблицы. Количество строк будет динамическим (у некоторых могут быть Weather and Rain, у других может быть Rain, Water Level и Streamflow). Это можно сделать?

visual for rowspan > 1

Answer 1

я столкнулся с той же проблемой. Я не мог разобраться в родном решении, и поэтому сделал это.

<p-dataTable [value]="checkout.items" [footerRows]="footerRows"> 
     <p-column field="main_title" header="Items" styleClass="item-width"> 

      <template let-col let-mainVO="rowData"> 

       <tr><h4>{{mainVO[col.field].main_title}}</h4></tr> 
       <tr *ngFor="let c of mainVO[col.field].childVO"> 
        <td>{{c.title}}</td> 
        <td>{{c.price}}</td> 
       </tr> 
       <tr><h4>Discounts:</h4></tr> 
       <tr *ngFor="let d of mainVO[col.field].discounts"> 
        <td>{{d.title}}</td> 
        <td>{{d.price}}</td> 
       </tr> 
       </template> 
     </p-column> 
     <p-column field="quantity" header="Quantity"></p-column> 
     <p-column field="price" header="Price"></p-column> 
     <p-column field="action" header="Action"> 
      <template> 
       <a href="javascript:void(0)">Delete</a> 
      </template> 
     </p-column> 

    </p-dataTable> 

Вот мой JSON:

this.checkout = 
     { 
      Message: "CheckoutList", 

      items: [ 
       { 
        mainVO:{ 

         main_title: "Value Pack Combo", 

         childVO: [ 
          { 
           title: "Financial e-Tutorial", 
           price: "$55" 
          }, 

          { 
           title: "e-Tutorial", 
           price: "$75" 
          }, 
          { 
           title: "Ratios e-Tutorial", 
           price: "$85" 
          }, 

          { 
           title: "economics e-Tutorial", 
           price: "$95" 
          } 
         ], 
         discounts: [ 
          { 
           title: "Discount price 1", 
           price: "$120" 
          }, 
         ] 
        }, 

        quantity: "1", 

        price: "300", 
        currency: "CAD" 

       }, 
       { 
        mainVO:{ 

         main_title: "Securities Pack Combo", 

         childVO: [ 
         { 
          title: "atios e-Tutorial", 
          price: "$55" 
         }, 

         { 
          title: "omicsrial", 
          price: "$75" 
         }, 
         { 
          title: "e-Tutorial", 
          price: "$85" 
         }, 

         { 
          title: "Micro Tutorial", 
          price: "$95" 
         } 
         ], 
         discounts: [ 
         { 
          title: "Discount price 1", 
          price: "$120" 
         }, 
         ] 
        }, 

        quantity: "1", 

        price: "300", 
        currency:"CAD" 
       }, 
      ], 

     }