# 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:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@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")

</div>

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)

---

_[View the full topic](https://discourse.nodered.org/t/2d-vertical-ui-table-in-tabulator-format/56756)._