Ui-table supports ui_control

[cuxcrider]

Do I need to use ui_control to instruct how many rows the table displays? My table is only showing 2 out of 8 rows. It automatically makes a scroll bar, but I would prefer to have all 8 rows visible. Thanks

[cuxcrider]

oops, now I see I can just set the size to something other than 'auto' using the editor.

[Nodi.Rubrum]

One thing I am going to do... at some point is to make tables do their own dynamic sizing in some scenarios. I just have not gotten down my list to that item yet! A long long list.

[rce]

I've tried several thing, and it might coming from me being a newbie in Javascript, but i can't seem to be getting the whole table value out. It seems you can only get values out when interacting with the table (click, resize...). Can someone confirm?

[Nodi.Rubrum]

You already have the entire table, what you send to the ui-table node in the first place? Or is this post editing the data in the table?

I think I can see one way to do it... but there should be other ways I would think, and that is to keep a 'copy' of the table in a flow or global variable, and update that as the table is updated or changed. Then you can use this copy as needed.

The following link gave me the idea that keeping a copy of the table in a flow or global variable would be maintained change by change to the table UI-Table: how to use commands to add / update table content dynamically. But this seems like a lot of work to do this.

[Christian-Me]

Hi,

I wrote a subflow handling a ton of stuff arround ui-table

features

• buffer table data
• edit cells (as overlay)
• add or update individual rows or cells of the table
• delete rows
• clear tableData
• handle column width
• handle column order
• hide und unhide columns
• hide and unhide rows
• interface context menu
• record and replay manual row order
• set and maintain max amount of rows
• export cached table

For more detailed information see node (subflow) info panel & examples published here (ie. remote-device-table, syslog-server, healthy-indoors-project)

Currently to busy to do a little bit of cleanup but works for me just fine.

The subflow is to big to paste in here. You can find the latest version on github contained in my lates project:

COVID-19 "Healthy-Indoors-Project"

Dear all, I like to share my recent project monitoring Air Quality in rooms with multiple sensors using ad-hoc networks. [image] Air quality (measured by CO2 or VOC levels) can be an indicator of possible virus concentrations in the air. To lower health risks in indoor environments it is important to ventilate rooms regularly. This project could help schools or offices without sufficient mechanical ventilation especially as the temperatures will fall soon. I hope this could be a education…

[rce]

Indeed, a solution is to build a table aside from ui-table, but that makes it more of a display table than a real interactive table. Tabulator seems to be quite powerful, so it's a pity if you need to build code aside from it to handle edited cells or switched rows, instead of getting the whole table value when you're done.

[rce]

Thanks, i'll take a look at it, that's an interesting projects.

[Christian-Me]

You are right that tabulator is quite powerful and there is certainly a way to “flush” the table back to node-red. But when? And what happen when the user closes the browser before? Or a another client connects?

It all depend of your use case.

I feel better when I have my data in Node-RED always up to date. It causes less traffic too if you only send changed data back and forth instead complete tables.

[CreativeWarlock]

Hi guys,

happy new year to you all. Just a quick question - and please correct me if I should open a new thread on this -

Is there a way to remember the last selected page & row? So when I do a reload of a table the previously selected page and row is selected/shown again?

[Christian-Me]

Happy New Year.

Your question is fine here (I think).

To re-select rows after a page reload you will have to keep record of the previous selected rows (i.e. in flow/global context). On a page reload you can trigger a flow by using the ui-control node and set the previous rows again using the table.selectRow(id) command.

Please clarify what you mean by "previously selected page". I only know the row selections.

[CreativeWarlock]

Hi Christian,

thank you for your reply. What I mean by "previously selected page" is the selected page from the pagination feature of tabulator. A screenshot here, how it looks like. When I select a table row, some UI input fields allow me to change the details of a proposed trade. Internally this is done with a simple SQL update on that database entry.
Once that update is sent the flow refreshes the whole table, and the pagination jumps to page 1 again.
Maybe refreshing the table is not required? Then how would I refresh table row with id 2424?

[Christian-Me]

OK, I thought something like this. Never worked with pagination....

I think there is no need for page reloads at any moment.

