2

We are using React framework in our application and Griddle library for creating table grid with 10,000 rows. Our application is heavily utilizing the searching, sorting functionality on all the data rendered in the Grid.

The problem which we are facing is that browser is taking large amount of time to create those child row component and render those. On an average 1 row is taking around 1ms. With 10,000 rows it translate to 10sec which is huge.

Ideally we want to somehow tweak rending only a small portion of data first like lets say 50 rows and then dynamically render next set of data when the user scrolls. However the searching; sorting functionality should work on all the data.

  1. Is Griddle a best suit or are there some other library which can be exploited for lazy loading with the current architecture.
  2. Other solutions on how this can be implemented like server side sorting, searching and then returning only a small set of data to frontend. Then fetch next set of paginated data on user scroll event.
Emperor
  • 59
  • 1
  • 4
  • Hey Emperor,i dont know griddle but check [this](http://adazzle.github.io/react-data-grid/examples.html#/one-million-rows) – Jan Ciołek Aug 19 '17 at 08:53
  • Are you using the position plugin? If not, I would suggest adding it as it's designed to help in these scenarios. (Griddle author here) – Ryan Lanciaux Aug 20 '17 at 13:24
  • @RyanLanciaux We are currently dependent on a very old version of Griddle which does not provide Plugin support. I guess we need to switch to **2.0 version** of it to exploit this feature. – Emperor Aug 23 '17 at 06:41
  • Ahh - unfortunately the 0.x release doesn't have a lot of the performance features we added for 1.x – Ryan Lanciaux Aug 23 '17 at 09:53

0 Answers0