Rows not shown, always empty table

[mburger81]

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]

[ponzmanman]

The same case with me. I just keep my table version as 11.1.5 and it works well. [updated] Seems 11.1.6&7 tagged in the same day.

[derchirurg]

Same for me. Switching back to 11.1.6 does not work.

[johnhwright]

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

[ghost]

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.

[asachan2707]

@0xdustin, Same issue I am facing. Have you any proper solution or workaround to resolve such issue.

[ghost]

@asachan2707 This is an actual bug that needs to be fixed in the source. The only temporary workaround I know of is to disable the virtualization option.

[PLopezD]

Any update on this issue? I'm seeing it as well. From looking through the issues it looks like there was a way to force a refresh, has anyone been able to do this?

[kabb5]

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...

[asachan2707]

I agree @0x4464 , same worked for me. 👍 :-) Looking for the issue that may be occur while disabling the virtualization option.

[asachan2707]

Hey @kabb5 , as you tried that is started a new cycle. So that it might be possible that it is working for you. 👍

[sheeni17]

@0x4464 @asachan2707 Thank you for the insight, im having the same issue and it appears its not fixed yet.

I've tried disabling virtualization (setting virtualization to false on datatable.component.ts) but its still an empty table.

Are you still using the same workaround?

[aldaircc]

Hi @mburger81 I was having that issue. I'm getting data from wcf service in json format, I configure the table as:

` <ngx-datatable class="fullscreen" [ngClass]="tablestyle" [rows]="rows" [columnMode]="'force'" [sortType]="'multi'" [reorderable]="false">

`

I was executing it and prop should the same name of your field however name is for your header name or the same field name of your json data. It works for my.

[elimb]

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.

[SethGossler]

Having experienced this today, I went about figuring out the bug. If I had more time, I'd work on a fix.

It appears the this.offsetY is not readjusted (properly? at all?) on the set rows setter (line 147 body.components.ts)

This is not an issue if the scrollbar didn't move position/change on a new row-data set. But because I've been setting the rows = [] before an async call, the scrollbar disappears and the position-mapping is not readjusted when the scrollbar reappears (at the top of the scroll area).

A quick fix could be setting this.offsetY = 0 in the set rows setter function, but I'm sure that would ruin some already expectant UX somewhere. Maybe if the new row's length is shorter, readjust the value?

I'm just going to copy @elimb solution. But the problem is obvious now.

[tiagoveigalazaro]

I came across this problem as well, but it seems it was a different root cause as it only happened to me with external paging switched on. Still, if someone is having the same behaviour, my problem was that something got screwed with my page creation method and the number of hits was not being updated and remaining as 0, which caused no results to be shown.

[SethGossler]

That appears to be a different issue then the one I encountered. My issue is a rendering bug, you issue sounds like a data binding problem you had to work through,

[bDino]

Facing the same issue with Angular 9 and ngx-datatable 17.0.0. Can anyone point me into a direction?

[BlauUCE]

Facing the same issue with Angular 9 and ngx-datatable 17.0.0. Can anyone point me into a direction?

Angular 11 :( same problem

[vmandrychenko]

We suspect we are hitting the same problem using Angular 10, 11 and 12.

[aa25g15]

SOLVED

I was having the same issue. I had the following in my dashboard.html

           <ngx-datatable id="owner-dashboard-table" class="material" columnMode="force"
            [offset]="ownerDashTablePage.pageNumber" [limit]="ownerDashTablePage.size"
            [count]="10" [rows]="ownerDashTableRows" [scrollbarH]="true"
            [externalPaging]="true" [rowHeight]="'auto'" [headerHeight]="100" (page)="setPage($event)">
            <ngx-datatable-column name="Ship Name" prop="shipName">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Flag" prop="flag">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Vessel Class" prop="classSociety">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Supplier Name" prop="supplierName">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Hazardous Material" prop="MaterialName">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Total Quantity" prop="totalQuantity">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="IHM Part" prop="ihmPartName">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="IHM Category" prop="ihmEquipmentClassName">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="HM Status" prop="hmStatus">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <span class="hm-status-table" *ngIf="value">
                        {{value}}
                    </span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="MDs & SDoCs Requested Date" prop="mdsSDoCsRequestDate">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="MDs & SDoCs Received Date" prop="mdsSDoCsReceiveDate">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="PO Number" prop="poNumber">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="VS Product Code" prop="productCode">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Created Date" prop="createdAt">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Last Modified" prop="updatedAt">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="MDs" prop="mdsDocPath">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="SDoCs" prop="sDoCsDocPath">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Other Documents" prop="deckCheckDocuments">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    {{value}}
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>

I resolved the issue by assigning [count]="10". Actually, this count should be assigned equal to the total number of results in paginated table but as I am still waiting on that to be sent in the API response. I just hard-coded this to 10 since my page size is 10. Earlier I had this set to 0 when declaring the variable and the table was taking the value as 0 only!

I even tried to remove the counts but even that does not work. It needs counts and they should not be 0 and it will display number of rows equal to counts.

[tiuotila]

Please fix this, problem exists still in "@swimlane/ngx-datatable": "^20.0.0"