question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nz-table nzVirtualScroll last item rendered is wrong

See original GitHub issue

Reproduction link

https://stackblitz.com/edit/nz-virtual-scroll-index-issue?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

Quickly scroll to the bottom of the table and there is a high chance (30% or more) that the last index is not 359 (last item).

If it is 359, scroll to top and then to bottom again

virtual-scroll-index

What is expected?

the last index item should be 359

What is actually happening?

The last index is not 359

Environment Info
ng-zorro-antd 8.3.0
Browser Chrome Version 76.0.3809.132

If the listOfData length is 20000 instead of 360, the bug does not occur.

A workaround to this bug is to return undefined instead of data.index in function trackByIndex

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
lppeddcommented, Oct 19, 2019

@vthinkxie this is a CDK problem. The only solution is to increase the minimum buffer size using nzVirtualMinBufferPx.
See https://github.com/NG-ZORRO/ng-zorro-antd/pull/3766#issuecomment-511388029 and https://github.com/NG-ZORRO/ng-zorro-antd/issues/3948#issuecomment-519826370

0reactions
vthinkxiecommented, Mar 27, 2020

follow @master-mazihao 's comment will fix the issue, close now

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cdk virtual scrolling issue - angular - Stack Overflow
First you need the Viewport Reference: @ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;.
Read more >
Table | NG-ZORRO - Ant Design
Table. A table displays rows of data. When To Use#. To display a collection of structured data. To sort, search, paginate and filter...
Read more >
Nz Virtual Scroll Index Issue - StackBlitz
Created with <3 by the StackBlitz SDK!
Read more >
Virtualize large lists with the Angular CDK - web.dev
Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit.
Read more >
Virtual Scrolling - Grid - Kendo UI for Angular - Telerik
Virtual scrolling provides an alternative to paging. While the user is scrolling the table, the Grid requests and displays only the visible pages....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found