Angular PrimeNG DataTable sort

Question

The code link is:https://plnkr.co/edit/V9ZkLzDeVo15ngIu2Glo?p=preview

My template is:

<p-dataTable [value]="cars">
<p-headerColumnGroup>
    <p-row>
        <p-column header="Vin" rowspan="2" [sortable]="true"></p-column>
        <p-column header="Info" colspan="3"></p-column>
    </p-row>
    <p-row>
        <p-column header="Year" [sortable]="true"></p-column>
        <p-column header="Brand" [sortable]="true"></p-column>
        <p-column header="Color" [sortable]="true"></p-column>
    </p-row>
</p-headerColumnGroup>
<p-column field="vin"></p-column>
<p-column field="year"></p-column>
<p-column field="brand"></p-column>
<p-column field="color"></p-column>

The sort function will not work when there is a colgroup header. Can someone please suggest me on this?

Harry Ninh · Accepted Answer · 2017-08-21 03:11:08Z

2

That's because p-dataTable could not find connections between headers and columns. Adding sortField to header will help establishing them:

<p-headerColumnGroup>
    <p-row>
        <p-column header="Vin" sortField="vin" rowspan="2" [sortable]="true"></p-column>
        <p-column header="Info" colspan="3"></p-column>
    </p-row>
    <p-row>
        <p-column header="Year" sortField="year" [sortable]="true"></p-column>
        <p-column header="Brand" sortField="brand" [sortable]="true"></p-column>
        <p-column header="Color" sortField="color" [sortable]="true"></p-column>
    </p-row>
</p-headerColumnGroup>

answered Aug 21, 2017 at 3:11

Harry Ninh

16.8k5 gold badges64 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular PrimeNG DataTable sort

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related