# 2D/vertical UI-Table in Tabulator format?
**URL:** https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756
**Category:** General
**Created:** [16 January 2022 18:29 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756 "2022-01-16T18:29:29Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@interscope101](https://discourse.nodered.org/u/interscope101)
#### Post date: [16 January 2022 18:29 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/1 "2022-01-16T18:29:29Z")
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!
```auto
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;
```
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [17 January 2022 18:06 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/2 "2022-01-17T18:06:05Z")
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.
```auto
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
```auto
{
"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](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849):
>
> 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](https://discourse.nodered.org/t/ui-table-in-conjunction-with-ui-table-handler/56554/5)
---
### Author:  [@interscope101](https://discourse.nodered.org/u/interscope101)
#### Post date: [17 January 2022 18:46 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/4 "2022-01-17T18:46:20Z")
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 ?
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [17 January 2022 20:25 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/5 "2022-01-17T20:25:11Z")
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](http://tabulator.info/docs/4.3)! 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](https://flows.nodered.org/node/node-red-node-ui-table)
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](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870)
And to do things simpler you might give my ui-table-handler a test. [I recently made a demo and update for it](https://discourse.nodered.org/t/get-ui-table-data-in-json-format/55262/11)
And last but not least this one. [[Announce] remote device table (and collaboration wanted)](https://discourse.nodered.org/t/announce-remote-device-table-and-collaboration-wanted/22505)
> [@interscope101](#):
>
> it doesn't exist in the tabulator ui\_control ?
As I wrote before everything [tabulator offers](http://tabulator.info/examples/4.3) is possible when it comes to styling ... in this case you have to write your own [formatter which is a simple callback](https://discourse.nodered.org/t/ui-table-in-conjunction-with-ui-table-handler/56554/5) 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]
```auto
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](http://tabulator.info/docs/4.3/update#alter))
---
### Author:  [@interscope101](https://discourse.nodered.org/u/interscope101)
#### Post date: [18 January 2022 01:03 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/7 "2022-01-18T01:03:06Z")
So I was able to replicate my table with tabular UI control. This is the actual setup:
```auto
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
```
```auto
{
"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 +'%';}}"
---
### Author:  [@interscope101](https://discourse.nodered.org/u/interscope101)
#### Post date: [18 January 2022 01:18 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/8 "2022-01-18T01:18:35Z")
I was also able to get it working using your "ui-table-handler" (except for getting "msg.topic undefined" error message).
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [18 January 2022 08:04 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/9 "2022-01-18T08:04:46Z")
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.
---
### Author:  [@interscope101](https://discourse.nodered.org/u/interscope101)
#### Post date: [18 January 2022 16:57 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/10 "2022-01-18T16:57:33Z")
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.
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [20 January 2022 23:52 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/11 "2022-01-20T23:52:43Z")
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
```auto
msg.topic = 1;
msg.payload = {"col1":5}
```
to set column 1 in row 1 to 5 or
```auto
msg.payload = {"id":1,"col1":5}
```
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [21 March 2022 23:53 UTC](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756/12 "2022-03-21T23:53:32Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.