How to work properly with table/data?

[leonardo.buscemi]

Maybe I’m missing something, but I have some doubts about the table.

As documented here :

Please note that Handsontable will change the original data source.

But there is an issue relative to this:

Issue: Cell Update does not work if original value was Object

My data are an array of objects, so the table can’t directly update it, I do it manually!

Question #1: Is this the correct way

Furthermore, if data are filtered the afterChange callback return back the row number of filtered data, not the row number of the source data.

Question #2: How I can manage the update in this case

Question #3: Is there a complete working example (ideally with Angular wrapper)

[aleksandra_budnik]

Hi @leonardo.buscemi

I’ll try to answer all the questions but if anything is missing please let me know.

Here https://jsfiddle.net/AMBudnik/rk0neLhb/ we can observe that afterChange returns the same as the

• getDataAtCell
• getSourceDataAtCell

Why does this happen
Cause as we can see here https://jsfiddle.net/AMBudnik/ahbks80r/ our data is connected by reference. When we log the data (via button) before doing any changes we get

but once we change anything in the table (example: change ‘4’ to ‘xyz’) our variable that represents the data changes

You cannot break the reference, but if you wish to hold the original data you can create a deep copy via JSON.stingify().

When source stays the same
When we use formulas like here https://jsfiddle.net/AMBudnik/bov1xcpa/ the getDataAtCell returns the value of the formula and getSourceDataAtCell returns the syntax of the formula.

afterChange for filtered data
the afterChange is not triggered when we filter data. Can you share some details about this scenario? May I assume that you want to get the index of the rows that remain after filtering the those that refer to the original index before the filtering?

[leonardo.buscemi]

First of all, awesome reply, thank you very much @aleksandra_budnik

My data was in this format:
[ { name: 'Leo', age: 34 ...}, { name: 'Ale', age: 34 ...} ]
I understand that this format isn’t good for HT so I’m switching to array of arrays
[ ['Leo', 34, ...],['Ale', 34, ...] ]
In this cases modifies are working as expected!

So, Answer#1 is NO, the way is array of arrays if I need to modify it.

Can you share some details about this scenario? May I assume that you want to get the index of the rows that remain after filtering the those that refer to the original index before the filtering?

Yes, your guess was correct, because I needed to manually update the data, but I solved ( Answer#2) it by changing the data format.

Answer#3 I didn’t know that jsfiddle supports Angular 2+, thanks !

[leonardo.buscemi]

I replicate my problem here:
https://jsfiddle.net/Leonardonline/7pohtdkm/33/

When data are filtered AND we modify the row, the afterChange parameter changes doesn’t contain the correct row number.

[aleksandra_budnik]

Hi @leonardo.buscemi

there’s nothing wrong with the array of objects. If that is what you get from the server you should not switch to an array of arrays.

Here’s https://jsfiddle.net/AMBudnik/vnL27eg4/ a demo with the array of objects data. I’ve added a call to the indexMapper within the afterFilter callback. When you open the console you’ll see the whole description of the filtering action that just took place.

Example
I filter out everything and just keep Person_3 and Person_4

This is what I see in the table

This is what I see in the console (indexMapper log)

By the first line, I am informed that I have 2 rows, where the row with index 2 moved to index 0, and row with index 3 moved to index 1.
Then you have a similar info in the notTrimmedIndexesCache where you get the info that the row index 2 and row index 3 are visible in the table.

Answer#3 I didn’t know that jsfiddle supports Angular 2+, thanks !

We try to support a new version of Angular as soon as it’s there for the developer to use.

And here’s the demo https://jsfiddle.net/AMBudnik/sd7omejc/ (However, I’m not sure about line 46). Let me know if that’s what you wanted to achieve.

[leonardo.buscemi]

Yes, It is exactly what I want to achieve.

hot.toPhysicalRow

Was the winner

Thank you very much and great support.

[aleksandra_budnik]

Yay! I’m glad to hear that.

If you’d have any further questions feel free to contact me at support@handsontable.com. And if you have a list of requirements that haven’t been cleared yet I’m also open to a call to discuss them over.