2D/vertical UI-Table in Tabulator format?

[interscope101]

Hello! I am using the following function to generate/update a table with THREE columns (Investment 1, Investment 2, Investment 3) and TWO rows, one showing "balance", the other "roi". I can't figure out how to implement it in a Tabulator format (need to style it conditionally) - is it even possible? It's a simple table but different from all Tabulator examples in it's orientation - i.e. columns contain different fields (it's consistent across rows). Also, is there a way to have a "row header" (which would be "balance" and "row") in addition to the column headers?

Thank you for your help!

msg {}

var Balance1 = 1000; var Balance2 = 2000; var Balance3 = 3000; 
var Roi1 = 5; var Roi2 = 7; var Roi3 = 10;


msg.payload=[

       {  
         "Investment 1": Balance1, "Investment 2": Balance2, "Investment 3": Balance3
        },
       { 
         "Investment 1": Roi1, "Investment 2": Roi2, "Investment 3": Roi3
        }
    ]}


return msg;

[Christian-Me]

Hi,

there is no build in feature I know to rotate a Table by 90°. But you can add a first column as a row header. You can even fix it that it is always visible. Then you can style the cells in this column with custom formatters to match the header row.

msg.payload=[

       {  
         "Label": "Balance", "Investment 1": Balance1, "Investment 2": Balance2, "Investment 3": Balance3
        },
       { 
         "Label": "ROI", "Investment 1": Roi1, "Investment 2": Roi2, "Investment 3": Roi3
        }
    ]}


return msg;

The ui_control message will then look like this

{
    "tabulator": {
        "columns": [
            {
                "title": "Label",
                "field": "Label",
                "frozen": true
            },
            {
                "title": "Investment 1",
                "field": "Investment 1"
            },
            {
                "title": "Investment 2",
                "field": "Investment 2"
            },
            {
                "title": "Investment 3",
                "field": "Investment 3"
            },
       ],
        "layout": "fitColumns",
        "movableColumns": false,
        "groupBy": ""
    },
    "customHeight": 12
}

More infos for how to style your first column can be found here

Ui-table row change background color on updateorAddData

