I’m using Handsontable for React inside the new WordPress 5.0 editor.
It’s working pretty well but I’ve come across a problem with data binding. In the new WordPress editor state like variables are called attributes and can only handle arrays and objects as stringified values. From the docs:
“If you’d like to use an object or an array in an attribute, you can register a string attribute type and use JSON as the intermediary. Serialize the structured data to JSON prior to saving, and then deserialize the JSON string.”
See here for more information: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-attributes/
So, because I have to stringify data this blocks the automatic data binding provided by Handsontable. See this sample CodePen I created to demonstrate this.
https://codepen.io/dgwyer/pen/ebdbNR?editors=1010
Change values in both grids to see the issue. Data binding in the first grid works fine but in the second one it doesn’t happen as it can’t automatically update the data source variable.
In this other CodePen the getData() function is available in the afterChange event due to the way Handsontable is invoked. But I’m using the React version of HandsonTable and can’t seem to find a way to access the getData() function.
https://codepen.io/team/amcharts/pen/YwWeod?editors=1010
If I could access the grid data whenever there is a change then I would be able to manually update the stringified var.
Otherwise is there another approach I can use as I’ve become a bit stuck on this now? Thanks.