ngx-datatable: Table (view) is not update when the rows are updated

@amcdnl from my class I use @ViewChild('datatable') datatable; then I refresh using this.datatable.refresh() after delete row but … nothing’s happend … it doesn’t refresh, why ?

PS: in fact when I delete or edit and after that if I resize window or scroll inside datatable a litle bit …my data are updated !! why this behavior , here’s my gif

This is definitely the way ng2 is intended to work, however, it feels a bit awkward for this particular component… seeing as how the main function is to render an array to the screen.

See the comments on issue #32. The filter demo method has some other undesirable side effects, I mean… it filters properly, but… sort the list, then type in a filter, sorting breaks.

Kind of caught between a rock and a hard place. We want OnPush for efficient change detection, but that will cause us to create copies of the row data on every update, which is not efficient, and currently doesn’t function really well anyway. It would be nice if there were a cheaper way to tell the component to check for change. It would also be nice if this components state information were not stored in the applications input rows, so that when a new array is given, the state information is not lost.

Hello @shattar,

I thought that the problem could be the OnPush change detection strategy too. So, I was search the way to invoke manually to refresh the DOM, but I didn’t found it.

I’ve tried this code (in my component which use angular2-data-table) but this doesn’t work:

import {  ChangeDetectorRef } from '@angular/core';

constructor(
     private cd: ChangeDetectorRef) {  }

newRow(){
  this.rows.unshift({
      price: 100,
      duration: 60,
      state: 1,
     });
     this.cd.markForCheck(); // marks path
}

Should I change my component or the angular2-data-table code? (I guess angular2-data-table module).

Thanks!

I can work on this sometime within the next couple of days.

Fixed in 2.0

Working on a better solution for this. Added a custom trackBy function per @robwormald suggestion. Still not fully working yet though.

Hi, I am facing the same issue after updating the library to latest version (19.0.0) and it was working fine for version 16.1.0. Tried all the methods suggested here. And tried updating the rows using the spread operator -> this.rows = […this.rows]; Any help would be appreciated.

Thanks in advance!

I upgraded to 2.0. Edit works as 0.9 version - good but add/remove still don’t work with triggering window.resize after. May be it make sense to add a demo to the project for add/remove row scenario?

So, after chatting w/ a few cool cats…I’m gonna remove OnPush from the top level datatable. Everything else will stay onpush for good perf though. I’m working on this now, so this will be done shortly. Thanks for your patience.

My inline editing example seems to work. Try using the custom track by too.

@germanAd dude where you read “resolve this problem”

You asked “why need this refresh function, because in 0.9.3 it worked automatically?”

so about this question : ME and @Caballerog tell you it’s because of code refactoring, NOW we have OnPush change detection strategy.

Again please read this issue from the begining and open link I posted to understand better

thanks

another technology (onpush strategy detection change) check it http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html please read all this issue link is above

Following code works for me Try it setTimeout(()=>{ this.valveListToDisplay = […tableData] ; }, 0); this.valveListToDisplay = […tableData];

Write the assignment statement twice.

As per my comment in the chat room, add and remove do NOT work once a column sort from the header has been requested (via click).

Can easily recreate with the Live Demo feature. I like this component, but is there a way for me to disable sorting until this is fixed? Otherwise it’s a blocker for me, I rely on realtime events.

it works for add/remove. Thanks a lot.

I posted a question on stack overflow. Still investigating.

I am trying to upgrade from 0.10.1 to 1.7.0 and I can’t make the following functions work (they worked in 0.10.1)

1. add/remove row in a grid without refreshing the whole data set.
2. live update is not working. I also checked the live update demo and a cell value is get updated ONLY when I click on it.

In my case doesn’t work 😦.

This is my code:

TS:

private vars...

  @ViewChild('datatableTeaching') table;

more code...

  newRow(){
  this.rows.unshift({
      price: 100,
      duration: 60,
      state: 1,
     });
    this.table.refresh()
}

HTML:

 <datatable #datatableTeaching class="material" 
            [rows]="rows" 
            [columnMode]="'force'"
            [headerHeight]="50"
            [rowHeight]="'auto'"
            [footerHeight]="'auto'"
            >
....
</datatable>

@germanAd 0.9.3 was good for me too but we are on 1.4.0 … yes problem still here

This problem still exist? In version 0.9.3 this bug not hepend

Experiencing the same issue. I hit the refresh() function, the table is not refreshed.

@shattar - What API would you propose?

Heres how I would handle that, it doesn’t seem that bad…

onBlur({ rowIndex, value }) {
   let rows = [...this.rows];
   rows[rowIndex] = value;
   this.rows = rows;
}

If you look at any other React based implementation such as Facebooks Fixed Datatable you are gonna find similar APIs. http://facebook.github.io/fixed-data-table/

The change detection strategy is onOnPush, u need to push a whole new rows collection. Modifying the existing collection does not trigger updates.

Like this: https://github.com/swimlane/angular2-data-table/blob/master/demo/basic/filter.ts#L69

I guess markForCheck doesn’t cascade down to the child components. I recreated the issue on plnkr (without even using <datatable>).

https://plnkr.co/edit/rAWUWYXZ5bX14WQ0pEpb?p=preview

I’m not aware of how to trigger a child component to check for change without using an immutable input (copy the array to a new one and change the reference), or tickling it with a purpose built update method/event that a parent component can call/emit. Both seem ugly. I would love to know an elegant solution to this!

I believe this is how the OnPush change detection strategy works. You may need to markForCheck. See http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html