Ngx-datatable: Unable to add a row if sorting is set

[Deilan]

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

Current behavior
Add doesn't work if sorting is enabled

Expected behavior
Add works fine even if sorting is enabled

Reproduction of the problem

1. Open Basic/Live Data page demo in a browser
2. Set sorting on any column
3. Click Add button at the top

What is the motivation / use case for changing the behavior?
Adding rows while sorting is set? :)

Please tell us about your environment:
Windows 8.1 x64
Node 7.7.3

• Table version: 0.8.x
  The latest from the repo

• Angular version: 2.0.x
  The latest from the repo

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

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

[JosephAntoniou]

This is the case also with remove.

[Myo1030]

Same for me (8.2.1) :(

Edit : No difference with 9.0.0.

Windows 8.1 x64
@angular/cli 1.0.1
Node 6.9.1
Chrome 57.0.2987.133

[JosephAntoniou]

I have disallowed sorting until this is fixed - a blocker otherwise, cannot afford to have live data not shown.

[amcdnl]

Can one of you guys make a demo in plunkr showing this? It would be very helpful in debugging.

[JosephAntoniou]

Hi,

As the OP has mentioned in his report, you can see this in the live demo.

http://swimlane.github.io/ngx-datatable/

(and click Live Data under Basic).

From that demo, and more precisely:

• Click Remove (all data is gone, expected).
• Then click add (1 row inserted, expected).
• Click add say another 2 times (3 rows in the table, expected).
• Now sort - say 'Gender' column. (data sorted as expected).
• Now try to add or remove (no change - NOT expected).

I suspect the sorting action has resulted with the array reference of table data changing, and add/remove is acting on an old reference, hence no change visible?...

[akkaradej]

I have seen this bug for client-side sorting only (9.2.0)
If I set [externalSorting]="true", it works fine.

[akkaradej]

sortRows() returns the copy of rows.
https://github.com/swimlane/ngx-datatable/blob/9.2.0/src/utils/sort.ts#L67

If we enable client-side sorting, this copy will be assigned to ngx-datatable's rows.
https://github.com/swimlane/ngx-datatable/blob/9.2.0/src/components/datatable.component.ts#L107

So, our rows array has different reference from ngx-datatable's rows at the beginning.

My work around is re-assigning rows after modified.

this.rows.push({});
this.rows = [...this.rows];

[vesrah]

This was my terrible workaround.

onSort(event) {
    let sortProp = event.column.prop;
    let localRows = _.cloneDeep(this.rows);

    localRows = _.orderBy(localRows, [row => parseInt(row[sortProp]) ? row[sortProp] : row[sortProp].toLowerCase()], [event.newValue]);
    this.rows = [];
    this.rows = _.cloneDeep(localRows);
  }

[Deilan]

@amcdnl So you've got the demo. Looking forward to a resolution.