PrimeNG dataTable rowspan example

Question

I am using PrimeNG dataTable. I would like to have some rows span several columns within the content of the table. There is a great example for doing this within the headers (http://www.primefaces.org/primeng/#/datatablegroup) but I'm not sure how to do this within the content of the table. The number of rows will be dynamic (some may have Weather and Rain, others may have Rain, Water Level, and Streamflow). Can this be done?

visual for rowspan > 1

Answer 1

I faced the same problem. I couldn't really figure out a native solution and so I did this.

<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>

Here is my 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"
                },
            ],

        }