CODEWITHSUNDEEP
user-interfaceangularprimeng
Kutas Tomy
Kutas Tomy

Reputation: 349

PrimeNG - dataTable header grouping with headerColumnGroup

I have to group some of the table headers. I made a test using the following code, to see how the p-headerColumnGroup is working.

<p-dataTable [value]="sales">
<p-headerColumnGroup>
    <p-row>
        <p-column header="Brand" rowspan="3"></p-column>
        <p-column header="Sale Rate" colspan="4"></p-column>
    </p-row>
    <p-row>
        <p-column header="Sales" colspan="2"></p-column>
        <p-column header="Profits" colspan="2"></p-column>
    </p-row>
    <p-row>
        <p-column header="Last Year"></p-column>
        <p-column header="This Year"></p-column>
        <p-column header="Last Year"></p-column>
        <p-column header="This Year"></p-column>
    </p-row>
</p-headerColumnGroup>

<p-column value="brand"></p-column>
<p-column field="lastYearSale"></p-column>
<p-column field="thisYearSale"></p-column>
<p-column field="lastYearProfit"></p-column>
<p-column field="thisYearProfit"></p-column>

<p-footerColumnGroup>
    <p-row>
        <p-column footer="Totals:" colspan="3"></p-column>
        <p-column footer="$506,202"></p-column>
        <p-column footer="$531,020"></p-column>
    </p-row>
</p-footerColumnGroup>

The code should be correct, but the result is not what I'm expecting. I'm using primeng 1.0.0-beta.3

The table looks like:

Upvotes: 2

Views: 3230

Answers (1)

Amy
Amy

Reputation: 131

enter image description herePrimeNG now available 1.0.0-rc.3.When i test with 1.0.0-rc.3 version that all things work.Check PrimeNG version here https://www.npmjs.com/package/primeng and you need to add <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" /> css files in index.html

Upvotes: 1

Related Questions