Hi,
I use quite often Tabulator 5.5 using template nodes, usually it works quite good. I know have the problem with a new table, which needs the input datas to be sent two times to get the table displayed properly .
When I send the datas the first time, I only get the column headers displayed :
then after a second push, the table is displayed correctly :
I checked the browser console, and on initial load I get this error :
Don't know where it could come from... does anyone have any idea ?
Here is a test flow . Please note tabulator is needed for it to work :
[
{
"id": "28866f6cdec63a45",
"type": "ui_template",
"z": "e7f3a562ea744d10",
"group": "6c44f6e1d9275e76",
"name": "CAMPUS-OUT TABLE",
"order": 17,
"width": 30,
"height": 12,
"format": "<form>\n <div id=\"campusSender\" style=\"background-color:#000000;margin:0px;border:0px solid black\"></div>\n</form>\n\n<script type=\"text/javascript\">\n var $scope = this.scope;\n\n//create row popup contents\nvar rowPopupFormatter = function(e, row, onRendered){\nvar data = row.getData(),\ncontainer = document.createElement(\"div\"),\ncontents = \"<strong style='font-size:1.2em;'>DETAILS : </strong><br/><ul style='padding:0; margin-top:10px; margin-bottom:0;'>\";\n contents += \"<li><strong>Name:</strong> \" + data.type + \"</li>\";\n contents += \"<li><strong>Booking ID:</strong> \" + data.booking.id + \"</li>\";\n contents += \"<li><strong>Favourite Colour:</strong> \" + data.type + \"</li>\";\n contents += \"</ul>\";\n\ncontainer.innerHTML = contents;\n\nreturn container;\n};\n\n\n\n//create header popup contents\nvar headerPopupFormatter = function(e, column, onRendered){\nvar container = document.createElement(\"div\");\n\nvar label = document.createElement(\"label\");\nlabel.innerHTML = \"Filter Column:\";\nlabel.style.display = \"block\";\nlabel.style.fontSize = \".7em\";\n\nvar input = document.createElement(\"input\");\ninput.placeholder = \"Filter Column...\";\ninput.value = column.getHeaderFilterValue() || \"\";\n\ninput.addEventListener(\"keyup\", (e) => {\ncolumn.setHeaderFilterValue(input.value);\n});\n\ncontainer.appendChild(label);\ncontainer.appendChild(input);\n\nreturn container;\n};\n\n//create dummy header filter to allow popup to filter\nvar emptyHeaderFilter = function(){\nreturn document.createElement(\"div\");\n};\n\n\n\nvar senderTable = new Tabulator(\"#campusSender\",\n { initialSort:[\n {column:\"booking.scheduleInfo.startTimestamp\", dir:\"desc\"}//sort by this first\n //{column:\"height\", dir:\"desc\"}, //then sort by this second\n ],\n columnHeaderVertAlign:\"bottom\",\n layout: \"fitDataFill\",\n dataTree:true,\n dataTreeStartExpanded:true,\n movableColumns: true,\n headerVisible: true,\n resizableColumns: true,\n pagination: \"true\",\n paginationSizeSelector: [\n 10,\n 25,\n 50,\n 100,\n true\n ], //select list with an \"all\" option at the end of the list\n height: \"800px\",\n groupToggleElement: \"header\",\n rowContextPopup:rowPopupFormatter, // Add right click popup to Row\n //rowClickPopup: \"I'm a popup\", //add click popup to row\n data: [],\n columns: []\n });\n\nsenderTable.on(\"tableBuilt\", function () {\n $scope.send({\n payload: \"Grid is ready\"\n });\n});\n\n\nsenderTable.on(\"dataFiltered\", function (filters, rows) {\n console.log(`Post-filter event: ${rows.length\n } rows`);\n let data = [];\n for (let i = 0; i < rows.length; i++)\n data.push(rows[i\n ]._row.data);\n var msg = {};\n msg.payload = data;\n msg.topic = \"filtered_content\";\n msg.length = rows.length;\n //$scope.send(msg);\n //$scope.send({topic:\"filtered_content\"},{payload: \"export\" + data}); \n});\n/*\nsenderTable.on(\"dataFiltered\", function(filters, rows){\n //filters - array of filters currently applied\n //rows - array of row components that pass the filters\n console.log(`Post-filter event: ${rows.length} rows`);\n for (let i = 0 ; i < rows.length; i++)\n console.log(Object.entries(rows[i]));\n });\n*/\nsenderTable.on(\"rowClick\", function (e, row) {\n //alert(\"Row \" + row.getData().descriptor + \" Clicked!!!!\");\n\n //payload: row.getData() + \" Clicked!!!!\"\n var msg = {};\n msg.payload = row.getData();\n msg.topic = \"selectedRow\";\n //$scope.send(msg);\n\n\n});\n\n(function (scope) {\n $scope.$watch('msg', function (msg) {\n if (msg)\n switch (msg.payload) {\n case \"setdata\":\n //grid.clearData();\n senderTable.setData(msg.data);\n senderTable.setColumns(msg.columns);\n \n $scope.send({\n payload: \"Grid updated\",\n data: msg.data\n })\n ;\n break;\n }\n });\n})(scope);\n\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 2620,
"y": 1280,
"wires": [
[
"81b511ceca52fb41"
]
]
},
{
"id": "81b511ceca52fb41",
"type": "debug",
"z": "e7f3a562ea744d10",
"name": "debug 386",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 2650,
"y": 1320,
"wires": []
},
{
"id": "0910a3f1771d2688",
"type": "inject",
"z": "e7f3a562ea744d10",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "setdata",
"payloadType": "str",
"x": 2310,
"y": 1360,
"wires": [
[
"3e1b64dfa7ddaa6d"
]
]
},
{
"id": "bb78989c68c76d04",
"type": "ui_template",
"z": "e7f3a562ea744d10",
"group": "a7b73cad5ff34170",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"format": "<link href=\"tabulator-master/dist/css/tabulator_midnight.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\" src=\"tabulator-master/dist/js/tabulator.min.js\"></script>\n<script type=\"text/javascript\" src=\"luxon/luxon.js\"></script>\n<style>\n .tabulator-table .tabulator-cell {\n //color: #CC3A82;\n font-weight: bold;\n }\n .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {\n white-space: normal;\n }\n\n</style>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 2580,
"y": 1240,
"wires": [
[]
]
},
{
"id": "00f4c7b2a33952e7",
"type": "ui_button",
"z": "e7f3a562ea744d10",
"name": "REFRESH",
"group": "6c44f6e1d9275e76",
"order": 10,
"width": 4,
"height": 1,
"passthru": false,
"label": "REFRESH TEST",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 2290,
"y": 1320,
"wires": [
[
"3e1b64dfa7ddaa6d"
]
]
},
{
"id": "3e1b64dfa7ddaa6d",
"type": "change",
"z": "e7f3a562ea744d10",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "setdata",
"tot": "str"
},
{
"t": "set",
"p": "data",
"pt": "msg",
"to": "[{\"key\":\"virtual.2.0.3\",\"rev\":\"18-0cc4e28a-9696-44d3-856a-931294160382\",\"value\":{\"active\":true,\"bidirPartnerId\":null,\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":{},\"descriptor\":{\"desc\":\"\",\"label\":\"CAMPUS OUT 1\"},\"deviceId\":\"virtual.2\",\"extraAlertFilters\":[],\"extraFormats\":[],\"fDescriptor\":{\"desc\":\"Virtual Device 3 Vertex 3\",\"label\":\"Vertex 3\"},\"gpid\":{\"component\":15,\"pointId\":[\"virtual-2\",\"virt\",\"0\",\"3\"]},\"imgUrl\":\"\",\"isIgmpSource\":false,\"isVirtual\":true,\"mainDstIp\":{\"addr\":\"239.212.1.3\",\"type\":\"nAddress\"},\"mainDstMac\":null,\"mainDstPort\":null,\"mainDstVlan\":null,\"mainSrcGateway\":null,\"mainSrcIp\":\"10.70.224.26\",\"mainSrcMac\":null,\"mainSrcNetmask\":null,\"maps\":[],\"multiplicity\":1,\"partnerConfig\":null,\"public\":false,\"sdpSupport\":false,\"serviceId\":null,\"sipsMode\":\"SIPSSplit\",\"spareDstIp\":{\"addr\":\"239.212.2.3\",\"type\":\"nAddress\"},\"spareDstMac\":null,\"spareDstPort\":null,\"spareDstVlan\":null,\"spareSrcGateway\":null,\"spareSrcIp\":\"10.70.224.27\",\"spareSrcMac\":null,\"spareSrcNetmask\":null,\"tags\":[\"Vid_1080i50\",\"#CAMPUS\",\"Vid_1080p50\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"In\"},\"services\":[]},{\"key\":\"virtual.2.0.4\",\"rev\":\"24-76015913-f56e-4ed4-be72-888c2d26ac7a\",\"value\":{\"active\":true,\"bidirPartnerId\":null,\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":{},\"descriptor\":{\"desc\":\"\",\"label\":\"CAMPUS OUT 2\"},\"deviceId\":\"virtual.2\",\"extraAlertFilters\":[],\"extraFormats\":[],\"fDescriptor\":{\"desc\":\"Virtual Device 3 Vertex 4\",\"label\":\"Vertex 4\"},\"gpid\":{\"component\":15,\"pointId\":[\"virtual-2\",\"virt\",\"0\",\"4\"]},\"imgUrl\":\"\",\"isIgmpSource\":false,\"isVirtual\":true,\"mainDstIp\":{\"addr\":\"239.212.250.251\",\"type\":\"nAddress\"},\"mainDstMac\":null,\"mainDstPort\":null,\"mainDstVlan\":null,\"mainSrcGateway\":null,\"mainSrcIp\":\"10.70.224.251\",\"mainSrcMac\":null,\"mainSrcNetmask\":null,\"maps\":[],\"multiplicity\":1,\"partnerConfig\":null,\"public\":false,\"sdpSupport\":false,\"serviceId\":null,\"sipsMode\":\"SIPSSplit\",\"spareDstIp\":{\"addr\":\"239.212.250.252\",\"type\":\"nAddress\"},\"spareDstMac\":null,\"spareDstPort\":null,\"spareDstVlan\":null,\"spareSrcGateway\":null,\"spareSrcIp\":\"10.70.224.252\",\"spareSrcMac\":null,\"spareSrcNetmask\":null,\"tags\":[\"Vid_1080i50\",\"#CAMPUS\",\"Vid_1080p50\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"In\"},\"services\":[]},{\"key\":\"virtual.2.0.5\",\"rev\":\"30-f9923fbd-038a-4239-9594-e431b6a5b83c\",\"value\":{\"active\":true,\"bidirPartnerId\":null,\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":{},\"descriptor\":{\"desc\":\"\",\"label\":\"CAMPUS OUT 3\"},\"deviceId\":\"virtual.2\",\"extraAlertFilters\":[],\"extraFormats\":[],\"fDescriptor\":{\"desc\":\"Virtual Device 3 Vertex 5\",\"label\":\"Vertex 5\"},\"gpid\":{\"component\":15,\"pointId\":[\"virtual-2\",\"virt\",\"0\",\"5\"]},\"imgUrl\":\"\",\"isIgmpSource\":false,\"isVirtual\":true,\"mainDstIp\":{\"addr\":\"10.10.10.112\",\"type\":\"nAddress\"},\"mainDstMac\":null,\"mainDstPort\":null,\"mainDstVlan\":null,\"mainSrcGateway\":null,\"mainSrcIp\":\"1.1.1.11\",\"mainSrcMac\":null,\"mainSrcNetmask\":null,\"maps\":[],\"multiplicity\":1,\"partnerConfig\":null,\"public\":false,\"sdpSupport\":false,\"serviceId\":null,\"sipsMode\":\"SIPSSplit\",\"spareDstIp\":{\"addr\":\"20.20.20.22\",\"type\":\"nAddress\"},\"spareDstMac\":null,\"spareDstPort\":null,\"spareDstVlan\":null,\"spareSrcGateway\":null,\"spareSrcIp\":\"2.2.2.22\",\"spareSrcMac\":null,\"spareSrcNetmask\":null,\"tags\":[\"Vid_1080i50\",\"#CAMPUS\",\"Vid_1080p50\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"In\"},\"services\":[]},{\"key\":\"virtual.2.0.6\",\"rev\":\"6-1704550b-7e11-4105-bac5-7ddbbb643385\",\"value\":{\"active\":true,\"bidirPartnerId\":null,\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":{},\"descriptor\":{\"desc\":\"\",\"label\":\"CAMPUS OUT 4\"},\"deviceId\":\"virtual.2\",\"extraAlertFilters\":[],\"extraFormats\":[],\"fDescriptor\":{\"desc\":\"Virtual Device 3 Vertex 6\",\"label\":\"Vertex 6\"},\"gpid\":{\"component\":15,\"pointId\":[\"virtual-2\",\"virt\",\"0\",\"6\"]},\"imgUrl\":\"\",\"isIgmpSource\":false,\"isVirtual\":true,\"mainDstIp\":{\"addr\":\"10.20.30.51\",\"type\":\"nAddress\"},\"mainDstMac\":null,\"mainDstPort\":null,\"mainDstVlan\":null,\"mainSrcGateway\":null,\"mainSrcIp\":\"1.2.3.4\",\"mainSrcMac\":null,\"mainSrcNetmask\":null,\"maps\":[],\"multiplicity\":1,\"partnerConfig\":null,\"public\":false,\"sdpSupport\":false,\"serviceId\":null,\"sipsMode\":\"SIPSSplit\",\"spareDstIp\":{\"addr\":\"10.11.12.13\",\"type\":\"nAddress\"},\"spareDstMac\":null,\"spareDstPort\":null,\"spareDstVlan\":null,\"spareSrcGateway\":null,\"spareSrcIp\":\"2.2.2.2\",\"spareSrcMac\":null,\"spareSrcNetmask\":null,\"tags\":[\"Vid_1080i50\",\"#CAMPUS\",\"Vid_1080p50\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"In\"},\"services\":[]}]",
"tot": "json"
},
{
"t": "set",
"p": "columns",
"pt": "msg",
"to": "[{\"titleFormatterParams\":{\"rowRange\":\"active\"},\"hozAlign\":\"center\"},{\"title\":\"VERTICE INFOS\",\"columns\":[{\"title\":\"Sender Info\",\"field\":\"value.fDescriptor.desc\",\"resizable\":true,\"width\":150},{\"title\":\"Sender Label\",\"field\":\"value.descriptor.label\",\"resizable\":true,\"width\":200},{\"title\":\"Main Source.IP\",\"field\":\"value.mainSrcIp\",\"resizable\":true,\"width\":100},{\"title\":\"Spare Source.IP\",\"field\":\"value.spareSrcIp\",\"resizable\":true,\"width\":100},{\"title\":\"Main Dest.IP\",\"field\":\"value.mainDstIp.addr\",\"resizable\":true,\"width\":100},{\"title\":\"Spare Dest.IP\",\"field\":\"value.spareDstIp.addr\",\"resizable\":true,\"width\":100},{\"title\":\"Key\",\"field\":\"key\",\"resizable\":true,\"width\":100}]},{\"title\":\"SERVICES DETAILS\",\"columns\":[{\"title\":\"Alarm\",\"field\":\"alarmColor\",\"formatter\":\"color\",\"width\":70},{\"title\":\"arrayId(debug)\",\"field\":\"arrayId\",\"resizable\":true,\"width\":100},{\"title\":\"Active Services\",\"field\":\"serviceId\",\"resizable\":true,\"width\":100},{\"title\":\"Service Main IP\",\"field\":\"mainIp\",\"resizable\":true,\"width\":100},{\"title\":\"Service Main Port\",\"field\":\"mainPort\",\"resizable\":true,\"width\":100},{\"title\":\"Service Spare IP\",\"field\":\"spareIp\",\"resizable\":true,\"width\":100},{\"title\":\"Service Spare Port\",\"field\":\"sparePort\",\"resizable\":true,\"width\":100},{\"title\":\"Profile\",\"field\":\"profileDescription\",\"resizable\":true,\"width\":300}]}]",
"tot": "json"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 2280,
"y": 1280,
"wires": [
[
"28866f6cdec63a45"
]
]
},
{
"id": "6c44f6e1d9275e76",
"type": "ui_group",
"name": "TABLE",
"tab": "792afa2eb5a74dd4",
"order": 1,
"disp": true,
"width": 30,
"collapse": false,
"className": ""
},
{
"id": "a7b73cad5ff34170",
"type": "ui_group",
"name": "Connection-table",
"tab": "5374c31143101230",
"order": 2,
"disp": true,
"width": "30",
"collapse": false,
"className": ""
},
{
"id": "792afa2eb5a74dd4",
"type": "ui_tab",
"name": "NEVION-CAMPUS",
"icon": "dashboard",
"order": 2,
"disabled": false,
"hidden": false
},
{
"id": "5374c31143101230",
"type": "ui_tab",
"name": "NEVION-API",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Thanks !
