Primeng: Sort is not working for columns when sortable is placed on columns in p-headerColumnGroup tag

Created on 1 Feb 2017 · 8Comments · Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.
http://plnkr.co/edit/NtWWnN

You can download my demo at https://github.com/yuvalbl/ng2-grids-demo
then do (also in the repo readme.md):
npm install angular-cli -g
npm install
ng serve

Now you can see the app on http http://localhost:4200/
issue can be seen on http://localhost:4200/grid1

Current behavior

Table when sortable tag is placed on columns in p-headerColumnGroup do not sort when header is pressed (only first few entries are sorted)

Expected behavior

Should be sort all entries

Minimal reproduction of the problem with instructions
Download my demo from above and follow the install steps to view the issue.
OR
create a table (with at least 10 lines) with p-headerColumnGroup tag, and place a sortable="true" on one of the columns
Click on the column header to sort and see the issue arise.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Angular version: 2.0.X

2.3.1
PrimeNG version: 2.0.X

2.0.0-rc.2
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

chrome 56
Language: [all | TypeScript X.X | ES6/7 | ES5]
TypeScript
Node (for AoT issues): node --version =

Source

yuvalbl

Most helpful comment

I found a solution into my project
Into my html file :

<p-column [header]="column.label" sortable="custom" (sortFunction)="mySort($event, column.field)"></p-column>

And into my component class

mySort(event: any, field: string) {
    if (event.order === 1) {
      this.rows.sort((a, b) => {
        if (typeof a[field] === 'string') {
          const sortDesc = a[field] < b[field] ? -1 : 0;
          return a[field] > b[field] ? 1 : sortDesc;
        }
        return a[field] - b[field];
      });
    } else {
      this.rows.sort((a, b) => {
        if (typeof a[field] === 'string') {
          const sortDesc = a[field] < b[field] ? 1 : 0;
          return a[field] > b[field] ? -1 : sortDesc;
        }
        return b[field] - a[field];
      });
    }
    this.rows = [...this.rows];
  }

Hope, this help you

arnaudforaison on 19 Jun 2017

👍3

All 8 comments

Hey guys,
did you manage to reconstruct it, or do you need more info for this issue?

yuvalbl on 12 Feb 2017

Hello,
I have the same issue with version 4.0.1 or 4.0.0-rc5.
@yuvalbl do you have a fix for this ?
Thx

arnaudforaison on 16 May 2017

Any help ?
I would be great if someone explain a fix.
I would continue to find where the problem come from.

arnaudforaison on 19 May 2017

<p-dataTable [value]="data">
<p-headerColumnGroup>
<p-row>
<p-column header="MyHeader" rowspan="2" [sortable]="true"></p-column>
...
Table does not sort at all. Even I try to put the sortable in header and column field but no luck.
Any suggestion?

mpulido73 on 5 Jun 2017

I am having exactly same issue...

ki2ga on 19 Jun 2017

I found a solution into my project
Into my html file :

<p-column [header]="column.label" sortable="custom" (sortFunction)="mySort($event, column.field)"></p-column>

And into my component class

mySort(event: any, field: string) {
    if (event.order === 1) {
      this.rows.sort((a, b) => {
        if (typeof a[field] === 'string') {
          const sortDesc = a[field] < b[field] ? -1 : 0;
          return a[field] > b[field] ? 1 : sortDesc;
        }
        return a[field] - b[field];
      });
    } else {
      this.rows.sort((a, b) => {
        if (typeof a[field] === 'string') {
          const sortDesc = a[field] < b[field] ? 1 : 0;
          return a[field] > b[field] ? -1 : sortDesc;
        }
        return b[field] - a[field];
      });
    }
    this.rows = [...this.rows];
  }

Hope, this help you

arnaudforaison on 19 Jun 2017

👍3

Duplicate of #2900