[GH #5769] Is there a way to make faster appending new data to already-loaded data?

Tags: #<Tag:0x00007efc64f9f3f0> #<Tag:0x00007efc64f9f080>
#1

Hi,

I’m using React wrapper. We are building a people list. So basically, on first load I call 100 persons, save to data and load the data to the table. When the user scrolls at the last row, I will call another 100 and append it to the existing data in the state. But, I’m having problems if existing data is around 400 already, after I call another 100, it takes a long time to append. Does HandsOnTable have an API for this scenario? Just like lazy loading data. Or can you share some technique how to implement it properly?

Thank you.

#2

Hi @hugh

Can you share your latest progress in a demo? We do not have a built-in example for an infinite scroll but I’ll do my best to help.

#3

Hi @aleksandra_budnik

Thank you for your reply. I think it’s a bit hard to provide a demo but I will try to explain it clearly as I could.

This part of the app we’re building is the Persons section. We use GraphQL for talking to the database.

  1. On first load, we set perPage to a 100, meaning we only show about 100 persons to the user
  2. So when the user scrolls down to about 99th row, we show a loading bar (mimicking infinite scroll), then we trigger another call to fetch an additional 100, so that makes 200 all in all
  3. After we receive that another 100, we then push that new 100 to the end of the dataHolder that is holding the first 100 on first load. That dataHolder is what I feed on the HandsOnTable data props.

Currently, our setup for pagination in graphql is per page.

My concern is that every time we add another set of 100 to the dataHolder, the HandsOnTable seems getting slower and slower. Especially if the dataHolder is holding about 500 persons. I mean, every time we change the state, fetch and add another 100, the table is getting slower in rendering. Is there a way to make it faster? Or another smart way of implementing it? I might be implementing it all wrong.

Thank you for the time.

#4

Thank you for sharing the additional description. I can see what you mean, @hugh.

Handsontable does not have a buil-in infinite scroll and if something is out of the viewport it has to be loaded and all the rows in the table rerender.

We are planning to change this behavior by introducing eco-renderers https://github.com/handsontable/handsontable/issues/5769
We made some steps to prepare Handsontable for the new functionality, however, there’s still a lot of work waiting for us to schedule. I think that we may come back to this subject after releasing the stable 8.0.0. version, but it is not guaranted.

#5

Hello @aleksandra_budnik

Okay, thank you for that. We are looking forward to it. Hopefully, it will be included in the V 8.0.0 release.

Thanks!

#6

@hugh version 8.0.0 solves more than 150 issues https://github.com/handsontable/handsontable/issues/6465 but eco-renderers is a new functionality, so it’s not on that list.

We couldn’t add such a complex work to a release that already changes so much. That would raise the probability of high-level importance regressions, so we stopped the work on the eco-renderers and moved with solving that 150 issues related to index counting and reusing.