Ant-design: Long list optimization

看了下文章最后讲到 Reactabular，它实现的 virtualization 效果确实很好，不过表格我感觉暂时还不需要这个，因为现在是数据不多的时候也会有性能问题，而且数据多的时候还是建议分页吧。

原来 react-lazyload 给没在 viewport 的组件也渲染一个 div 是为了填充高度，让滚动条能正确显示，这个还是 Reactabular 和 react-virtualized 的实现比较高明。

Reactabular 是上下各渲染一个 tr，然后高度分别设成没显示的行高度之合。

react-virtualized 是在列表外面套一个 div，把高度撑起来，然后通过 position: absolute; top: 36700px; 来调整要显示元素的位置。

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

在能确定每个 Item 的行高前提下，基于 react-infinite 包装的 table-view，效果还行。

别贴内网地址。。。

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

How about minItemHeight or minRowHeight. According to me, if we know the min height of all rows, it will be enough to react-virtualized and react-infinite

yep，both height and minHeight will work

被这个问题折磨了很久了，昨天终于做了下支持任意高度的scroll list方案。react-list-any-height

@wangtao0101 文档都不写个？

@benjycui 兄弟，还没来得及写呀。

@benjycui 文档ok了

I can't read most of this thread, so apologies if this is not relevant, but I thought I'd share the approach we took with virtualized scrolling in Jaeger UI. It's not generalized, at this point, but might still be worth a gander.

jaegertracing/jaeger-ui - src/components/TracePage/TraceTimelineViewer/ListView/index.js

The items do not need to be fixed heights (possibly similar to react-list-any-height):

src/components/TracePage/TraceTimelineViewer/ListView/index.js#L321,L373

Some notes from the PR:

