Write and Read an editable table

Hi Guys,
I'm looking for a node with an editable table that can be write, like the node-red-contrib-ui-etable but with the option to get data from the table.
What I need to do is to compile a table and save data (i.e. in json) and recall saved data to fill the table.... edit them and so on.
Any idea how to do?
I'm sure that there is a very complex way to do it but my skill is very low and a specific node is apprecited :slight_smile: !

AFAIK, the table nodes are primarily for display. However, you can then add code to handle updates though it is rarely simple.

But, you have the data in a variable in Node-RED so getting the data back into a flow is trivial. Just ask for it :slight_smile:

The tricky part is coding up your Dashboard (other UI's are available) table to allow changes.

I have an example in my home setup where I build a table from periodic nmap scans of the network, these update an Object variable in Node-RED that is persisted to disk. I use uibuilder with Vue and bootstrap-vue to display the table and I allow certain colums to be input fields. Any changes are passed to a method in my Vue app that sends the changes back to Node-RED to update the variable there.

Because I'm using bootstrap-vue, the table display is easy. The harder part is the code to allow the data entry. Though even that isn't all that hard. Here is the whole flow:

And in case you are thinking that updating the variable from the UI in that "Upd network global var" function node is going to be difficult, here is the code:

const network = global.get('network', 'file')

delete network[0]

const mac = msg.payload.mac

delete msg.payload._idx

network[mac] = msg.payload

global.set('network', network, 'file')

return msg

With ui-table you can do everything Tabulator offers including editable cells.
You need a simple calback function.

1 Like

My need is a little bit different because I would like to load or create, modify and save data using a table to have a variable number of records.
In this moment I have tens of text box, each one linked to a global variable but this solution is limited to the number of text boxes I have in my page.

I'm not sure that you've quite got your head around why something like Angular (for Dashboard) or Vue/REACT/etc (for uibuilder) are being used.

With those frameworks you get the ability to only need to write templates. That means that you can template the table (it doesn't matter how many rows there are) and the columns (you can define the view/input/output of an arbitrary column).

Of course, you do have to hold a load of stuff in memory. Not necessarily the whole table since that can be "paged" if needed, but certainly a chunk of the table. When using Node-RED you have your data in two places. The front-end (browser) which is what the user is interacting with directly and may optionally also have processing logic (for UX speed) AND the back-end (server, Node-RED) where your inputs/outputs and other logic exists. You need communications between the front and back in order to synchronise that data. That's where Dashboard, uibuilder, etc provide you with websockets connections.

In your case, you doubtless want to think about your data as records (e.g. rows). Have a single object both in the back and front ends holding the whole table - expressed as an array (records/rows) or objects (fields/columns). You have a separate object that defines the template for each row containing the column definitions - which includes whether they can be altered/edited. If they can be edited, then the table component should do the heavy lifting for you of creating the input HTML elements and providing events when something is changed.

It's an interesting solution but I'm not a programmer. I understand partially what do you mean but I've not idea how to do it. I was looking for a ready solution. If not available in Node Red, I'll do it in a different environment. Up to now Node Red helped me to do a lot of complex tasks in a very simple way... Special thanks to @Steve-Mcl and @dceejay that helped me a lot!

I think that the idea behind the ui table component was to try and make this kind of thing easier but you are right, you do still need some level of programming knowledge to do editing in tables I think.

There are browser-based libraries that let you use tables more like a spreadsheet but this is certainly an area of Node-RED that could do with some contributions - comparing against something like Python and Jupyter for example.

I keep looking into this subject every now and again since I deal with a LOT of tabular data. I also have looked at it several times for uibuilder. But node.js as a whole is a bit lacking in libraries in this area. When I tried a lot of the existing ones, they didn't work very well (if at all) and were certainly very limited compared to Python. Of course, I may well have missed something obvious.

Hi,

I'll ask: how many rows of data do you want to store?
How frequently do you want to change them?

Perhaps overkill but a SQL ish type node (MySQL or SQLite) offers some advantages...

Cheers,
Paul

Not more than 150 rows. I'm working on a tool to write registers on I2C bus to configure the component. It will be very fast to have a table, change parameters, delete some of them, add anothers... and then click send. If the configuration is fine, SAVE it, if not, LOAD a previous set of data.

Are you running Node-RED on your local PC? You might find it easier to do this in a spreadsheet app saving as a CSV file? Then use Node-RED to read the file and do the config.

Hi,

To further expand on TotallyInformation (and I agree with the strategy) perhaps use node-red-contrib-spreadsheet-in (node) - Node-RED. This is a set of nodes that reads / writes CSV data. Treat it as a small DB - load it ALL into the screen object, make updates there, and write it ALL back to the CSV file... Then you can also do major edits in any of a million tools that read / write CSV (Excel, Open Office etc.)

Cheers,
Paul