ngx-datatable: Rows not shown, always empty table

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior We use your table on different pages of our app. Sometimes we have the problem, the table is not shown the records. We load the records from an http resource asynchronously, after elaborating it in some way on angular code we push the rows to table rows. The problem is sometime, or better explained on some builds the table does not show the data. But the data is for sure there.

So we are not sure why this is happening and why this happening sometimes, but for example now, this is happening on every serve and on every build.

So perhaps is this a render or a timing problem? Or do you know this bug, or what could be the problem?

Table version: 11.1.7

Angular version: 5.1.3

Language: [TypeScript 2.5.x]

About this issue

Original URL
State: open
Created 6 years ago
Comments: 21

Most upvoted comments

Not sure if this is related but I’ve also started running into empty tables when externally filtering the data set.

If the set is emptied but then items are added, the scrollbar appears but until you actually scroll in the table no data is shown. Resizing the page or any other action has no effect, only scrolling in the table triggers it

emptytable

+10

johnhwright on Jan 9, 2018

I’m also seeing what @johnhwright is seeing.

I dug into this a bit more, and it has to do with virtualization. I can get it to consistently happen when downloading the repo, running it, and making some modifications to one of the demos, so it isn’t caused by anything outside of this package.

In order to re-create it, you can initialize the component with more data than than fits within the table, thus having the option to scroll. You then need the following to happen:

Scroll down in the grid a bit
Set the rows to an empty array, clearing out the table
Set the rows to some actual entries again

When this happens, the rows above where you are scrolled to are all blank. This only happens when virtualization is enabled.

I believe what is happening is the component doesn’t understand that the scroll position should have changed, due to the grid being set to nothing and then having more added, so those elements above wherever you were scrolled to aren’t added to the dom.

Hopefully that helps.

ghost on Apr 20, 2018

For me this repeatedly happened when: virtualization is true and vertical scroll position is not 0 and tableElem.rows property is update (e.g server sort) My workaround is to call setTimeout(()=>{ this.tableElem.element.getElementsByTagName('datatable-body')[0].scrollTop = 1; },0); after tableElem.rows is modified.

elimb on Mar 30, 2019

I’m having the same issue (v13.1.0) after clearing my external filtering; however, scrolling does not cause the rows to appear, rather everything remains blank. The only way I can get the rows to reappear is to enter a character into a filter…

kabb5 on Sep 18, 2018