Ui-table supports ui_control

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

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.

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?

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.

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?

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:

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

1 Like

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

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!

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

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 :wink:

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

1 Like

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

--

image

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.

1 Like

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!

It seams that html download is a newer feature. UI-Table is some versions behind. It uses 4.4.1 of tabulator. The message suggests that the command works but the feature is not supported (jet)

2 Likes

hi @Christian-Me can you send me the example of this ui_control table so that i can start my project from there?

Hi @LeoMeendess
Take a look into menu/import/examples... you will find a few templates there ...

1 Like

sorry i don't found this menu. can you send to me?

Maybe this will help you find them:
Screen Shot 2021-05-28 at 9.40.31 AM
Screen Shot 2021-05-28 at 9.41.10 AM

2 Likes

tks for all !

Don't hesitate to come back if you have any questions.