Primeng: The array of objects displayed in the p-table is not displayed in original order when using row grouping

[sunilkumaar]

It's working fine in FireFox browser and how to fix the display order error in Chrome browser.

Example :
this.data = [
{ code: "AAA", color: "blue", version: 2 },
{ code: "AAA", color: "blue", version: 1 },
{ code: "BBB", color: "red", version: 3 },
{ code: "BBB", color: "black", version: 2 },
{ code: "BBB", color: "black", version: 1 },
{ code: "CCC", color: "yellow", version: 1 },
{ code: "CZZ", color: "blue", version: 1 },
{ code: "DDD", color: "black", version: 1 },
{ code: "DDD", color: "black", version: 1 },
{ code: "EEE", color: "blue", version: 2 },
{ code: "EEE", color: "black", version: 1 },
{ code: "FFF", color: "black", version: 1 },
{ code: "FCG", color: "black", version: 1 },
{ code: "GGG", color: "black", version: 1 },
{ code: "GVY", color: "black", version: 1 },
{ code: "HHH", color: "black", version: 1 },
{ code: "HFG", color: "black", version: 1 },
{ code: "IKL", color: "black", version: 1 },
{ code: "IML", color: "black", version: 1 }
]

Current behavior
The array of objects order's changed.
The data sent to the table component (input [value]) are note rendered in the same exact order.
The data displayed has values that do not respect their original order.

• Angular version: 5.2.3
• 
  
  
  
  • PrimeNG version: 5.2.0
  
  
• 
  
  
  
  • Language: TypeScript 2.7.1
  
  
• 
  
  
  
  • Node (for AoT issues): node --version = v8.9.4
  
  

[AndreaBarbasso]

5018

[jw61]

I've reported this issue too. It's happening because the data is being sorted even when no sorting has been requested, or before the user has clicked on a column to specify which field to sort on. Until this is fixed, my solution to this is to specify a custom sort function that prevents sorting if no sorting has been requested. (As an added bonus, this should make TurboTable _even_ faster too!).

The code below is the example customSort function copied from the documentation, but with an extra if statement at the start to prevent unwanted sorting

TS File:

import { SortEvent } from 'primeng/components/common/sortevent';
...
  // Custom sort method to prevent sorting before sort field has been specified
  // Written for single sorting mode only
  customSort(event: SortEvent) {
    // Do no sorting if sort field not specified
    if (!event.field) {
      return;
    }

    event.data.sort((data1, data2) => {
      let value1 = data1[event.field];
      let value2 = data2[event.field];
      let result = null;

      if (value1 == null && value2 != null)
        result = -1;
      else if (value1 != null && value2 == null)
        result = 1;
      else if (value1 == null && value2 == null)
        result = 0;
      else if (typeof value1 === 'string' && typeof value2 === 'string')
        result = value1.localeCompare(value2);
      else
        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

      return (event.order * result);
    });
  }

Template file:

<p-table [columns]="cols" [value]="cars" (sortFunction)="customSort($event)" [customSort]="true">

If this is too complicated and you're just looking for a quick way to disable all sorting, you could always try setting sortMode="none" (undocumented, but it works). Or you could also specify an empty sortFunction so that no sorting happens.

[sunilkumaar]

The array of objects displayed in table does not respect its original order while row grouping
I Need to arrange the data in order by brand & vin. First the order should be arranged based on brand then vin field.
EX:

