Problem with filtered datas from Tabulator

JeromeVISUALS · 12 November 2023 10:09

Hello,

I m trying to manage filtered datas using integration of real tabulator in a template node.

I want to apply filter on the datas in the table, so far so good. My problem is I can't get any useful output from the template node, which would include the filtered content....

According to tabulator doc ( Events | Tabulator ), I used something like this (first function is only for reference and working fine):

    grid.on("tableBuilt", function(){
        $scope.send({payload: "Grid is ready"});
    });
    grid.on("dataFiltered", function(filters, rows){
        if (rows.length > 0){
    $scope.send({payload: rows})};

But I don't get any thing and even worse, my table in dashboard does not work anymore, I can't see any content....

When I use something easier in the same function like

$scope.send({payload: "testfilter"})};

I get as expected the string on the output, and the table is still fine.

Also, behavior is fine if I output the filters like this :

$scope.send({payload: filters})};

result :

Do you have any suggestion ?

Thanks,

Jerome

zenofmud · 12 November 2023 12:42

Yes, create a small flow demonstrating the issue and paste it to a reply. That way people can actually see what you are doing.
Also, what version of NR, node.js (you can find this in the startup log)

JeromeVISUALS · 12 November 2023 13:19

Sure I could build a light version of my flow to show how it works and what does not work.

But if people does not make use of the tabulator library, it won't help, as the flow will not work at all since the tabulator needs to be manually copied in one of the nodeRed subfolders.

But if helpful anyway :

11 Nov 17:06:16 - [info] Node-RED version: v3.1.0
11 Nov 17:06:16 - [info] Node.js version: v18.18.0

zenofmud · 12 November 2023 17:17

Well without your flow people someone offering to help would have to spend their time to try and recreate your issue. I’m not willing to do that with the information you have provided, I’d rather help someone who makes it easy for me to help them.

Maybe someone else will help you, good luck.

JeromeVISUALS · 12 November 2023 18:02

Here is an extract of the flow :

