Edit a 2D Table in a modeless way


#1

Hi dear Node-RED community and happy new year to all of you !
May it be a new year filled with fun on Node-RED :partying_face:

For one of my projects, I am using a template node to generate a 2 dimensions table. The data are coming from another flow, no problem with all that part.
The essence of my problem being that out of 16 data I am adding for each new row, some of them are to be edited later on.


(Ignore the data, but let's just say that all cells with text inside can be changed)

My problem being that the next update of the table might be coming anytime.
So I would like to have a modeless behavior, so that when the next data arrive, they will be added and displayed in the dashboard immediately, regardless of the fact that I am editing some values for some previous rows.
I tried to make the content of the table editable, and it is functional, but that is not retained, and at the next update, the modified cell is back to before. I also need to keep the table stored in JavaScript to save it in a csv file for archiving.
I tried getting a prompt to show-up once I click on a specific row, with this way I get the information retained and sent back to my JS array, but that is modal, hence while my prompt is showing, the array is not updated.

What would be a way to do that, to have both the table being refreshed anytime, and the possibility to edit some cells of the table.

I do not necessarily need a new window to appear, that would be nice, but if that is too complicated, another ui template where the data of my clicked row would appear in some text box, separately from the table, with a save button would be an acceptable way to do it.

If you have any suggestions, I gladly welcome them !

Cheers,

Antoine