Speed comparison in React: Paginated table vs Scrollable table for column sort

Question

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?

Answer 1

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 coming in a view. This is much faster and optimized.

Now if you come to UX point of view. A user is likely to find a paginated table with column sorting much efficient as compared 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 become 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 become 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

Answer 2

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