{
"data":[
{"vin":"AAA","brand":"VW","year":1998,"color":"White","price":10000},
{"vin":"AAA","brand":"Mercedes","year":1985,"color":"Green","price":25000},
{"vin":"AAA","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
{"vin":"AAA","brand":"Audi","year":1970,"color":"Black","price":12000},
{"vin":"AAA","brand":"Volvo","year":1992,"color":"Red","price":15500},
{"vin":"BBB","brand":"VW","year":1993,"color":"Maroon","price":40000},
{"vin":"AAA","brand":"Fiat","year":1964,"color":"Blue","price":25000},
{"vin":"AAA","brand":"Renault","year":1983,"color":"Maroon","price":22000},
{"vin":"BBB","brand":"Renault","year":1961,"color":"Black","price":19000},
{"vin":"BBB","brand":"Audi","year":1984,"color":"Brown","price":36000},
{"vin":"CCC","brand":"VW","year":1984,"color":"Silver","price":215000},
{"vin":"BBB","brand":"Volvo","year":1987,"color":"Silver","price":32000},
{"vin":"BBB","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
{"vin":"CCC","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
{"vin":"AAA","brand":"Honda","year":1989,"color":"Maroon","price":36000},
{"vin":"AAA","brand":"BMW","year":1986,"color":"Blue","price":28000},
{"vin":"BBB","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
{"vin":"CCC","brand":"Mercedes","year":1991,"color":"White","price":25000},
{"vin":"DDD","brand":"VW","year":1992,"color":"Blue","price":36000},
{"vin":"CCC","brand":"Renault","year":2001,"color":"Blue","price":25000},
{"vin":"DDD","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
{"vin":"CCC","brand":"Audi","year":1966,"color":"Maroon","price":45000},
{"vin":"BBB","brand":"BMW","year":1962,"color":"Blue","price":54000},
{"vin":"BBB","brand":"Honda","year":1982,"color":"Blue","price":22000},
{"vin":"DDD","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
{"vin":"EEE","brand":"Mercedes","year":1986,"color":"White","price":18000},
{"vin":"CCC","brand":"BMW","year":1983,"color":"Brown","price":32000},
{"vin":"EEE","brand":"VW","year":1973,"color":"Maroon","price":36000},
{"vin":"FFFF","brand":"Mercedes","year":1991,"color":"Red","price":21000}

]

}

onSort() {
this.updateRowGroupMetaData();
}

updateRowGroupMetaData() {
    this.rowGroupMetadata = {};
    if (this.cars) {
        for (let i = 0; i < this.cars.length; i++) {
            let rowData = this.cars[i];
            let brand = rowData.brand;
            if (i == 0) {
                this.rowGroupMetadata[brand] = { index: 0, size: 1 };
            }
            else {
                let previousRowData = this.cars[i - 1];
                let previousRowGroup = previousRowData.brand;
                if (brand === previousRowGroup)
                    this.rowGroupMetadata[brand].size++;
                else
                    this.rowGroupMetadata[brand] = { index: i, size: 1 };
            }
        }
    }
}

[simdevmon]

I think it would be good to have sortMode="none" as an official option and preferably also as the default behavior.

[sunilkumaar]

@simdevmon i have created the plunker based on row grouping https://plnkr.co/edit/DUhP4a4dMLZUmEjmBkok?p=preview. In this The array of objects displayed in table does not respect its original order. I need to display the data based on brand & Vin

[steve3d]

I've just run into this problem.

in my case, I don't have any sort nor row group, but the actual row order is different than the original data.

[steve3d]

well, this IS a strange design, when I added a empty customSort function, the order is indeed the original order.

and why this is strange? because if we don't provide a sort method or a sort function, we indeed need the original sort of data.

[Mr-Sloth]

Got the same problem, searched unnecessary long.
Simply adding: [customSort]="true" and it works

[cagataycivici]

I don't understand this, to begin with there is no built-in feature in TurboTable called RowGrouping, I've added that as a demo since it is easy to do with templating features of TurboTable which is not the case with p-dataTable that has built-in row grouping. So TurboTable is not aware of RowGrouping actually, if you have already sorted data, just don't define sortField-sortOrder at all. It is defined in demo because demo data in sorted, if your data is sorted and you don't need sorting just turn it off. What am I missing?

[scurk1415]

One workaround is to set [lazy]="true", not sure how it effects performance, but it doesn't sort :D

[AndreaBarbasso]

@cagataycivici check this plunkr out while using Chrome: Plunkr.
As you can see, I'm not asking the first p-table to sort anything, and I'm not defining sortField or sortOrder, but the array binded to the p-table gets manipulated.
The second p-table has [customSort]="true", and does not give a custom sorting function. This way, the output is correct.

I'm expecting to see the second behaviour by default, and not by using a gimmick.

[AndreaBarbasso]

Should be fixed now! https://github.com/primefaces/primeng/commit/0c55fb327aed0dc7def96b4e130e656bcc9f60a5

[jw61]

Just downloaded 5.2.4 and problem resolved! (Along with #5018) Many thanks!

[html5ravi]

How to fix row group if data structure is array of object as below.
"data":[ {"vin":"AAA","brand":"VW","year":1998,"color":"White","price":10000, "item":[{"make": "Ford", "model": 2018}] }, {"vin":"AAA","brand":"Mercedes","year":1985,"color":"Green","price":25000, "item":[{"make": "Ford", "model": 2018}]}, {"vin":"BBB","brand":"VW","year":1993,"color":"Maroon","price":40000, "item":[{"make": "Ford", "model": 2018}]}, {"vin":"AAA","brand":"Fiat","year":1964,"color":"Blue","price":25000, "item":[{"make": "Ford", "model": 2018}]}, {"vin":"AAA","brand":"Renault","year":1983,"color":"Maroon","price":22000, "item":[{"make": "Ford", "model": 2018}]}, ]
Any help would be appreciated, thanks in advance.

[viknig71]

I think it would be good thave sortMode="none" as an official option and preferably also as the default behavior.

I have columns with the values in decimals ( e.g "2.30") but it does not do sorting for decimals only integer values are sorted .. Why ?

[viknig71]

I have columns with the values in decimals ( e.g "2.30") but it does not do sorting for decimals only integer values are sorted .. Why ?