You can update/add individual cells or rows by sending commands. Simply by sending the updateOrAddData command. Tabulator can hold a huge amount of data (I managed more than 100,000 lines in my syslog server until the browser quits with an out of memory message).

In the docs you can find info how to call tabulator functions from node-red. You can also use example Example 4 and 6.

Or this post:

Examples for node-red-node-ui-table

Now I`m back on my computer and can give you a litle bit more info msgToTable.payload={ "command":"updateOrAddData", "arguments": [[{"id":123,"columnField":"updated"},{"id":124,"columnField":"new"}]], "returnPromise": false }; To update a single cell (or many cells in a row) the row has to be identified. By default the field id is defined for that purpose but it can be changed by "index":"anyField". If the value of the index property isn't in the table a new row will be added (if i…

You should be able to call any functions for tabulator, like delete rows, change filters, ...

A Syslog Server for the Dashboard

Hi perhaps somebody is interested. Just finished a syslog server for the node-red dashboard. It makes use of ui-table. I hope somebody finds it useful. It is build around ui-table and a subflow I use for all kinds of tables in my projects. https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif(image larger than 4096KB) Features can handle quite huge amounts of data only limited by the clients browser. As every line is sent individual…

[CreativeWarlock]

Thanks, this sounds awesome. I'll check it out!

[CreativeWarlock]

Ah dang, I was using the etable-node, which is why I couldn't see a row id being returned on selecting a table row.

Should be easy to implement the updating call now. Thanks for your help, mate!

[CreativeWarlock]

Works like a charm, Christian!

Do you happen to know how to configure keybindings in msg.ui_control, for example to step rows with the up/down arrow?

Another feature of Tabulator is the ability to download data: Tabulator
In that JS code snippet a table variable is created. Would your node also be able to configure or access that tabulator instance in some way?

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[ ... ],
});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    table.download("csv", "data.csv");
});

Cheers,
Marcel

[Christian-Me]

Hi, sure ... there is not much of tabulator which you cannot use from Node-RED. (Except latest features)

did you had a look in the docs? Tabulator

simply send them inside your ui_control.tabulator object. But it should work out of the box. If I click into my tables (yes it do not catch the fokus) I can use the up/down arrows

To download a table you have to send a command

The doc has this example Tabulator

table.download("csv", "data.csv", {delimiter:"."}); //download a CSV file that uses a fullstop (.) delimiter

converts to a payload:

{
    "command": "download",
    "arguments": [
        "csv",
        "data.csv",
        {
            "delimiter": "."
        }
    ],
    "returnPromise": false
}

Put this in a button on your dashboard and if you press it a file dialog pops up and you can download the table.
OK better not to change the delimiter to a dot

This works with ui-table. No experiences with eTable!

[CreativeWarlock]

Bottoms up, mate!

Thanks for pointing out how to convert that JS-snippet to the msg.payload. Downloads are working now!

Yeah, I was wondering, too, why the navigation with the keyboard didn't work right out of the box.
I'll re-check my configuration tomorrow. Must be some small error then.

Edit: Just found out that the HTML download doesn't work:

msg.payload={
    "command": "download",
    "arguments": [
        "html",
        "Demo.html",
        {
            "delimiter": "."
        },
        {
            style:true
        }
    ],
    "returnPromise": false
}
return msg;

I tried that style:true with double quotes in all combinations, but still the download doesn't wanna trigger. The nodes are properly connected so I can exclude some trivial error.

Best regards,
Marcel

--

[Christian-Me]

The function download has 3 arguments, not 4!

msg.payload={
    "command": "download",
    "arguments": [
        "html",
        "Demo.html",
        {
            "style": true
        }
    ],
    "returnPromise": false
}
return msg;

Should work (not tested)

In Javascript you can do parameter names with or without quotations.

[CreativeWarlock]

Nah, doesn't work. Got the code exactly, but the download button doesn't respond.

The JavaScript console of the browser drops this warning though:
"Download Error - No such download type found: html"

which is coming from the Tabulator JS itself. Maybe it's a bug on Tabulator then? Anyway, the html download is not relevant to me. But in case you have an idea let me know so I can try again.

Thanks for your help so far, mate!