React / Click row in 1st table, update data for 2nd table

Tags: #<Tag:0x00007efc72f6e788>
#1
  • I have a table A, and B.
  • When clicking a line in table A, an internal JSON objects gets loaded and some key K should be loaded into table B.

How to best do that?

  • Using an afterSelection hook in table A and loadData on table B? How to reference table B in the hook?
  • Using/setting up React’s state handling for table B? No idea how I can link a state in a way that a redrawn is triggered if the JSON content changes because of a click in table A.
#2

Hi @robert.muench

I have a similar example here https://jsfiddle.net/90qedkLr/14/
We also have two tables, and when any change in table A changes, the same cell (coordinates) changes in table B. You can use the same reference to use the afterSelection hook.

If you would need anything more than that I’ll be happy to help.

#3

Thanks, that gives me some idea.

In my case, the 2nd table is only available if a specific tab is active. So, not always. I can click table A, and depending on the tab state, different parts of data are shown.

I have one function that creates table A the classical way new Handsontable(... and the 2nd table, as part of a tab group, is generated via a React function. Getting the table B by ID from inside the handler of table A, just returns the HTML DIV, but nothing in there lets me access table B.

Maybe with my current not-yet-fully-react design is the culprit. But I wonder how I can deal with two tables from two different functions.

#4

Ok, so I added a ReactDOM.render(... call into table A.afterSelection hook. This triggers a redrawn and shows all the data.

I am not confident if this is the most elegant way, nor they idomatic React way.

#5

At the moment the use of state managers is not recommended. The subject was further explained by my colleague at https://github.com/handsontable/handsontable/issues/8372

#6

Ok. Thanks.

Regarding your example, is there a way to avoid redrawing the tables? I mean, we only want to update the data and I don’t need to have React redraw everything from scratch.

#7

Hi @robert.muench you can test the batching operations to suspend rendering https://handsontable.com/docs/batch-operations/#batch-methods but I haven’t tried that personally. It requires some testing (for example when the user changes the same cell two times).

#8

My main problem is that the table is included in an HTML block returned from a React function and I don’t have a reference to it.

What I do is, that I change the data, that the table should display and trigger a ReactDOM.render() call, which of course returns new HTML, which the browser renders.

It works, it doesn’t flicker, for me, it just feels a bit slow… and I guess (didn’t measure yet on my toy example) that re-creating a complete HOT instance every time is quite heavy.