# Tabulator table needs several time the input to display properly

**URL:** <https://discourse.nodered.org/t/tabulator-table-needs-several-time-the-input-to-display-properly/85047>\
**Category:** General\
**Created:** [30 January 2024 14:31 UTC](https://discourse.nodered.org/t/tabulator-table-needs-several-time-the-input-to-display-properly/85047 "2024-01-30T14:31:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [30 January 2024 14:31 UTC](https://discourse.nodered.org/t/tabulator-table-needs-several-time-the-input-to-display-properly/85047/1 "2024-01-30T14:31:15Z")

</div>

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 :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/795b18119a8cde0af311f6c93ee9280d983c5a33.png)

then after a second push, the table is displayed correctly :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d82c49e6709908b34bf2ca29c74c04918a541b77.png)

I checked the browser console, and on initial load I get this error :

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d46a92dd3b1fa9a78d5c28ec9f8b75d937e8d1e4.png)

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 :

```auto
[
    {
        "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 !

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 April 2024 14:32 UTC](https://discourse.nodered.org/t/tabulator-table-needs-several-time-the-input-to-display-properly/85047/2 "2024-04-29T14:32:09Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.