I have a HOT table, which works as expected. I have set the manualColumnMove: true and column moving works as expected.
The issue is that editing the cells in the just moved columns, does not show the display value (correct one), but the previous one. The issue seems to be that the TextEditor is displaying the previous value.
I have checked the data source in the afterColumnMove callback and it is correct.
You’d need to use a different approach. Currently, you’re wrapping a cell with <span> but the editor still keeps the sourceData.
You should rather use the
elements that we share, and there add the <span>. Then the editor will be able to keep all the data.
Hello Aleksandra, but this approach does not seem to solve the problem.
If I’ve understood correctly your advice, it adding span element to the td element provided in the custom renderer the issue.
I’ve removed all the code which added new child element, and I used the straight Handsontable.renderers.TextRenderer(instance, td, rowIndex, columnIndex, prop, value, cellProperties) function.
Can I ask you to create a JSFiddle instead? It would be much easier to share code changes and our developer said that he does not know what value is held by cellItem.outputPrettified
I see what you are saying but no I can’t. It’s a complex codebase, I cannot simply extract it. cellItem is simply an object with contains a lot of logic about the cell and its outputPrettified is just a number/string which should be displayed.
In the linked example the output is always just a number.
HI @ccrnn @aleksandra_budnik is currently away and she asked me to help with your questions. I have just received a reply from our developer, I paste it below. Let me know if you find it helpful
In updateCellItemValuesFromChanges in TableInteractor file have changes param, which hasn’t changed the value after move. Eg when you move the second column to first, and edit some cell from the first column, it has a wrong coordinate - { row: 0, col: 1}.
But what is most important, this is our bug. Maybe it would be a solution to store target param from the afterColumnMove hook, and operate on it.
It’s hard to debug minified code but I took a look and React Developer Tools gave me a hint. You have custom logic for renderer to read from your custom dataSource.cellItems but editor still reads data from data prop.
hotInstance.getSourceData() indicates that the order was changed outside of Handsontable then hotInstance.getData() returns reordered (again ?) columns because Handsontable thinks it should change the order. Which is recorded in our internal state.
My guess: you could use beforeManualColumnMove hook and block the default action by returning false. Then manualColumnMove plugin will be used only for the UI, and your state will be the source of truth.
Ooook now that makes sense! HOT was reordering the columns in its internal logic, based on the same data array.
Now returning false in the beforeColumnMove as you suggested fixes the behaviour of my spreadsheet.
Thanks for the help, you’ve been really useful!!
PS: maybe it’s worth to make it clearer in the documentation, so other people like me will not bother you in the future