Load data after the table has been rendered

Getting help Questions
,
1

Hi Handsontable team,

I would like to load the data after the table has been rendered. I’m using Next.js and importing the table using lazy loading and with ssr false.

const Sheet = dynamic(() => import('./components/Sheet'), {
	ssr: false,
	loading: () => <Loader dataTestId="loader" />,
});

I tried using the afterRender but it just keeps emitting events and makes the browser hangs.

Is there any other hook I can use to make sure that the table is ready before loading the data using loadData?

Thanks.

2

Hi @r.evangelio

There’s another hook, afterInit which is actually fired after afterRender hook, so it might be worth trying with that one.

Here you can see that it runs as the latter: https://jsfiddle.net/handsoncode/h0wb19ng/

3

I also tried using this afterInit but I cannot get the handsontable instance. I’m using the react way and not like this implementation.

4

I see. I don’t know your exact implementation, but maybe something like this would work: https://jsfiddle.net/handsoncode/ab64Lcrv/

Here I’m loading the data after checking if the Handsontable instance is actually created and rendered. I added the timeout for better visualisation so it’s a little bit exaggerated, and in your case it might be lower value or the timeout might not be even needed.

5

I’ll give this a try.

6

We can close this topic now.

7

Hi @r.evangelio

Thank you for the update.