javascript - Speed comparison in React: Paginated table vs Scrollable table for column sort - Stack Overflow

admin管理员组

文章数量:1312895

Suppose we have two tables, one is Paginated and other is Scrollable. Both have them allow sorting of records by clicking on any column header.

Let's suppose the table has 5000 records of 6 columns. When the user clicks on any of the column to sort, my understanding is that the whole 5000 records will get sorted and my table state will get updated.

• In case of Pagination, since I am only rendering 10 records/ page, the rendering will be fast.
• In case of Scrollable table, since I am rendering the whole 5000 records, the rendering will be slow.

I have a project to make ahead and it may involve a huge records of data and column sorting is a mandatory feature. I want to validate whether my understanding of rendering speed for this use case is right or not?

What kind of optimizations are available in either cases for me to know?

Follow up:-

Do I actually need react-window or react-virtualized if I am anyway going for Pagination of table?

Suppose we have two tables, one is Paginated and other is Scrollable. Both have them allow sorting of records by clicking on any column header.

Let's suppose the table has 5000 records of 6 columns. When the user clicks on any of the column to sort, my understanding is that the whole 5000 records will get sorted and my table state will get updated.

• In case of Pagination, since I am only rendering 10 records/ page, the rendering will be fast.
• In case of Scrollable table, since I am rendering the whole 5000 records, the rendering will be slow.

I have a project to make ahead and it may involve a huge records of data and column sorting is a mandatory feature. I want to validate whether my understanding of rendering speed for this use case is right or not?

What kind of optimizations are available in either cases for me to know?

Follow up:-

Do I actually need react-window or react-virtualized if I am anyway going for Pagination of table?

• javascript
• reactjs
• performance
• pagination

Share Improve this question Follow edited May 13, 2020 at 13:05 Lakshya Thakur asked May 11, 2020 at 8:01 Lakshya ThakurLakshya Thakur 8,31611 gold badge1414 silver badges4242 bronze badges 2

• I would consider UX before thinking about perf optimization. I am a big fan of infinite scrolling but in your case, simple pagination seems to be the better UX because of the sheer volume of the data. No one wants to scroll for minutes instead of clicking a few buttons. This also answers your perf question, pagination will be performant on the client-side by default. (You could achieve similar performance with react-virtualized with a bit more work though, but I advise against this for the sake of UX.) – Bertalan Miklos Commented May 13, 2020 at 14:37
• You won't have perf issues if on the front if you choose simple pagination. Make sure to add the correct indices to your DB though to have a good backend performance too. – Bertalan Miklos Commented May 13, 2020 at 14:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10 +50

You are correct in thinking that Paginated table will be faster with rendering than an enitre table rendered with 5000rows. Also an table with 5000rows is likely to cause your browser to slow down due to a large set of elements in the UI

However there is very little performance difference if you use concepts like virtualization or windowing wherin you render only that amount of data as is ing in a view. This is much faster and optimized.

Now if you e to UX point of view. A user is likely to find a paginated table with column sorting much efficient as pared to a scrollable table.

There are three main reasons because of which I would go with a paginated table with sorting on columns

• Its easier for users to jump pages when they want to visit an old data instead of scrolling all the way down to it. This is one of the most strong reason for me
• When you use Pagination and the user decides to change the sorting order, it might get trickier to maintain scroll if you decide too. However pagination goes along smoothly with it. Either you stay on the same page or you move the first one. In either case it easy to implement
• If your data grows, keeping all the data on client side may bee an overhead. In such cases its better to depend on a API to get the data. Now virtualization with fetching data on the go can sometimes bee tricky and need lot of special attention and details on prefetching

In short its better to go with Pagination both because of UX and Implementation reason for a large table

I think the optimization here here is not a problem, both of the ways could be done with equal performance.

You mentioned react-virtualized - it's mon to use it as a solution for scrollable tables with good performance, it gives you ability to render only these fields that are actually required.

本文标签： javascriptSpeed comparison in React Paginated table vs Scrollable table for column sortStack Overflow