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.
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:
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.
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.
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?
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.
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, ...
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");
});
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
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!
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:
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.
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.
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)