Started with react-virtualized, but issues around flashes of un-rendered regions while scrolling and dynamically sized / periodically changing content lead to revival of old project that essentially does the same thing: src/components/TracePage/TraceTimelineViewer/ListView/*.

ListView is more optimized to our needs (and less versatile). These optimizations include:

• Taking the approach of rendering less often and larger amounts of items per render
• Optimizing for scrolling in both directions instead of only the current scroll direction
• Having a concept of minimum and regular "overscan", which means if the currently rendered list of items meets a minimum buffer, don't render more, but if it doesn't, then render enough meet the minimum buffer and some extra, as well

Also, most excellent work on Ant Design! It's a joy to work with :+1:

有计划在什么版本加入吗？

I met the same problem. Is there any progoress ?

having the same issue.

Are there any progress on this?

@SeanCraftsman, @nunohora, @aindong – using react-virtualized resolved the issue, for me, which is described here in the docs.

@tiffon this will work for a List but I cannot figure out how to do this for Table.

Hi, what's the best way to use TreeSelect with react-virtualized ?

Is there any progress on this? Is it possible to combine react-virtualized with Antd table ?

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。
在能确定每个 Item 的行高前提下，基于 react-infinite 包装的 table-view，效果还行。

@paranoidjk @benjycui Just fyi, react-virtualized also works with rows of unknown height that size the elements on the fly: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Also, my thoughts on this: It may not be necessary to replicate virtualization within antd. Perhaps instead exposing a render method that is in charge of providing the Menu/Table rows so that a user can implement virtualization on their own would be a good start.

FYI, I think react-window is the next-gen react-virtualized.

https://github.com/bvaughn/react-window

On Thu, Jul 5, 2018, 4:01 AM Jonathan Dumaine notifications@github.com
wrote:

Also, my thoughts on this: It may not be necessary to replicate
virtualization within antd. Perhaps instead exposing a render method that
is in charge of providing the Menu/Table rows so that a user can implement
virtualization on their own would be a good start.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

所以，类似的问题，就木有然后了吗？😳

It's also really slow with the Transfer component

what is the current workaround to use antd table with react-virtualized ?
I've got no idea on rendering antd table with react-virtualized table while react-virtualized list can be used with antd's list using rowRenderer props.
or Just use react-virtualized table with custom styles without using antd table ?

Any update on this?

性能问题还是很明显的，希望能尽快解决！

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

I've needed this badly for a while now. I may be forced to implement my table outside of AntD using react-window for now. Until this is supported, the performance is unacceptable for long lists and I need a usable table with many rows (needs virtualization).

@swillis12 in my team we are using react-tabular with great performances, if that could be of any help :)

I'd still want to see this issue marked as resolved.. Long lists are unusable at the moment..

持续关注此问题。业务需求没办法仅仅通过分页来解决~

https://github.com/bvaughn/react-window

Maybe we should make this built-in.

这个Issues都开了2年了。。。。。。

Better late than never! 😉

so, any progress ?

Hey! We'd love this! How's it coming?

项目要用到treetable且可能存在大量节点，所以我基于antd的table修改了代码增加了虚拟加载，demo每个节点下1999个子节点，可能还有bug存在没有详细测试

参考react-window项目，感谢下前几楼提供的细路，因为刚接触前端，代码改的有点乱，有时间我重新整理下贴出来，有需要的可以参考下

关注+1

还有一个奇怪的问题.当 Form 和 Table 在作为兄弟组件存在时,Form上的输入会非常卡.尤其是当Table存在fixed 的时候,整个页面基本处于不可用操作的状态.Table 数据后台分页了的,每页30行.稍后我会补一个demo .通过 react tool 发现,当有键盘事件触发时都会导致整个组件从新渲染.现在暂时解决办法是把所有同级的Form拆出去.但是列表页面的任何操作依然会导致页面卡爆.

package.json

"antd": "^3.12.3",
 "react": "^16.3.2",

页面除了在DidMount中进行了数据加载外未做任何其它的逻辑.

Can anyone please give us an update if this is going to be implemented? If so, can we please know when it will be available. This is becoming a blocker in our application and will need to consider to drop Antd in order to move on, which is sad because I really like the this framework.

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

I've needed this badly for a while now. I may be forced to implement my table outside of AntD using react-window for now. Until this is supported, the performance is unacceptable for long lists and I need a usable table with many rows (needs virtualization).

@swillis12 Hi, how did you end up dealing with the table performance issue?

如果列特别多的情况下，我们的一个需求是列有 70 多列，需要都展示出来，即使做了分页也还是会非常卡顿

I believe the docs have examples with react- virtualized, which should do
the trick.

On Thu, Mar 28, 2019, 4:48 AM Dane notifications@github.com wrote:

如果列特别多的情况下，我们的一个需求是列有 70 多列，需要都展示出来，即使做了分页也还是会非常卡顿

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

同关注这个issue一年多了...
还没解决...
然后react-virtualized和react-window太复杂特性太多 不需要那些特性 文档懒得看的我
自己造了个小巧的轮子
特点是除react没有其他依赖, 然后每行高度可以是动态的, 不需要提前给出

https://github.com/Autodesk/react-base-table look at this

GitHub

Autodesk/react-base-table

A react table component to display large datasets with high performance and flexibility - Autodesk/react-base-table

关注中...业务需求要显示1000行数据。

https://github.com/bvaughn/react-window

Maybe we should make this built-in.

any further progress ?

I'm trying to create a TimePicker with a Input and Dropdown, so I need to render 1440 items (24 hours * 60 minutes) in the Dropdown overlay with Menu, because Dropdown dont works whit others components.

But the dropdown performance with this amount of data is terrible.

So, my question is: What can I do to use the react-window as dropdown overlay?

Would like to spread out my concern here too. We've been trying to render a select dropdown for a list with the full list of Google Product Taxonomy but it's very slow with few seconds of lagging before I could see the dropdown. What's the progress so far?

I want to know if there is a solution now?
I want to use react-virtualized in Autocomplete, but I can't use it. When I return the component in the rowRenderer method of List, I get an error.

@jingxiawl One workaround is to make the dropdown as search-based dropdown. From a different perspective it's not too user-friendly to display a long list of items for user to scroll down manually too, so I use states to manage the dropdown selection list by filtering the search phrase. If you're using React hooks, you can make use of useEffect to minimize component re-rendering.

Hope this reduces the pain of slow renders. Nevertheless I still hope this component doesn't slow down because of longer list of selections.

@yoonwaiyan
Thank you. But now the problem is that there is a lot of data filtered out, and there will always be problems with long lists.

@yoonwaiyan do you have any examples of doing this?

antd.Table虚拟表，API与原Table完全保持一致，不需要传rowHeight
https://github.com/ctq123/ant-virtual-table

@reconbot This is a simple example I did using React hooks.

基于react-window，功能完备的表格组件
https://github.com/nexxLuo/tablex

@reconbot This is a simple example I did using React hooks.

Still very slow to me.

@douglasjunior yup it's not meant to solve the issue completely but rather a temporary solution for my production code to at least not giving a bad loading experience to user, but I'm open to suggestion on how to optimize it further.

You can refer to ant-virtual-table as linked on few threads above to see how they solved this problem for table as they claimed to be.

btw this SO post has some legit solutions to long list problem, hope antd team could take a look at it: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

Hello Ant Team
Is there any news about this issue? any plan to fix it any time soon? it is actually very painful to use list table when having a lot of data
@afc163
Great job by the way !!!

Hello Ant Team
I am using the Tree component with lazy loading, and I have around 20,000 TreeNodes as children under on TreeNode. It is so slow and painful to navigate through the tree with such a large number of data. Anything new about this issue?

Hello Ant Team,
First love love antd components.
I'm using the Select component and really really need to add react-window or some other way to optimize it, as there are over 2000 options making the component just painfully slow. Please let me know if you have any updates on this.

Can we use this for some reference? This repository have a ton of important information for the Table component.

https://github.com/wubostc/virtualized-table-for-antd

SuperSelect is based on antd Select, which supports a virtual list of tens of thousands of data, the same api as antd Select, which works fine in my project.

now, SuperSelect move to antd-virtual-select

antd-virtual-select repo

this is demo

Cool stuff @iblq! I made a slight modification of your demo to include a comparison to the ant select https://codesandbox.io/s/superselect-8xlwk

Hello Ant Team,
First love love antd components.
I'm using the Select component and really really need to add react-window or some other way to optimize it, as there are over 2000 options making the component just painfully slow. Please let me know if you have any updates on this.

https://github.com/react-component/select alpha version already implements virtual scroll.
You only have to wait for antd 4.0 to have it.

@megawac lmao what. Are we following the same thread? Where was anyone offering to hire you?

Guess I'll have to wait for 4.0 ⌚️

The SuperSelect demo above is pretty amazing, though, ngl. Very performant, too. Unfortunately, I don't want to copy-paste 300+ lines to get a performant Select, especially since I'm using TypeScript and it's in JS. Still pretty cool!

I wish react-window weren't just limited to lists...

Another option is react-virtualized-select, but there are two problems: 1) It's not Ant 😄 , 2) It's no longer maintained, so if you run into issues, 🤷‍♂

For anyone wondering, one solution to this for non-dropdown/select data is the List component with the optional pagination prop. Works like a charm!

LazySelectInput should handle loading >2000 without any rendering issues.

new Table component also implement virtual list, see https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

@abenhamdine Is there any way we can use the new table component for virtualization support with existing ant design projects?

@abenhamdine Is there any way we can use the new table component for virtualization support with existing ant design projects?

Perhaps, but IMHO it's better to wait for antd 4.0, new table component is already integrated in 4.0 prepare branch.

Yesterday I tried to add the alpha version but wasn't successful.

Alright, then I will use the this one for now.

https://github.com/wubostc/virtualized-table-for-antd

It's had a bit messy doc, I also needed to fix the css a bit.

Is there a way we can use the new select component in v3 while we wait for the v4? Or is there a third party select component that implements a virtualized list and with the same antd style?

EDIT.
I'm using the SuperSelect component posted above and it's working perfectly

any update ?

@shivam-ahuja you can try Select component in antd 4, 4.0.0-rc1 is out.
See https://next.ant.design/components/select/#components-select-demo-big-data

Has the table filtering been worked on? I'm still experiencing long load times on filtering large sets of data as seen in #11331. Filtering is pretty much unusable with a table having over 1k items.

Long list render perfermance has been optimized in v4: https://github.com/ant-design/ant-design/issues/21656