What is the proper way to update data that has been returned from an API call after the table was already initialized/constructed?

Tags: #<Tag:0x00007f13604178d0>
#1

Hi everyone,

I am using Handsontable version 8.0.0 beta 1 as it fixes a lot of issues I was running into when using 7.3.0 and reloading data from the server.

What is the best/proper way to reload the hands on table data with the data source that has come back from an API call to the server. For example, the results that come back from the API call to the might have been re-ordered for various business reasons. The results from the API call would be returned after the Handsontable has already been initialized and constructed and had data.

From what I know, I can think of 3 options:

  1. Use hot.updateSettings({data: updatedData});

  2. Use hot.loadData(updatedData);

  3. Use code to update the existing data collection which Handsontable is configured to reference to have all of the updates from the server. Our code (which used Handsontable 1-7.3) used to call hot.render after data was changed in this way, but the current documentation indicates that you should not call this manually. I do seem to run into bugs when I try to go about this method. But using methods 1 and 2 don’t cause those same issues.

Thanks,
Jude

#2

Hey Jude,

there’s one more method (but if you load more than a few cells it is too overwhelming for the browser) - it’s the setDataAtCell method. It also triggers the render() method but it won’t change the sorting or filtering that is already applied.

Besides that the loadData() (https://jsfiddle.net/7x3zw4du/1/) and updateSettings > data (https://jsfiddle.net/7x3zw4du/2/) already call the render() method.
The same rules apply when you change the data via reference - the loadData for the same variable reloads the table without an additional render() call (https://jsfiddle.net/7x3zw4du/3/). But I might be missing something so if I misunderstood the case please let me know.

#3