I am using node-red-node-ui-table to show all the temperature devices in our house. I send the data from node-red using updateoradddata - works fine. What I can;t do is set the background colour of the whole row when i update - can;t find out how to. I have tried rowFormatter call back and that works when first rendering the table but is then not retriggered when I update the data. My update message is shown here: msg.payload = { command :"updateOrAddData", arguments: [ …

or here Ui-table in conjunction with ui-table handler - #5 by Christian-Me

[interscope101]

Hi, thank you. My tabulator implementation is quite cumbersome - using a lot of different nodes to achieve what I think can be done much simpler? Do you recommend using etable ? Do you by chance have a flow that I can try?

P.S. I already see where I am going to get stuck. How do I format the "roi" row (i.e. change color if it's negative) - it doesn't exist in the tabulator ui_control ?

[Christian-Me]

Have you tried the examples? Especially example 3-6 are all around ui_control and tabulator commands.

And then the ultimate resource is the tabulator docs! Make sure you selected Version 4.3.

Nearly everything shown there you can do with via ui-table either msg.ui_control (for styling) and msg.payload= {}. node-red-node-ui-table (node) - Node-RED

I don't know etable but the developper "DEPRECATED" the node almost 2 years ago. I think is acts similar but could not do much more for you.

For styling and how to use commands you might like to take a look here in the forum ... There is a ton of information starting from: Ui-table supports ui_control

And to do things simpler you might give my ui-table-handler a test. I recently made a demo and update for it

And last but not least this one. [Announce] remote device table (and collaboration wanted)

@interscope101

it doesn't exist in the tabulator ui_control ?

As I wrote before everything tabulator offers is possible when it comes to styling ... in this case you have to write your own formatter which is a simple callback function to style your cells

ui_control is the config object you pass to ui-table. The examples show how to use tabulator on the client side. As you control the client (dashboard) from a server (node-red) you have to pass everything through ui-table via msg.ui-control. The only challenge is to "translate" it into your js object or JSON or pass commands via msg.payload [Object]

msg.payload = {
    command:"updateOrAddData",
    arguments:[
        {
            "Label": "ROI",
            "Investment 1": 999
        }
    ],
    returnPromise : false
    }
}

Updates the ROI in investment 1 to 999 (and this is the command)

[interscope101]

So I was able to replicate my table with tabular UI control. This is the actual setup:

msgAcct = {}; 

var coinbase = Number(msg.payload[0].usd_amount);
var binance = Number(msg.payload[1].usd_amount);
var binance_dc = ((msg.payload[1].day_profit_usd_percentage)*100).toFixed(2);
var ftxbots = Number(msg.payload[4].usd_amount);
var ftxbots_dc = ((msg.payload[4].day_profit_usd_percentage)*100).toFixed(2);
var ftxtrade = Number(msg.payload[6].usd_amount);
var ftxtrade_dc = ((msg.payload[6].day_profit_usd_percentage)*100).toFixed(2);
var ftxmain = Number(msg.payload[8].usd_amount);
var gate = Number(msg.payload[10].usd_amount);
var gate_dc = ((msg.payload[10].day_profit_usd_percentage)*100).toFixed(2);
var total = (coinbase+binance+ftxbots+ftxtrade+ftxmain+gate);


msgAcct.payload = [
    {
        "Binance": binance_dc+" %",
        "FTX Bots": ftxbots_dc+" %",
        "FTX Trade": ftxtrade_dc+" %",
        "Gate":  gate_dc+" %",
        "TOTAL": " "
    },
    {
        "Binance": "$ "+binance.toFixed(0),
        "FTX Bots":"$ "+ftxbots.toFixed(0),
        "FTX Trade":"$ "+ftxtrade.toFixed(0),
        "Gate": "$ "+gate.toFixed(0),
        "TOTAL": "$ "+total.toFixed(0)
        
    },
    {
        "Binance": (((binance - 4000)/4000)*100).toFixed(2)+" %",
        "FTX Bots": (((ftxbots - 40)/40)*100).toFixed(2)+" %",
        "FTX Trade": (((ftxtrade - 500)/500)*100).toFixed(2)+" %",
        "Gate":  (((gate - 510)/510)*100).toFixed(2)+" %",
        "TOTAL": (((total - 6000)/6000)*100).toFixed(2)+" %"
    }
]


return msgAcct 

{
    "tabulator": {
        "columns": [
            {
                "title": "Binance",
                "field": "Binance",
                "align": "center"
            },
            {
                "title": "FTX Bots",
                "field": "FTX Bots",
                "align": "center"
            },
            {
                "title": "FTX Trade",
                "field": "FTX Trade",
                "align": "center"
            },
            {
                "title": "Gate",
                "field": "Gate",
                "align": "center"
            },
            {
                "title": "TOTAL",
                "field": "TOTAL",
                "align": "center"
            }
        ],
        "item": "",
        "layout": "fitColumns",
        "movableColumns": false,
        "groupBy": "",
        "initialSort": "time"
    }
}

However , I still don't understand how to select/style a row. For instance, I want to apply the following to the 1st and 3rd rows:

"formatter": "function(cell, formatterParams){var value = cell.getValue(); if (value !== null) {if(value >= 0){cell.getElement().style.color ='#609f70'} else {cell.getElement().style.color ='#ff4a68'} return value +'%';}}"

[interscope101]

I was also able to get it working using your "ui-table-handler" (except for getting "msg.topic undefined" error message).

[Christian-Me]

The ui-table-handler is based on the idea to only update changed cells / rows as new data arrives. For this it is essential to identify the row by a index column with unique values. The index column has to defined in the config object index: "myIndex" and in the config of ui-table-handler. Either you send your data as an object with msg.topic holding the row index value or include the index in your msg.payload={myIndex:"thisRow", value1 :100}

Without testing the formatter seams correct (perhaps add semicolons at the end of your cell.getElement ... statements. Take a look at you browsers development tools / log console of your dashboard for error messages. For debugging you can place the debugger statement or simple console.log(); in your formatter to see if your formatter is triggered and producing the results you expect.

Place the formatter callback in the column object of your collums array you like to be formatted this way.

[interscope101]

Hi, understand your explanation, but I am lacking proficiency to figure out code execution. Using my configuration, could you show me specifically "where" I define "myIndex", send data as msg.payload, and apply formatter to row #1 (using its index). The "formatter": function should be fine because it's working in a different table (where I am formatting a column field in a typical fashion). Thank you so much.

[Christian-Me]

Please reply to my post not the complete threat! Otherwise I don't get notified. (and I can't scan my old posts)

@interscope101

could you show me specifically "where" I define "myIndex",

and

So in this case if I like to address a special row I can either send

msg.topic = 1;
msg.payload = {"col1":5}

to set column 1 in row 1 to 5 or

msg.payload = {"id":1,"col1":5}