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 ' '+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)? ' '+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.
And your german sentences are perfect.
