Using tabulator? Step by step example?

So I started looking at the examples for tabulator, nice what it seems to be able to do... but... I am lost, frankly, I am not an HTML or CSS guru. So even a simple task seems complex?

I want to change a column from showing a simple true/false value to one icon to another based on the value. The initial issue is how do you use tabulator? Do you just paste the tabulator source into a template node or what?

The documentation seems to say... oh look here is the tabulator source! Look how great it is... but I can see an example of how you actually implement it? I am starting at the very beginning, so a step by step explanation would be appreciated. Right now, the examples all suggest going from zero to 100 percent done, what happen to 2-99 steps?

Using the image formatter seems like an option to display my icons, well small images, but I can't yet see the steps to get this done.

Use the ui_table node, which is based on tabulator. If you have installed the node, import all the examples to see how to use the node.

Ok, ui_table node has just a section to add column definitions? A description tab? And an appearance tab? None of those suggest as place to import something?

Do I set msg.payload to the tabulator example? Tried that did not seem to work, or I did it wrong? Do you paste in the tabulator (text) into the format field for a given column? That would seem to be just a way to inject based on the description some specific HTML settings? Colors what have you.

When I asked for a step by step example, I really do need it, because I am not understanding your on-liner. sorry. Just don't get it.

As I said - when you have installed the ui_table node import the examples. So you can see directly in the flow how to create a table with colors, icons ...

the change node - contains how to create the formats of the different columns:

{
    "tabulator": {
        "columnResized": "function(column){     var newColumn = {         field: column._column.field,         visible: column._column.visible,         width: column._column.width,         widthFixed: column._column.widthFixed,         widthStyled: column._column.widthStyled     }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }",
        "columnMoved": "function(column, columns){     var newColumns=[];     columns.forEach(function (column) {         newColumns.push({'field': column._column.field});     });     this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }",
        "groupHeader": "function (value, count, data, group) {return value + \"<span style='color:#d00; margin-left:10px;'>(\" + count + \" Termostat\"+((count>1) ? \"e\" : \"\") + \")</span>\";}",
        "columns": [
            {
                "formatterParams": {
                    "target": "_blank"
                },
                "title": "ROom",
                "field": "room",
                "width": 100,
                "frozen": true
            },
            {
                "formatterParams": {
                    "target": "_blank"
                },
                "title": "Device",
                "field": "name",
                "width": 100,
                "align": "center"
            },
            {
                "formatterParams": {
                    "target": "_blank"
                },
                "title": "Type",
                "field": "deviceType",
                "width": 100,
                "align": "center"
            },
            {
                "formatterParams": {
                    "target": "_blank"
                },
                "title": "Measurements",
                "columns": [
                    {
                        "formatterParams": {
                            "target": "_blank"
                        },
                        "title": "target",
                        "field": "SET_TEMPERATURE-value",
                        "formatter": "function(cell, formatterParams, onRendered){return cell.getValue()+'°C';}",
                        "topCalc": "avg",
                        "width": 100
                    },
                    {
                        "formatterParams": {
                            "target": "_blank",
                            "min": 10,
                            "max": 25,
                            "color": [
                                "blue",
                                "green",
                                "red"
                            ],
                            "legend": "function (value) {return '&nbsp;&nbsp;'+value+'°C';}",
                            "legendColor": "#101010",
                            "legendAlign": "left"
                        },
                        "title": "current",
                        "field": "ACTUAL_TEMPERATURE-value",
                        "formatter": "progress",
                        "topCalc": "avg",
                        "width": 100
                    },
                    {
                        "formatterParams": {
                            "target": "_blank",
                            "min": 0,
                            "max": 99,
                            "color": [
                                "gray",
                                "orange",
                                "red"
                            ],
                            "legend": "function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}",
                            "legendColor": "#101010",
                            "legendAlign": "center"
                        },
                        "title": "Valve",
                        "field": "VALVE_STATE-value",
                        "formatter": "progress",
                        "topCalc": "max",
                        "width": 100
                    },
                    {
                        "formatterParams": {
                            "target": "_blank",
                            "min": 1.5,
                            "max": 4.6,
                            "color": [
                                "red",
                                "orange",
                                "green"
                            ],
                            "legend": "function (value) {return value+' V';}",
                            "legendColor": "#101010",
                            "legendAlign": "center"
                        },
                        "title": "Batt",
                        "field": "BATTERY_STATE-value",
                        "formatter": "progress",
                        "topCalc": "min",
                        "width": 100
                    }
                ]
            },
            {
                "formatterParams": {
                    "target": "_blank"
                },
                "title": "Settings",
                "columns": [
                    {
                        "formatterParams": {
                            "target": "_blank",
                            "min": 0,
                            "max": 30,
                            "color": [
                                "red",
                                "orange",
                                "green"
                            ],
                            "legend": "function (value) {     if (value>0)         return \"<span style='color:#101010;'>\"+value+\" min</span>\";     else         return \"<span style='color:#A0A0A0;'>aus</span>\"; }",
                            "legendColor": "#101010",
                            "legendAlign": "center"
                        },
                        "title": "Boost",
                        "field": "BOOST_STATE-value",
                        "formatter": "progress",
                        "width": 100
                    },
                    {
                        "formatterParams": {
                            "target": "_blank",
                            "allowEmpty": true,
                            "allowTruthy": true,
                            "tickElement": "<i class='fa fa-clock-o'></i>",
                            "crossElement": "<i class='fa fa-ban'></i>"
                        },
                        "title": "Auto",
                        "field": "AUTO_MODE-value",
                        "formatter": "tickCross",
                        "width": 100,
                        "align": "center"
                    },
                    {
                        "formatterParams": {
                            "target": "_blank"
                        },
                        "title": "Mode",
                        "field": "CONTROL_MODE-value",
                        "formatter": "function(cell, formatterParams, onRendered){     var html=\"<i class=\\\"\";     switch(cell.getValue()) {         case 0: html+=\"fa fa-calendar-check-o\"; break;         case 1: html+=\"fa fa-hand-o-up\"; break;         case 2: html+=\"fa fa-suitcase\"; break;         case 3: html+=\"fa fa-spinner fa-spin fa-fw\"; break;     }     html+='\\\"></i>';     return html; }",
                        "width": 100,
                        "align": "center"
                    },
                    {
                        "formatterParams": {
                            "target": "_blank"
                        },
                        "title": "Auto",
                        "field": "AUTO_MODE-value",
                        "formatter": "tick",
                        "width": 100,
                        "align": "center"
                    }
                ]
            }
        ],
        "layout": "fitColumns",
        "movableColumns": true,
        "groupBy": ""
    },
    "customHeight": 12
}

