Tracking rows by ID rather than index

Tags: #<Tag:0x00007f8b23e4f308>
#1

Hi,

I’m looking at whether handsontable would be a good fit for our product. In our web application, we stream data to the client. This data is constantly changing, and occasionally, rows may be added or removed.

I’m looking at whether handsontable could handle this scenario - where rows may be added or removed (but not by the user), say if the user has a cell selected but the underlying data changes, or if they are editing a value and a row is added/removed at the same time.

I found the redux example and modified it to continually add and remove the middle row - https://jsfiddle.net/rft9d6u0/1/

If the last cell, C5 is selected, then the selected cell changes between C4 and C5 as the middle row is removed and re-added. Similar issues occur trying to edit one of the last rows.

Is there anything in handsontable that causes rows to be tracked by IDs, so that i.e. C5 in the example above would remain selected?

Kind Regards,
Mike

React wrapper + redux is not working properly when sorting is enabled
#2

Hi @mike.gibson

Thank you for sharing the example. I’ve replicated the same using vanilla https://jsfiddle.net/s5Lm32au/10/ where selection moves differently. I would call it a bug, but I need to recheck that and consult with the team.

#3

Hi @mike.gibson,
Handsontable doesn’t support natively such a feature you looking for. Although, there are at least two options to adjust Handsontable to the expected result.

  1. use alter() option to put and delete rows from the instance - without mutating the dataset, Handsontable will keep the proper selection,
  2. you can use our hooks (internal events) system to track what you want. The following demo is a fork of your example. Uses a few additional hooks to track update settings (changes in redux store), selection (to save/clean currently selected row’s GUID): https://jsfiddle.net/h20yoLup/
#4

Thank you both for your examples and help.

The last example is great to show how single cell selection could be implemented while tracking rows. I guess a similar approach (but more complex) could be done to also handle a range selection.

I think there’s still an issue if you enter edit mode and start to change the value in a cell on the last row - the change seems to get applied when the rows change (it’s applied to the wrong cell, but I think that would be easy to fix by using the guid when applying the update).

It seems that Option 1 also suffers from this issue (without react/redux) in the previous example, https://jsfiddle.net/s5Lm32au/10/

I appreciate it’s quite a specific use-case - having data update in the background while a user is already viewing/editing the data. It’s not a simple problem to solve.

Thanks again for your help.

#5