[
    {
        "id": "3e5b8cea59cf2699",
        "type": "ui_template",
        "z": "ec7495553de43604",
        "group": "c7a43587.2944e8",
        "name": "Header",
        "order": 1,
        "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\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    .videoSelect {\n    background-color: #b3daff!important;\n    color: black!important;\n}\n    .audioSelect {\n    background-color: #b3ffb3!important;\n    color: black!important;\n    }\n        .dataSelect {\n        background-color: #ffb3cc!important;\n        color: black!important;\n        }\n</style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 900,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "8d8735646903e5e5",
        "type": "ui_template",
        "z": "ec7495553de43604",
        "group": "c7a43587.2944e8",
        "name": "Tabulator TestForum",
        "order": 5,
        "width": 39,
        "height": 17,
        "format": "<form>\n    <div id=\"gridExample\" 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\nvar grid = new Tabulator(\"#gridExample\", {\n    rowFormatter : function(row){\n        // chnage row color based on mainDstIp specific value \n        if(row.getData()[\"Factory label\"].includes(\"_a\")){\n            row.getElement().style.backgroundColor = \"#b3ffb3\";\n            row.getElement().style.color = \"black\";\n            }\n        if(row.getData()[\"Factory label\"].includes(\"_m\")){\n            row.getElement().style.backgroundColor = \"#ffb3cc\";\n            row.getElement().style.color = \"black\";\n            }\n        if(row.getData()[\"Factory label\"].includes(\"_v\")){\n            row.getElement().style.backgroundColor = \"#b3daff\";\n            row.getElement().style.color = \"black\";\n            }\n},\n    layout:\"fitColumns\", //fitColumns\n    movableColumns: true,\n    headerVisible: true,\n    resizableColumns: true,\n    //selectable: 5,\n    //responsiveLayout: \"collapse\",\n    //autoResize: true,\n    pagination: \"true\",\n    paginationSizeSelector:[10, 25, 50, 100, true], //select list with an \"all\" option at the end of the list\n    height: \"800px\",\n    groupBy:[\"rxTx\", \"control\"],\n    groupToggleElement:\"header\", //toggle group on click anywhere in the group header\n    //  groupStartOpen: true,\n    \n    data:[\n    ],\n    \n    columns:[/*\n              {formatter:\"rowSelection\", titleFormatter:\"rowSelection\", hozAlign:\"center\", headerSort:false, cellClick:function(e, cell){\n         cell.getRow().toggleSelect();\n    }}*/\n    {\n    formatter:\"rowSelection\",\n    titleFormatter:\"rowSelection\",\n    titleFormatterParams:{\n        rowRange:\"active\"\n        }, //only toggle the values of the active filtered rows\n        hozAlign:\"center\", \n        headerSort:false, \n        cellClick:function(e, cell){\n            cell.getRow().toggleSelect();\n    }},\n            {title:\"ID\", field:\"#\",   resizable: true, formatter:\"textarea\", width:200},\n            {title:\"Factory label\", field:\"Factory label\", resizable: true, formatter:\"textarea\", width:200},\n                        {title:\"Rx/Tx\", \n                        field:\"rxTx\", \n                        resizable: true,  \n                        editor:\"input\", \n                        headerFilter:true, //show header filter matching the cells editor, \n                        width:100},\n                        {title:\"tags\", field:\"tags\", resizable: true, width:250},\n                                    {title:\"descriptor\", field:\"descriptor\", resizable: true, width:200},\n            {title:\"control\", field:\"control\",     resizable: true, width:100},\n            {title:\"useAsEndpoint\", field:\"useAsEndpoint\", formatter:\"tickCross\", resizable: true, width:100},\n            {title:\"sdpSupport\", field:\"sdpSupport\", formatter:\"tickCross\",resizable: true, width:120},\n            {title:\"sipsMode\", field:\"sipsMode\", resizable: true, width:100},\n            {title:\"active\", field:\"active\",formatter:\"tickCross\", resizable: true, width:100},\n\n            {title:\"mainDstIp\", field:\"mainDstIp\", resizable: true, width:100},\n            {title:\"mainDstPort\", field:\"mainDstPort\", resizable: true, width:100},\n            {title:\"spareDstIp\", field:\"spareDstIp\", resizable: true, width:100},\n            {title:\"spareDstPort\", field:\"spareDstPort\", resizable: true, width:100}\n\n      ]\n    });\n\n    grid.on(\"tableBuilt\", function(){\n        $scope.send({payload: \"Grid is ready\"});\n    });\n    grid.on(\"dataFiltered\", function(filters, rows){\n        $scope.send({payload: filters});\n\n});\n\n/* THIS DOES NOT WORK !!!\n\n    grid.on(\"dataFiltered\", function(filters, rows){\n        $scope.send({payload: rows});\n*/\n\n\n/*\n    grid.on(\"rowClick\", function(e, row){\n    alert(\"Row \" + row.getData().descriptor + \" Clicked!!!!\");\n    });\n*/\n(function(scope) {\n    $scope.$watch('msg', function(msg)\n    {\n        if (msg)\n        switch (msg.payload)\n        {\n            case \"setdata\":\n                //grid.clearData();\n                grid.setData(msg.data);\n                $scope.send({payload: \"Grid updated\"});\n                break;\n\n            case \"copytoclipboard\":\n\n                $scope.send({payload: \"this is copyclipboard\"});\n                // Copy the text inside the text field\n                navigator.clipboard.writeText(msg.data);\n                \n                // Alert the copied text\n                alert(\"Copied the text: \" + msg.data);\n                \n                break;\n\n        }\n    });\n})(scope);\n</script>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1080,
        "y": 340,
        "wires": [
            [
                "b38b3833629a9d5a"
            ]
        ]
    },
    {
        "id": "8299d0552016bb5f",
        "type": "inject",
        "z": "ec7495553de43604",
        "name": "Manually send table content",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "data",
                "v": "[{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R01a52f67-554c-5791-8503-fcbee07f93d9\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s06_a03\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R02d8318e-62ea-5d74-8693-9d3e7024f560\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"blabla\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s05_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R030c78b8-e95c-5012-bfc8-bd7ef3188d16\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Ancillary\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s02_m00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R0528ad48-62b6-5a22-9267-8f7f6f1e77ec\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s01_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R086b784a-d876-5db7-a2c9-6d41edb2f182\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s02_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R0ad25e5f-ce89-508a-809d-3389e8626eba\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Ancillary\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s06_m00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R1ded5cf7-68f5-5476-8b4f-c3704736f1c8\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s05_a02\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R213ec965-bba2-5f51-836c-25c677826737\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s06_a00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R26a7fd26-97ef-5d70-a2ab-a773c18f6656\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s02_a00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R2ee8ab84-34e3-5e23-bdf5-259389c374ac\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s03_a00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R34a4f06f-24f9-53db-84e3-76cf940a3d55\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Ancillary\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s01_m00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R382b1265-1762-5d63-ae80-6f5d579027af\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s00_a03\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.R3fe65e4a-1064-5893-9b4c-f491df531f1b\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Audio\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"receiver_s04_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\"}]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "setdata",
        "payloadType": "str",
        "x": 820,
        "y": 340,
        "wires": [
            [
                "8d8735646903e5e5"
            ]
        ]
    },
    {
        "id": "b38b3833629a9d5a",
        "type": "debug",
        "z": "ec7495553de43604",
        "name": "debug 350",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1290,
        "y": 340,
        "wires": []
    },
    {
        "id": "c7a43587.2944e8",
        "type": "ui_group",
        "name": "Default",
        "tab": "d39c15b4a91c9727",
        "order": 3,
        "disp": false,
        "width": "40",
        "collapse": false,
        "className": ""
    },
    {
        "id": "d39c15b4a91c9727",
        "type": "ui_tab",
        "name": "NEVION TESTS",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

That would need latest tabulator 5.5 master-folder ( at least it's the one with which I made my tests) copied into /.node-red/node_modules/node-red-dashboard/dist for it to work.

The tabulator template node includes the non-working code as commented code.

Thanks,

Jerome

omrid · 13 November 2023 09:20

To get only filtered data., you can use:

 table.getData("active");

JeromeVISUALS · 13 November 2023 09:35

Than you Omrid, will test that.

zenofmud · 13 November 2023 09:37

In searching the forum I ran across this thread:

and copying the first flow and running it caused some of your labels to show. It might help you to take a look at it.

Note I did not do this.

JeromeVISUALS · 13 November 2023 10:02

Thanks Paul, interesting, I'll have a look.

JeromeVISUALS · 14 November 2023 06:18

Hi Omrid,

it kind of work using this

grid.on("dataFiltered", function(filters, rows){
    $scope.send({payload: grid.getData("active")});

});

But with a quite strange behavior, I get the opposite result as expected.... when I enter a filter I the get the full array as payload, and when I clear the filter I then get the previously filtered table as an array..... really strange !

omrid · 14 November 2023 09:16

You are getting pre-filter behavior on the post-filter event?

JeromeVISUALS · 14 November 2023 09:57

Hi, I've seen your post before being edited, be sure I spent lot of time on the official tabulator doc, but in that case I don't get it right.

I tried both ways, using dataFiltering and dataFiltered and sees the same behavior.

Here is an example :

First message is sent whenever I enter anything in a column filter , second message is sent when I clear the filter. First message gives me the full array, second one send me the filtered one :

Here is the flow if you want to give a test, many thanks for your help !

[
    {
        "id": "3e5b8cea59cf2699",
        "type": "ui_template",
        "z": "ec7495553de43604",
        "group": "c7a43587.2944e8",
        "name": "Header",
        "order": 3,
        "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\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    .videoSelect {\n    background-color: #b3daff!important;\n    color: black!important;\n}\n    .audioSelect {\n    background-color: #b3ffb3!important;\n    color: black!important;\n    }\n        .dataSelect {\n        background-color: #ffb3cc!important;\n        color: black!important;\n        }\n</style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 1140,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "8d8735646903e5e5",
        "type": "ui_template",
        "z": "ec7495553de43604",
        "group": "c7a43587.2944e8",
        "name": "Tabulator TestForum",
        "order": 5,
        "width": 39,
        "height": 17,
        "format": "<form>\n    <div id=\"gridExample\" 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\nvar grid = new Tabulator(\"#gridExample\", {\n    rowFormatter : function(row){\n        // chnage row color based on mainDstIp specific value \n        if(row.getData()[\"Factory label\"].includes(\"_a\")){\n            row.getElement().style.backgroundColor = \"#b3ffb3\";\n            row.getElement().style.color = \"black\";\n            }\n        if(row.getData()[\"Factory label\"].includes(\"_m\")){\n            row.getElement().style.backgroundColor = \"#ffb3cc\";\n            row.getElement().style.color = \"black\";\n            }\n        if(row.getData()[\"Factory label\"].includes(\"_v\")){\n            row.getElement().style.backgroundColor = \"#b3daff\";\n            row.getElement().style.color = \"black\";\n            }\n},\n    layout:\"fitColumns\", //fitColumns\n    movableColumns: true,\n    headerVisible: true,\n    resizableColumns: true,\n    //selectable: 5,\n    //responsiveLayout: \"collapse\",\n    //autoResize: true,\n    pagination: \"true\",\n    paginationSizeSelector:[10, 25, 50, 100, true], //select list with an \"all\" option at the end of the list\n    height: \"800px\",\n    groupBy:[\"rxTx\", \"control\"],\n    groupToggleElement:\"header\", //toggle group on click anywhere in the group header\n    //  groupStartOpen: true,\n    \n    data:[\n    ],\n    \n    columns:[/*\n              {formatter:\"rowSelection\", titleFormatter:\"rowSelection\", hozAlign:\"center\", headerSort:false, cellClick:function(e, cell){\n         cell.getRow().toggleSelect();\n    }}*/\n    {\n    formatter:\"rowSelection\",\n    titleFormatter:\"rowSelection\",\n    titleFormatterParams:{\n        rowRange:\"active\"\n        }, //only toggle the values of the active filtered rows\n        hozAlign:\"center\", \n        headerSort:false, \n        cellClick:function(e, cell){\n            cell.getRow().toggleSelect();\n    }},\n            {title:\"ID\", field:\"#\",   resizable: true, formatter:\"textarea\", width:200},\n            {title:\"Factory label\", field:\"Factory label\", resizable: true, formatter:\"textarea\", width:200},\n                        {title:\"Rx/Tx\", \n                        field:\"rxTx\", \n                        resizable: true,  \n                        editor:\"input\", \n                        headerFilter:true, //show header filter matching the cells editor, \n                        width:100},\n                        {title:\"tags\", field:\"tags\", resizable: true, width:250},\n                                    {title:\"descriptor\", field:\"descriptor\", resizable: true, width:200},\n            {title:\"control\", field:\"control\",     resizable: true, width:100},\n            {title:\"useAsEndpoint\", field:\"useAsEndpoint\", formatter:\"tickCross\", resizable: true, width:100},\n            {title:\"sdpSupport\", field:\"sdpSupport\", formatter:\"tickCross\",resizable: true, width:120},\n            {title:\"sipsMode\", field:\"sipsMode\", resizable: true, width:100},\n            {title:\"active\", field:\"active\",formatter:\"tickCross\", resizable: true, width:100},\n\n            {title:\"mainDstIp\", field:\"mainDstIp\", resizable: true, width:100},\n            {title:\"mainDstPort\", field:\"mainDstPort\", resizable: true, width:100},\n            {title:\"spareDstIp\", field:\"spareDstIp\", resizable: true, width:100},\n            {title:\"spareDstPort\", field:\"spareDstPort\", resizable: true, width:100}\n\n      ]\n    });\n\n    grid.on(\"tableBuilt\", function(){\n        $scope.send({payload: \"Grid is ready\"});\n    });\n\n    grid.on(\"dataFiltering\", function(){\n        $scope.send({payload: grid.getData(\"active\")});\n});\n\n// THIS DOES NOT WORK !!!\n/*\n    grid.on(\"dataFiltered\", function(filters, rows){\n        $scope.send({payload: rows});\n\n});\n*/\n/*\n    grid.on(\"rowClick\", function(e, row){\n    alert(\"Row \" + row.getData().descriptor + \" Clicked!!!!\");\n    });\n*/\n(function(scope) {\n    $scope.$watch('msg', function(msg)\n    {\n        if (msg)\n        switch (msg.payload)\n        {\n            case \"setdata\":\n                //grid.clearData();\n                grid.setData(msg.data);\n                $scope.send({payload: \"Grid updated\"});\n                break;\n\n            case \"copytoclipboard\":\n\n                $scope.send({payload: \"this is copyclipboard\"});\n                // Copy the text inside the text field\n                navigator.clipboard.writeText(msg.data);\n                \n                // Alert the copied text\n                alert(\"Copied the text: \" + msg.data);\n                \n                break;\n\n        }\n    });\n})(scope);\n</script>\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1370,
        "y": 360,
        "wires": [
            [
                "b38b3833629a9d5a"
            ]
        ]
    },
    {
        "id": "b38b3833629a9d5a",
        "type": "debug",
        "z": "ec7495553de43604",
        "name": "debug 350",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1590,
        "y": 360,
        "wires": []
    },
    {
        "id": "fda346719e1a533d",
        "type": "inject",
        "z": "ec7495553de43604",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sd8e550b2-26b4-5367-b284-77a8edf2f1cd\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s04_a02\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":5,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"03\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sdad5ed2c-1dd8-530a-ae42-990d9f453a01\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s04_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":5,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"02\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sdc4d27a2-bddf-50f2-8b12-502c5ef94ed0\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s06_a03\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":7,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"04\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sddb6b1ec-219d-549b-bd33-d01468e4b8c1\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s02_a01\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":3,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"02\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Se4ad1409-540d-5657-a598-911d9d003bea\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"full\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"VGW01-01C01_CH07_TxV\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s06_v00\",\"isIgmpSource\":\"false\",\"mainDstIp\":{\"poolId\":\"RTS-Video-PRI\",\"type\":\"nPoolId\"},\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":{\"poolId\":\"RTS-Video-SEC\",\"type\":\"nPoolId\"},\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[Vid_1080i50,Vid_1080p50,Vid_2160p25,Vid_2160p50,#SCORPION,#REGIE2.2]\",\"useAsEndpoint\":\"true\",\"chNumber\":7,\"vertexType\":\"V\",\"rxTx\":\"_Tx\",\"audCh\":\"\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Se74efcd7-7ca9-5452-98ce-208c57db8c55\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"full\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"VGW01-01C01_CH03_TxV\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s02_v00\",\"isIgmpSource\":\"false\",\"mainDstIp\":{\"poolId\":\"RTS-Video-PRI\",\"type\":\"nPoolId\"},\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":{\"poolId\":\"RTS-Video-SEC\",\"type\":\"nPoolId\"},\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[Vid_1080i50,Vid_1080p50,Vid_2160p25,Vid_2160p50,#SCORPION,#REGIE2.2]\",\"useAsEndpoint\":\"true\",\"chNumber\":3,\"vertexType\":\"V\",\"rxTx\":\"_Tx\",\"audCh\":\"\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sf265ab29-0d9f-5a66-9776-6de7ad5e501f\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s02_a00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":3,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"01\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sf34dcffe-f4ca-5308-b130-b48259cb4962\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s00_a02\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":1,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"03\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sf51396c3-0b8a-5581-8e27-e6a571ead202\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s00_a03\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":1,\"vertexType\":\"A\",\"rxTx\":\"_Tx\",\"audCh\":\"04\"},{\"#\":\"device73.484735f6-a1ea-596e-8282-0cd1108e6be2.Sf996d7d3-fc81-519e-afde-4e3b6bc4cd46\",\"active\":\"true\",\"bidirPartnerId\":\"null\",\"codecFormat\":\"Video\",\"configPriority\":\"off\",\"control\":\"off\",\"custom\":\"{}\",\"descriptor\":{\"desc\":\"TOTO-TEST\",\"label\":\"\"},\"extraAlertFilters\":\"[]\",\"Factory label\":\"sender_s04_m00\",\"isIgmpSource\":\"false\",\"mainDstIp\":\"null\",\"mainDstMac\":\"null\",\"mainDstPort\":\"null\",\"mainDstVlan\":\"null\",\"mainSrcGateway\":\"null\",\"mainSrcIp\":\"null\",\"mainSrcMac\":\"null\",\"mainSrcNetmask\":\"null\",\"public\":\"false\",\"sdpSupport\":\"true\",\"sipsMode\":\"NONE\",\"spareDstIp\":\"null\",\"spareDstMac\":\"null\",\"spareDstPort\":\"null\",\"spareDstVlan\":\"null\",\"spareSrcGateway\":\"null\",\"spareSrcIp\":\"null\",\"spareSrcMac\":\"null\",\"spareSrcNetmask\":\"null\",\"tags\":\"[]\",\"useAsEndpoint\":\"false\",\"chNumber\":5,\"vertexType\":\"D\",\"rxTx\":\"_Tx\",\"audCh\":\"\"}]",
        "payloadType": "json",
        "x": 1110,
        "y": 360,
        "wires": [
            [
                "99abf6c2b50ed78f"
            ]
        ]
    },
    {
        "id": "99abf6c2b50ed78f",
        "type": "function",
        "z": "ec7495553de43604",
        "name": "set msg.data to csv and payload to \"setdata\" for table",
        "func": "// Manage datas for proper display in table : \nvar csv = msg.payload;\n\n    for (let i = 0; i < csv.length; i++) {\n\n        csv[i].descriptor = JSON.stringify(csv[i].descriptor);\n\n        csv[i].mainDstIp = JSON.stringify(csv[i].mainDstIp);\n    \n        csv[i].spareDstIp = JSON.stringify(csv[i].spareDstIp);\n    }\n\nmsg.payload = \"setdata\"\n\nmsg.data = csv;\n\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1260,
        "y": 320,
        "wires": [
            [
                "8d8735646903e5e5"
            ]
        ]
    },
    {
        "id": "c7a43587.2944e8",
        "type": "ui_group",
        "name": "Default",
        "tab": "d39c15b4a91c9727",
        "order": 3,
        "disp": false,
        "width": "40",
        "collapse": false,
        "className": ""
    },
    {
        "id": "d39c15b4a91c9727",
        "type": "ui_tab",
        "name": "NEVION DEVICE HANDLER",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

omrid · 14 November 2023 11:46

My suggestion is to first debug this via the browser's console. For me it works as expected

    grid.on("dataFiltering", function(filters){
        //filters - array of filters currently applied
        console.log(`Pre-filter event: ${filters.length} filters`);
        for (let i = 0 ; i < filters.length; i++)
            console.log(Object.entries(filters[i]));
    });
    grid.on("dataFiltered", function(filters, rows){
        //filters - array of filters currently applied
        //rows - array of row components that pass the filters
        console.log(`Post-filter event: ${rows.length} rows`);
        for (let i = 0 ; i < rows.length; i++)
            console.log(Object.entries(rows[i]));
    });

If the console output is OK, then the issue may be with the Node-red messaging.
I noticed something which seems like a bug, where Node-red dashboard resends the last sent message upon page load.
Message sent once but received twice - Dashboard - Node-RED Forum (nodered.org)
Maybe the output you are getting is from an older event?.

JeromeVISUALS · 15 November 2023 06:16

Ok, thanks, I get the right behavior in the console with your code, but then get some errors as soon as I want to output some payload with filtered content.

The console might give some more useful information on the problem, I'll dig into it later today.

Many thanks for your help

omrid · 15 November 2023 10:26

It may be related to the Node-red bug I mentioned, as I had the same problem (an auto-resent message trying to update the table before it finishes initializing). I addressed it with a status flag:

var $scope = this.scope;
var tableReady = false;    
var table = new Tabulator(/*.....*/) 
table.on("tableBuilt", function() {
    tableReady = true;
    // Load data or send a msg to invoke data update
});

 $scope.$watch('msg', function(msg)
 {
     if (msg)
     {
           // For messages related to the table, check the status flag
            if (!tblReady)
            {
                console.log("**Discarding premature msg");
                return;
            }
            // ...
    }
})(scope);

JeromeVISUALS · 15 November 2023 16:43

I checked the bug you mentionned, but I can't see it's the case here.
I also get that behavior as soon as I do a filter action just after restarting NR and loading the datas....

Definitely can't get around that opposite behavior. I'm stuck here.....

omrid · 15 November 2023 18:32

OK, then it could be that the internal wiring of the "rows" object is giving us problems (I tried to flatten it to a string and got a "cyclic reference" error).
I suggest you try to extract the data from the rows into a new array, and see if it solves the issue (it works for me):

    grid.on("dataFiltered", function(filters, rows){
        console.log(`Post-filter event: ${rows.length} rows`);
        let data = [];
        for (let i = 0 ; i < rows.length; i++)
            data.push(rows[i]._row.data);
        $scope.send({payload: data});
    });

JeromeVISUALS · 15 November 2023 19:57

omrid:

   grid.on("dataFiltered", function(filters, rows){
        console.log(`Post-filter event: ${rows.length} rows`);
        let data = [];
        for (let i = 0 ; i < rows.length; i++)
            data.push(rows[i]._row.data);
        $scope.send({payload: data});
    });

You're THE man !

It works now, thank you so much for your help on this. Not a very complex workaround but definitely not sure I would have the idea to try that.

Thank you again, really appreciated !

Cheers

system · 29 November 2023 19:58

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

Topic		Replies	Views
Dashboard-template-node prints incoming msg on its own Dashboard node-red-dashboard	3	206	27 September 2022
Using Tabulator grids in Dashboard v2.0 templates Dashboard dashboard-2	46	939	21 April 2024
Tabulator Filter Dashboard	8	2020	23 June 2021
Tabulator in template node should output updated table on edited cells General node-red-dashboard	1	151	15 September 2023
Dashboard template node with own filters? Dashboard	3	1683	24 September 2018

Problem with filtered datas from Tabulator

Related Topics