UI Table Adjustments

[jgreenmt]

Hello,

I have a series of questions concerning the ui_table node. However to get things started I will start with two.

1. Is there a simple way to change the font for the entire table? I have seen many examples where you can adjust individual columns or even cells. From my understanding they involve rebuilding/reformatting the cell and then add the information back in. Is there not a simple ui_control parameter/message that will apply to the entire table? I have used a ui_template node in the past to adjust the font of ui_text nodes, perhaps this is in the right direction?

2. In the same vein, is there a simple way to change the color of the progress bar? Ideally, each row color would change based on the value (i.e. 0-50 is green, 51-100 is red). I know how to change the color of the cell, but I need the varying length of the progress bar as well.

I have read through the Tabulator documentation and I have also reviewed several forum posts about the ui_table. Any information to my specific questions as well as any general information that would make working with tables easier is appreciated. Thank you in advance.

[jgreenmt]

Ui-table CSS styling

Hi, I would like to style my table a bit more to fit in with the reset of the theme, at the moment it is a dark theme that does not really fit in for me, an pointers please [image]

I found this thread and imported the example and played around with the values but none of the color settings are taking effect. In fact, the only change I can see from the original table style and the new style after importing the ui_template node, is that the "sorting arrow" of each column is hidden. Which is correct. I have moved the ui_template node into the tab and group where the ui_table resides. Does anyone know why the other CSS styling isn't taking effect?

[jbudd]

Maybe post a simple example flow with your ui_template so we can take a look at it?

[jgreenmt]

I will divide my response into two replies.

I made some progress on the color changing progress bar by revisiting one of the examples that comes with the ui_table node. I have altered the code to fit my needs and so far this is working as expected. The following is the code inside a function node:

msg = {};
msg.topic = "columns"
msg.ui_control = {tabulator:{}};
msg.ui_control.tabulator[msg.topic]= [
    {
        "field": "tech",
        "title": "Technician",
        "formatter": "function(cell, formatterParams, onRendered) {return \"<span style='font-size:24px'>\" + cell.getValue() + \"</span>\";}"
    },
    {
        "field": "project",
        "title": "Project",
        "formatter": "function(cell, formatterParams, onRendered) {return \"<span style='font-size:24px'>\" + cell.getValue() + \"</span>\";}"
    },
    {
        "field": "station",
        "title": "Station",
        "formatter": "function(cell, formatterParams, onRendered) {return \"<span style='font-size:24px'>\" + cell.getValue() + \"</span>\";}"
    },
    {
                        "formatterParams": {
                            "target": "_blank",
                            "min": 0,
                            "max": 100,
                            "color": [
                                "green",
                                "orange",
                                "red"
                            ],
                            "legend": "function (value) {return 'Running&nbsp&nbsp';}",
                            "legendColor": "white",
                            "legendAlign": "right",
                        },
                        "title": "State",
                        "field": "state",
                        "formatter": "progress",
                    },
];
msg.payload = null;
return msg;

The only question I have about the progress bar specifically now is if I can change the font size and make the font bold for the legend? I have tried a couple of keys such as legendFontSize and legendSize but I'm not sure what the tags are for this.

[jgreenmt]

As you can see in the code above I am having to adjust the font individually for each property (column). So my original question of being able to adjust the universal font for the table still stands.

@jbudd This is the code inside my ui_template that I borrowed from the example I posted above. If you would like me to share a flow I can, but I believe I followed the instructions properly from the example. The only instructions he gave were to put the ui_template node in the same group as your ui_table which I have done.

<style>

/* Tabelle selbst formatieren*/

  .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#111217;font-size:18px}

