Table data does not appear until scrolls manually.

[paramjeetlogicoy]

I have two tabs, in both tab we have separate ngx-datatable. When scroll on table is already to top and if user shift the tab to other and back, No issues. But when table is already scrolled to some position bottom, Coming back to same tab, Gives no visible data, but scroll will be there. The moment i scroll manually, all data comes back.

Any one please help me.

Thanks, Param

Angular version: 4.0.x

Browser: Chrome

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

[dannyvenier]

I had a similar problem - a series of tabs each with it's own datatable. When I would scroll one, then changed to another tab and back, the table was still there (count showed all data) but blank until I scrolled. I believe that the table going out of "scope" resets the scrollTop upon return. I tried some background scroll setting and it didn't work so I had to "reset" the rows array. The side effect here is that it goes back to scrollTop of 0 so doesn't maintain the scroll state of the table. You can address this by saving the scroll state and then setting it back to previous value after resetting the data.

The means by which I "reset" the row data was:

let tempArray: any[] = []; tempArray = this.datatablerows.slice(0, this.datatablerows.length); this.datatablerows = tempArray;

you may not need to assign to a temp array but I wanted to make sure to trigger the table refresh so I used some brute force. datatablerows=datatablerows.slice(0, length) would probably do it.

I've seen another issue which is another edge case for this same issue - can't recall right now, about a week ago, but for that case there is more work to do to re-render the table data.

[oduffety]

I am seeing the same thing also in version 9.30. I am using the table with scrollbarV=true and scrollbarH=true.

Similarly to above, I have some buttons above the table and clicking on any of these tabs triggers an API call which feeds a new array of data into the table. Initially the view is blank (not even a "No data to display" message), but scrollbars are there indicating there is data. When the user scrolls the data appears. As above this only happens if I have scrolled down first before reloading the data.

After playing around it looks like the data is getting reloaded and the scroll position is changing as a result, but the body component is not recalculating which rows should be visible based on the new scroll position. I.e. it is displaying the same rows as before reloading the data, which may be below the viewable area.

As a quick and (very) dirty workaround, I have used renderer to grab the datatable-body element from the DOM and set scrollTop and scrollLeft to 0 after loading data. That then triggers the onBodyScroll method in the body component and renders the correct rows.

[wizarrc]

What "tabs" are you talking about? Angular Material Tabs? https://material.angular.io/components/component/tabs

[paramjeetlogicoy]

Yes.. Angular 2 md tabs.

After trying too much on this, i have shifted myself to use bootstrap tables.

[wizarrc]

@logicoy-gravitee I'll take a look, see if I can repo it

[dannyvenier]

My experience was with Angular 2 material tabs as well. I think it's the context change when switching tabs that creates what @oduffety describes with scroll position being out of viewport. There are a variety of issues in the list here that have variations of this. My workaround was a refresh on the data which then resets the alignment between data and scroll top (because it starts at scrollTop 0).

I have another issue that was posted over a month ago with no response even. This is the fact that a major feature (changing column positions) corrupts the table completely. In my case it is when there are one or more pinned columns but it makes the table unusable. I'm leaning towards abandoning the ngx-datatable as @logicoy-gravitee has done.

[paramjeetlogicoy]

Thank you all. It seems ngx datatable has lot more to do in future for a production ready component.

Thanks once again, i am closing this issue now as no real solution found.

Param

[qichangjun]

I got this same problem,and solve it with setTimeout(() => { this.gridList.el.nativeElement.querySelector('datatable-body').scrollTop = 1 this.gridList.el.nativeElement.querySelector('datatable-body').scrollLeft = 1)} after loading the data

[markanthonyg]

Hack:

http.get(...).subscribe(res => {
     /// set rows
     setTimeout(function() { $('datatable-body').scrollTop(1); }, 1);
     setTimeout(function() { $('datatable-body').scrollTop(0); }, 1);
}

[sujithsavithryma]

I got the same kind of problem. I have a type dropdown, on change of the dropdown I have to refresh the ngx-datatable with new records. This works perfectly if you don't scroll the table. After scrolling the table if you try to refresh the table with new data (even if you use the spread operator), the table becomes empty.

So I find out a workaround

 this.rows= [...data];
 setTimeout(() => {
    this.dataTable.bodyComponent.offsetX = 0;
    this.dataTable.bodyComponent.offsetY = 0;
    this.dataTable.headerComponent.offsetX = 0;
    this.dataTable.recalculateColumns();
    this.rows= [...this.rows];
 }, 100);

And this works for me