How to work properly with table/data?

leonardo.buscemi · November 18, 2020, 4:21pm

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:

github.com/handsontable/handsontable

Cell Update does not work if original value was Object

opened 10:58PM - 18 Jul 17 UTC

pmunin

bug Core: Handsontable Reported

### Description I am feeding to HT objects with properties of dynamic type (can… change), and if any of the cells deals with Object, then typing new value in the cell does not do anything. However DELETE button will clear the value and only after that new entered values will be accepted. Even if I specify column.data as function: ``` column.data = function(dataRow, newValueToSet){ if(newValueToSet!==undefined) setMyColValue(dataRow,newValueToSet); else return getMyColValue(dataRow); } ``` setMyColValue never executed if original cell value (before editing) was of type Object. Here is example: [https://jsfiddle.net/2ze0pwss/2/](https://jsfiddle.net/2ze0pwss/2/) ### Steps to reproduce Code: ``` //HTML: <div id="example" class="hot1 hot handsontable"></div> //JS: var container, hot; var myData = [ { name:"Simple value", value: "This is simple value" }, { name:"Complex value", value:{ clientValue:"123", serverValue:"256" } } ]; container = document.getElementById('example'); hot = new Handsontable(container, { data: myData, columns: [ {data: 'name', }, { data: 'value', renderer:function(instance, td, row, col, prop, value, cellProperties) { if(typeof value==="object") { td.innerText = `${value.clientValue} (server: ${value.serverValue})`; } else td.innerText = value.toString(); debugger; } } ]}); ``` 2) Type {new value} in cell B2 #### Expected result: myData[1].value === {new value} #### Actual result: myData[1].value didn't change a bit it still has original value: ``` { clientValue:"123", serverValue:"256" } ``` ### Demo [JsFiddle](https://jsfiddle.net/2ze0pwss/2/) ### Environment * Handsontable version: 0.33 * Chrome 59 * Operating System: Win10x64

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 · November 19, 2020, 1:02pm

Hi @leonardo.buscemi

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

Here Handsontable example - JSFiddle - Code Playground we can observe that afterChange returns the same as the

getDataAtCell
getSourceDataAtCell

Why does this happen
Cause as we can see here Handsontable example - JSFiddle - Code Playground 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 Handsontable example - JSFiddle - Code Playground 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 · November 19, 2020, 2:41pm

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 · November 19, 2020, 3:29pm

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 · November 20, 2020, 8:14am

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 Handsontable example - JSFiddle - Code Playground 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 Handsontable example - JSFiddle - Code Playground (However, I’m not sure about line 46). Let me know if that’s what you wanted to achieve.

leonardo.buscemi · November 20, 2020, 9:31am

Yes, It is exactly what I want to achieve.

hot.toPhysicalRow

Was the winner

Thank you very much and great support.

aleksandra_budnik · November 20, 2020, 9:57am

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.