The syntax and options is the documented in the tabulator page: Tabulator

The table_ui node uses tabululator 4.x, but I do not know what the problem is to learn with the examples the ui_table node includes.

so as I said, open your import window and try the examples of the ui_table node.

the example above is the ui_control table.

In English: Import= Import, Beispiele = Examples.

How to fill a table with data - in this example you can see in the inject Node - is an array of objects as msg.payload. The format options are in msg.ui_controi.

In the help of the ui_table node and you do not want to send the complete table data, you can manipulate data the format of sending commands:

  • command a valid tabulator command such as addRow, replaceData or addFilter

Those are described in detail in the tabluator page Tabulator

So at the beginning - you can also start with static fields in the ui_table node and add data in form of an objects array in msg.payload - then in later steps you can use formatting messages which let you define formats, which cannot be defined within the node itself.

1 Like

A real specialist (guru) is @Christian-Me with impressive projects like this:

He is also very active in this forum. So if the basics are clear, I am sure, that he can help you - if he is not busy. But have a look to this impressive project which can be imported as well.

1 Like

Yup I know him, we have traded notes and ideas before. Thanks for the more detailed explanation, I greatly appreciated it. I had a good chuckle when I saw 'Beispiele' Had German grandparents, and spent may summers just outside of Munich. "Aber mein Deutsch ist ziemlich schlecht. Kaum Chance es zu nutzen."

As I live just outside Munich - you know in which environment I live. :wink: And your german sentences are perfect.

I know that my posts are often not perfect in grammar and in expression, not only because I am not an english native speaker but also as I don't reread my posts before I press the send button. :wink:

Wer macht das! :slight_smile:

1 Like

Wow, that is totally cool!

I cheat... when I get stuck... I use Google translate to figure out what I forgot or screwed up. However...

I had a German instructor (at University) that said something that was really funny... About German... She said take the sentence as a classic English child poem stanze, "The cow jumped over the fence."

Then she instructed the class to translate it into German and then back into English but do it LITERALLY rather than correct for common use, or English sentence structure. Which means you can end up with something like... "The cow, over the fence, jumped." Or... even "Jumped, The Cow, the fence over."

After everyone stopped laughing... I realized just how different English and German grammar really is!