/* Header formatieren */
  .tabulator .tabulator-header{border-bottom:1px solid #BBB;background-color:#111217}
  .tabulator-col-content{background-color:#111217;height:37px}
  .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#111217}
  .tabulator-arrow{visibility: collapse;}
  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}

/* Zellen formatieren*/
  .tabulator-row{min-height:31px;background-color:#191E21}
  .tabulator-row:nth-child(2n){background-color:#111217}
  .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}


</style>

Examples for node-red-node-ui-table

@kazuhitoyokoi / @dceejay - I just stumbled across your new node-red-ui-node-table table node. Very nice! I have tons of Node-RED dashboards where I hand build html tables inside function nodes and render them in an ui_template node. This is going to be a fantastic simplification. I've started to experiment with the new Table node. https://flows.nodered.org/node/node-red-ui-node-table I would love to see more table example screenshots posted to Thanks!

In this thread another ui_template node was used to adjust the formatting. It contains almost the same code but with different styling. This one doesn't work for me either.

Also just to clarify originally I imported both examples and did not change anything except for the group location. The code inside was identical to the example I imported. Later I tried adjusting the color values but at no point has either example changed any of the colors in my table.

[jbudd]

Without any styling in template:

I didn't have any trouble (except for lack of taste) changing fonts and colours:

My changes marked ****

I think I had to make the selector for the rows more precise by changing .tabulator-row to .tabulator-table .tabulator-row. Without that the colours were only applied to the odd (yellow) lines.

<style>
 .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#111217;font-size:18px; font-family: "Times New Roman", serif;} /****/

/* Header formatieren */
  .tabulator-col-title {background-color:gold; color:blue; font-family: "Comic Sans MS", sans-serif;}  /****/
  .tabulator .tabulator-header{border-bottom:1px solid #BBB;}
  .tabulator-col-content{background-color:#111217;height:37px}
  .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#111217}
  .tabulator-arrow{visibility: collapse;}
  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}

/* Zellen formatieren*/
  .tabulator-table .tabulator-row-odd{min-height:31px;background-color:yellow; color:red;} /****/
  .tabulator-table .tabulator-row-even{min-height:31px;background-color:red; color:yellow;} /****/
  .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}
</style>

[jgreenmt]

I copied and pasted your code into my template node and most of the changes took effect, except for the "even" row. The font color changed, but the background color stayed the same for some reason.

[jbudd]

Please post a flow containing that data, the ui-table node and the template node.

Is it possible that you have multiple templates contributing to the table styling?
You mentioned moving the template from "Added to site head section" to "Widget in group".
Styling in the site header is applied to all dashboard tabs.
Styling in a single group is (surprisingly) applied to all groups on that tab.

Also, some dashboard appearances are affected by settings in the Site tab of Dashboard sidebar.
Mine currently has "Use Angular theme in ui_template", which I think is the default.

[jgreenmt]

I don't believe I ever changed the site setting but mine was set to "Node-Red theme everywhere". I changed it to match yours but it didn't make a difference. This is my flow. In the image I posted I had a ui_control message that was affecting the format of the "State" property to style the color of the progress bar and add text to the legend. But I have removed that for testing this specific issue.

[
    {
        "id": "b93f69120f6dd637",
        "type": "subflow",
        "name": "Subflow 1",
        "info": "",
        "category": "",
        "in": [
            {
                "x": 80,
                "y": 120,
                "wires": [
                    {
                        "id": "5ea00a438d21ca49"
                    }
                ]
            }
        ],
        "out": [
            {
                "x": 600,
                "y": 120,
                "wires": [
                    {
                        "id": "bdc45502a9108729",
                        "port": 0
                    }
                ]
            }
        ],
        "env": [],
        "meta": {},
        "color": "#E2D96E",
        "icon": "node-red/sort.svg"
    },
    {
        "id": "5ea00a438d21ca49",
        "type": "switch",
        "z": "b93f69120f6dd637",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "cont",
                "v": "Tech",
                "vt": "str"
            },
            {
                "t": "cont",
                "v": "Project",
                "vt": "str"
            },
            {
                "t": "cont",
                "v": "State",
                "vt": "str"
            },
            {
                "t": "cont",
                "v": "Station",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 4,
        "x": 190,
        "y": 120,
        "wires": [
            [
                "befe53d35bec02a9"
            ],
            [
                "1ae7a55685676f6e"
            ],
            [
                "6862e388b8515d1d"
            ],
            [
                "9612e8e6566d5624"
            ]
        ]
    },
    {
        "id": "befe53d35bec02a9",
        "type": "change",
        "z": "b93f69120f6dd637",
        "name": "tech",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "Tech: ",
                "fromt": "str",
                "to": "",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "tech",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 330,
        "y": 60,
        "wires": [
            [
                "bdc45502a9108729"
            ]
        ]
    },
    {
        "id": "1ae7a55685676f6e",
        "type": "change",
        "z": "b93f69120f6dd637",
        "name": "project",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "Project: ",
                "fromt": "str",
                "to": "",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "project",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 330,
        "y": 100,
        "wires": [
            [
                "bdc45502a9108729"
            ]
        ]
    },
    {
        "id": "6862e388b8515d1d",
        "type": "change",
        "z": "b93f69120f6dd637",
        "name": "state",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "State: ",
                "fromt": "str",
                "to": "",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "state",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 330,
        "y": 140,
        "wires": [
            [
                "bdc45502a9108729"
            ]
        ]
    },
    {
        "id": "bdc45502a9108729",
        "type": "join",
        "z": "b93f69120f6dd637",
        "name": "",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": true,
        "timeout": "",
        "count": "3",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 490,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "9612e8e6566d5624",
        "type": "change",
        "z": "b93f69120f6dd637",
        "name": "station",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "Station: ",
                "fromt": "str",
                "to": "",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "station",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 330,
        "y": 180,
        "wires": [
            [
                "bdc45502a9108729"
            ]
        ]
    },
    {
        "id": "1f8526631751f1b7",
        "type": "ui_table",
        "z": "2d05594975b52966",
        "group": "33d58f3df10683be",
        "name": "",
        "order": 3,
        "width": 30,
        "height": 8,
        "columns": [
            {
                "field": "state",
                "title": "State",
                "width": "",
                "align": "right",
                "formatter": "progress",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "station",
                "title": "Station",
                "width": "8%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "tech",
                "title": "Technician",
                "width": "25%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "project",
                "title": "Project",
                "width": "14%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 0,
        "cts": false,
        "x": 770,
        "y": 400,
        "wires": []
    },
    {
        "id": "0e5dbb3c7d3f89d5",
        "type": "inject",
        "z": "2d05594975b52966",
        "name": "init",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 410,
        "y": 400,
        "wires": [
            [
                "3da5d03e473191cb"
            ]
        ]
    },
    {
        "id": "3da5d03e473191cb",
        "type": "function",
        "z": "2d05594975b52966",
        "name": "data",
        "func": "msg.payload = [\n    flow.get(\"hs1\"),\n    flow.get(\"hs2\"),\n    flow.get(\"hs3\"),\n    flow.get(\"hs4\"),\n    flow.get(\"hs5\"),\n    flow.get(\"hs6\")\n]\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 530,
        "y": 400,
        "wires": [
            [
                "1f8526631751f1b7"
            ]
        ]
    },
    {
        "id": "d85e38c2acfb53ab",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 1",
        "filename": "/users/jgreenmt/Documents/hs1.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 120,
        "wires": [
            [
                "6d6e01688b271a93"
            ]
        ]
    },
    {
        "id": "4f1b8ed834e1a8b2",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs1",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "d1f6310d7be7cb89",
        "type": "inject",
        "z": "2d05594975b52966",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 260,
        "y": 220,
        "wires": [
            [
                "d85e38c2acfb53ab",
                "9d54f76f47b932e9",
                "318aa5e749697273",
                "c51e6c3cede11543",
                "fa9c76b0ada470d3",
                "36b30f7bf4034606"
            ]
        ]
    },
    {
        "id": "6d6e01688b271a93",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 120,
        "wires": [
            [
                "4f1b8ed834e1a8b2"
            ]
        ]
    },
    {
        "id": "9d54f76f47b932e9",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 2",
        "filename": "/users/jgreenmt/Documents/hs2.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 160,
        "wires": [
            [
                "762757b1cff446de"
            ]
        ]
    },
    {
        "id": "318aa5e749697273",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 3",
        "filename": "/users/jgreenmt/Documents/hs3.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 200,
        "wires": [
            [
                "1ac5cf25cbb03227"
            ]
        ]
    },
    {
        "id": "c51e6c3cede11543",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 4",
        "filename": "/users/jgreenmt/Documents/hs4.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 240,
        "wires": [
            [
                "ab35d582cc39929b"
            ]
        ]
    },
    {
        "id": "fa9c76b0ada470d3",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 5",
        "filename": "/users/jgreenmt/Documents/hs5.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 280,
        "wires": [
            [
                "aef92e3d09dae1c6"
            ]
        ]
    },
    {
        "id": "36b30f7bf4034606",
        "type": "file in",
        "z": "2d05594975b52966",
        "name": "read 6",
        "filename": "/users/jgreenmt/Documents/hs6.txt",
        "format": "lines",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 450,
        "y": 320,
        "wires": [
            [
                "e0dfbf9153d853a7"
            ]
        ]
    },
    {
        "id": "762757b1cff446de",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 160,
        "wires": [
            [
                "89eae61eef50ce2b"
            ]
        ]
    },
    {
        "id": "1ac5cf25cbb03227",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 200,
        "wires": [
            [
                "fe6155bfbc3025b2"
            ]
        ]
    },
    {
        "id": "ab35d582cc39929b",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 240,
        "wires": [
            [
                "1552f2b6b9caac33"
            ]
        ]
    },
    {
        "id": "aef92e3d09dae1c6",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 280,
        "wires": [
            [
                "c181f4b008145e4e"
            ]
        ]
    },
    {
        "id": "e0dfbf9153d853a7",
        "type": "subflow:b93f69120f6dd637",
        "z": "2d05594975b52966",
        "name": "parse data",
        "x": 590,
        "y": 320,
        "wires": [
            [
                "41b475c2fe643e1d"
            ]
        ]
    },
    {
        "id": "89eae61eef50ce2b",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs2",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "fe6155bfbc3025b2",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs3",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "1552f2b6b9caac33",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs4",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "c181f4b008145e4e",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs5",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "41b475c2fe643e1d",
        "type": "change",
        "z": "2d05594975b52966",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hs6",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 750,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "f2ba88d42dfdee83",
        "type": "ui_template",
        "z": "2d05594975b52966",
        "group": "33d58f3df10683be",
        "name": "CSS: ui-table - grafana",
        "order": 1,
        "width": "0",
        "height": "0",
        "format": "<style>\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#111217;font-size:18px; font-family: \"Times New Roman\", serif;} /****/\n\n/* Header formatieren */\n  .tabulator-col-title {background-color:gold; color:blue; font-family: \"Comic Sans MS\", sans-serif;}  /****/\n  .tabulator .tabulator-header{border-bottom:1px solid #BBB;}\n  .tabulator-col-content{background-color:#111217;height:37px}\n  .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#111217}\n  .tabulator-arrow{visibility: collapse;}\n  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n  .tabulator-table .tabulator-row-odd{min-height:31px;background-color:yellow; color:red;} /****/\n  .tabulator-table .tabulator-row-even{min-height:31px;background-color:red; color:yellow;} /****/\n  .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 720,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "33d58f3df10683be",
        "type": "ui_group",
        "name": "Status",
        "tab": "a18d24b9bc13eb6b",
        "order": 1,
        "disp": true,
        "width": 30,
        "collapse": false,
        "className": ""
    },
    {
        "id": "a18d24b9bc13eb6b",
        "type": "ui_tab",
        "name": "Heat",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

[jbudd]

OK but it doesn't include any data since I don't have your files hs1.txt - hs6.txt.

[jgreenmt]

I added the .tabulator-table to the row sections to the example I posted above and my table still doesn't look like the table in the example. This is a screenshot of the post:

This table has a really nice look to it, but my table doesn't share the same colors or formatting when it comes to the text. Only the cell colors and the sorting arrow seem to be affected.

Perhaps the answer is he was using another template or ui_control message to affect the font colors based on the data.

Is there a way to center align the text on the table header?

[jgreenmt]

I simplified the flow to inject the data directly:

[
    {
        "id": "1f8526631751f1b7",
        "type": "ui_table",
        "z": "2d05594975b52966",
        "group": "33d58f3df10683be",
        "name": "",
        "order": 3,
        "width": 30,
        "height": 8,
        "columns": [
            {
                "field": "state",
                "title": "State",
                "width": "",
                "align": "right",
                "formatter": "progress",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "station",
                "title": "Station",
                "width": "8%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "tech",
                "title": "Technician",
                "width": "25%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "project",
                "title": "Project",
                "width": "14%",
                "align": "center",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 0,
        "cts": false,
        "x": 770,
        "y": 400,
        "wires": []
    },
    {
        "id": "0e5dbb3c7d3f89d5",
        "type": "inject",
        "z": "2d05594975b52966",
        "name": "init",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"station\":1,\"tech\":\"Danny\",\"project\":\"A1234\",\"state\":40},{\"station\":2,\"tech\":\"Mike\",\"project\":\"A2345\",\"state\":20},{\"station\":3,\"tech\":\"Bob\",\"project\":\"A3234\",\"state\":\"80\"}]",
        "payloadType": "json",
        "x": 410,
        "y": 400,
        "wires": [
            [
                "1f8526631751f1b7"
            ]
        ]
    },
    {
        "id": "f2ba88d42dfdee83",
        "type": "ui_template",
        "z": "2d05594975b52966",
        "group": "33d58f3df10683be",
        "name": "CSS: ui-table - grafana",
        "order": 1,
        "width": "0",
        "height": "0",
        "format": "<style>\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#111217;font-size:18px; font-family: \"Times New Roman\", serif;} /****/\n\n/* Header formatieren */\n  .tabulator-col-title {background-color:gold; color:blue; font-family: \"Comic Sans MS\", sans-serif;}  /****/\n  .tabulator .tabulator-header{border-bottom:1px solid #BBB;}\n  .tabulator-col-content{background-color:#111217;height:37px}\n  .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#111217}\n  .tabulator-arrow{visibility: collapse;}\n  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n  .tabulator-table .tabulator-row-odd{min-height:31px;background-color:yellow; color:red;} /****/\n  .tabulator-table .tabulator-row-even{min-height:31px;background-color:red; color:yellow;} /****/\n  .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 720,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "33d58f3df10683be",
        "type": "ui_group",
        "name": "Status",
        "tab": "a18d24b9bc13eb6b",
        "order": 1,
        "disp": true,
        "width": 30,
        "collapse": false,
        "className": ""
    },
    {
        "id": "a18d24b9bc13eb6b",
        "type": "ui_tab",
        "name": "Heat",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Also here is a screenshot of my table:

[jbudd]

Using what you just posted, I get the same result as you. (Image includes a snippet from the browser inspector). The styling is overridden by the default tabulator_midnight.min.css

Using another copy of your inject and table nodes, plus my styling from earlier on, in another tab, I get the alternate red and yellow rows. The styling overrides tabulator_midnight.min.css

Yet the styling in the two templates is identical!

The difference is that in the dashboard sidebar layout tab, my version lists the table before the template, yours lists the template first.

It's a surprise that the order matters. A bit worrying too because the order of widgets has a habit of changing by iteself when you deploy.

I suppose this is an example of why (as @hotNipi has previously advised me) the template styling should be in the page header.

Also I'm regretting choosing such garish colours in my example, sorry about that!

[jgreenmt]

Thank you for figuring that out! I would have never guessed that the order matters for something like that.
I just tried it and it works for me as well. Also no worries on the colors. It definitely gets the point across It also solved my next two questions.

The first was when I add text-align:center; to the template for the headers, the text was centered, but slightly misaligned. I tried adjusting padding and borders but nothing was working. As soon as I put the table widget above the template, it magically aligned properly. Go figure.

The second was I wanted to remove the little white lines (I assumed they were borders) but when I tried to adjust the border sizes nothing changed. Now that I have reordered the widgets those are behaving as expected as well.

It is very baffling to me that if the template node is first, certain aspects will adjust and display fine while others will not. I don't know if I ever would have figured something like that out on my own. I definitely appreciate the help and major kudos to you.

I do have one last question:

1. In the thread I linked in post #5 the author mentioned that there are a lot of tags in a file .node-red\node_modules\node-red-node-ui-table\lib\css\tabulator.min.css.map. I have tried opening this file in Notepad and MS Visual Studio and neither produce a very readable version of the tags. Is there a preferred program used to open this file? Or is there another place I can find a list of all the tags/properties of the table I can manipulate?

[jbudd]

There are various online tools that make it easier to view the CSS. Search for unminify CSS.

Or in your browser use the code inspector (I use Firefox which has right click, Inspect)
There is probably an option "Style editor" which shows the CSS unminified.

But what I usually do is select the element in the inspector pane, right click, copy CSS Path.
Then I experiment to see how much I can delete from the left of the long, long path .
Not very scientific I'm afraid.