Ui_table - How to select the first row after initializing?

I have made some good progress using the ui-table, which seems to have some pretty amazing capabilities without having to put in too much effort. But now I am stuck! I have looked at several examples, but I am obviously missing something?

I was a able to configure the ui_control with the following code:

msg.ui_control = {
    "customHeight":12,
    "tabulator": {
        "selectable":1,
        "table": {
            "selectRow": 0,
            "row": {
                "selected": {
                    "background": 'red'
                    }
                }    
            }
        }
    };

I have set "selectable" to 1 so that only one row is selected at a time - this seems to work. However, when the form is initialized, I would also like to select row 0. I tried to set "SelectRow = 0" but this does not seem to work. At the same time I would like to highlight the selected row to different color than "black" so that it is clearer as to which row was selected.

Below is the sample flow. Thanks in advance for your help.

[{"id":"a65059e8.23da28","type":"tab","label":"Test","disabled":false,"info":""},{"id":"942b3e2f.fb4ac","type":"function","z":"a65059e8.23da28","name":"Format Table","func":"\n//var DT_List = global.get(\"DT_List\");\n//var i;\n//var Line = msg.payload;\n\n\n\n// Can change color in CSS, but not sure where / how to do this:\n    //.tabulator .tabulator-row.selected{\n    //\tbackground: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/\n    //}\n\n// Display up to 12 rows, select row 0, and highlight in red.\nmsg.ui_control = {\n    \"customHeight\":12,\n    \"tabulator\": {\n        \"selectable\":1,\n        \"table\": {\n            \"selectRow\": 0,\n            \"row\": {\n                \"selected\": {\n                    \"background\": 'red'\n                    }\n                }    \n            }\n        }\n    };\n\n\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":260,"wires":[["520b519d.77404"]]},{"id":"520b519d.77404","type":"ui_table","z":"a65059e8.23da28","group":"7f42618c.dfc0e","name":"Table1","order":1,"width":"16","height":"10","columns":[{"field":"RecNo","title":"RecNo","width":"11px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"EvtStartTime","title":"Event Start Time","width":"20px","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"L_Code","title":"L_Code","width":"12px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Dur","title":"Dur","width":"10px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":670,"y":260,"wires":[["19e495c0.6f4d7a"]]},{"id":"19e495c0.6f4d7a","type":"debug","z":"a65059e8.23da28","name":"A","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":790,"y":260,"wires":[]},{"id":"c228fb13.cc0c88","type":"function","z":"a65059e8.23da28","name":"InitializeData","func":"msg.payload = [{\n\t\t\t\"ID\": 20879,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:29:11\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 49,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 45,\n\t\t\t\"Dur\": 0.07,\n\t\t\t\"L_Reason\": \"45 - Filler - Idle Blocked - Outfeed Conveyor Full\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20878,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:28:43\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 48,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 144,\n\t\t\t\"Dur\": 0.47,\n\t\t\t\"L_Reason\": \"144 - Labeler - Low Low Labels\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20877,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:29\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 46,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 91,\n\t\t\t\"Dur\": 4.22,\n\t\t\t\"L_Reason\": \"91 - Seamer - System Manual Mode\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20875,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:25\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 44,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 9,\n\t\t\t\"Dur\": 0.02,\n\t\t\t\"L_Reason\": \"9 - Can Cleaner - Door #2 Open\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20874,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:00:00\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 42,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 35,\n\t\t\t\"Dur\": 9.43,\n\t\t\t\"L_Reason\": \"35 - Filler - Inspection Door 2 Open\"\n\t\t}];\n\t\t\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":220,"wires":[["942b3e2f.fb4ac"]]},{"id":"62a40173.6d601","type":"inject","z":"a65059e8.23da28","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":380,"y":180,"wires":[["c228fb13.cc0c88"]]},{"id":"7f42618c.dfc0e","type":"ui_group","z":"","name":"Group 1","tab":"7b6b84bd.4cc5bc","order":1,"disp":true,"width":"16","collapse":false},{"id":"7b6b84bd.4cc5bc","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

Hi,

to call table functions you have to send a "command" message to ui-table

msg.payload={
    command:"selectRow",
    arguments: [1],
    returnPromise: false
}
return msg;

This will call the method selectRow of the tabulator table and select the row with id===1

You can't pass function calls via ui_control messages. So wire this to a ui-control node. You will need a delay to send the command not before the table is rendered.

But delays are not nice as they might fail or set too long. You can trigger it more accurate with an renderComplete callback)

renderComplete="function(){this.send({ui_control:{callback:'renderComplete'}})}"

like this:

I do not know a way to style the select background color (certainly by overwriting the css in a template node - I`m not an expert in). But row selection is not designed as an indicator. It is designed for user inputs.
You can design the background color with a rowFormatter callback as I do in my remote device table to indicare the state of a device:

var rowFormatter = function(row){     
    var data = row.getData();
    switch (data.$state) {
        case 'lost':             
            row.getElement().style.backgroundColor = '#9e2e66';
            row.getElement().style.color = '#a6a6a6';
            break;         
        case 'sleeping':
            row.getElement().style.backgroundColor = '#336699';
            break;
        case 'disconnected':
            row.getElement().style.backgroundColor = '#cc3300';
            row.getElement().style.color = '#a6a6a6';
            break;
        case 'alert':             
            row.getElement().style.backgroundColor = '#A6A6DF';
            break;         
        case 'init':             
            row.getElement().style.backgroundColor = '#f2f20d';
            break;         
        case 'ready':
            row.getElement().style.backgroundColor = '';
            row.getElement().style.color = '';
            break;         
        
    } 
};

You can choose any column you like instead of $state and even hide this column. if the value in this column changes the style will update ... Yes - tabulator is quite versatile as soon as you understand how it works.

If someone help me with a fade out css animation it would be great to indicate changing values for a few seconds ....

so far so good:

[{"id":"8a38e79e.e30648","type":"function","z":"a9df5d61.1e049","name":"Format Table","func":"\n//var DT_List = global.get(\"DT_List\");\n//var i;\n//var Line = msg.payload;\n\n\n\n// Can change color in CSS, but not sure where / how to do this:\n    //.tabulator .tabulator-row.selected{\n    //\tbackground: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/\n    //}\n\n// Display up to 12 rows, select row 0, and highlight in red.\nmsg.ui_control = {\n    \"customHeight\":12,\n    \"tabulator\": {\n        \"selectable\":1,\n        \"renderComplete\":\"function(){this.send({ui_control:{callback:'renderComplete'}})}\"\n    }\n};\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":393,"y":255,"wires":[["1d03a916.1ea9c7"]]},{"id":"1d03a916.1ea9c7","type":"ui_table","z":"a9df5d61.1e049","group":"58a8895c.e04f28","name":"Table1","order":1,"width":"16","height":"10","columns":[{"field":"RecNo","title":"RecNo","width":"11px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"EvtStartTime","title":"Event Start Time","width":"20px","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"L_Code","title":"L_Code","width":"12px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Dur","title":"Dur","width":"10px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":798,"y":255,"wires":[["2e4f7d73.baa142","5e0b3d4e.bc9634"]]},{"id":"2e4f7d73.baa142","type":"debug","z":"a9df5d61.1e049","name":"A","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":951,"y":238,"wires":[]},{"id":"2ba17e32.afc672","type":"function","z":"a9df5d61.1e049","name":"InitializeData","func":"msg.payload = [{\n\t\t\t\"ID\": 20879,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:29:11\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 49,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 45,\n\t\t\t\"Dur\": 0.07,\n\t\t\t\"L_Reason\": \"45 - Filler - Idle Blocked - Outfeed Conveyor Full\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20878,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:28:43\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 48,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 144,\n\t\t\t\"Dur\": 0.47,\n\t\t\t\"L_Reason\": \"144 - Labeler - Low Low Labels\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20877,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:29\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 46,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 91,\n\t\t\t\"Dur\": 4.22,\n\t\t\t\"L_Reason\": \"91 - Seamer - System Manual Mode\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20875,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:25\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 44,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 9,\n\t\t\t\"Dur\": 0.02,\n\t\t\t\"L_Reason\": \"9 - Can Cleaner - Door #2 Open\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20874,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:00:00\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 42,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 35,\n\t\t\t\"Dur\": 9.43,\n\t\t\t\"L_Reason\": \"35 - Filler - Inspection Door 2 Open\"\n\t\t}];\n\t\t\nreturn msg;","outputs":1,"noerr":0,"x":393,"y":204,"wires":[["8a38e79e.e30648"]]},{"id":"2ebc4a57.75db86","type":"inject","z":"a9df5d61.1e049","name":"","props":[{"p":"payload","v":"","vt":"date"},{"p":"topic","v":"","vt":"string"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":196,"y":187,"wires":[["2ba17e32.afc672"]]},{"id":"13a31094.82261f","type":"function","z":"a9df5d61.1e049","name":"select row 1","func":"if (msg.hasOwnProperty('ui_control') && msg.ui_control.callback === \"renderComplete\") {\n    var msgOut={\n        payload:{\n            command:\"selectRow\",\n            arguments: [1],\n            returnPromise: false\n        }\n    }\n    return msgOut;\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":393,"y":323,"wires":[["1d03a916.1ea9c7","c347a95e.b7a9f8"]]},{"id":"6bb94a63.257154","type":"ui_ui_control","z":"a9df5d61.1e049","name":"","events":"all","x":196,"y":221,"wires":[["2ba17e32.afc672"]]},{"id":"5e0b3d4e.bc9634","type":"link out","z":"a9df5d61.1e049","name":"","links":["88bc27e0.a8cb58"],"x":916,"y":289,"wires":[]},{"id":"88bc27e0.a8cb58","type":"link in","z":"a9df5d61.1e049","name":"","links":["5e0b3d4e.bc9634"],"x":253,"y":323,"wires":[["13a31094.82261f"]]},{"id":"c347a95e.b7a9f8","type":"debug","z":"a9df5d61.1e049","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":628,"y":323,"wires":[]},{"id":"d919bea9.aba6d","type":"function","z":"a9df5d61.1e049","name":"callback functions","func":"var rowFormatter = function(row){     \n    var data = row.getData();\n    switch (data.$state) {\n        case 'lost':             \n            row.getElement().style.backgroundColor = '#9e2e66';\n            row.getElement().style.color = '#a6a6a6';\n            break;         \n        case 'sleeping':\n            row.getElement().style.backgroundColor = '#336699';\n            break;\n        case 'disconnected':\n            row.getElement().style.backgroundColor = '#cc3300';\n            row.getElement().style.color = '#a6a6a6';\n            break;\n        case 'alert':             \n            row.getElement().style.backgroundColor = '#A6A6DF';\n            break;         \n        case 'init':             \n            row.getElement().style.backgroundColor = '#f2f20d';\n            break;         \n        case 'ready':\n            row.getElement().style.backgroundColor = '';\n            row.getElement().style.color = '';\n            break;         \n        \n    } \n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":838,"y":340,"wires":[[]]},{"id":"58a8895c.e04f28","type":"ui_group","z":"","name":"Group 1","tab":"1da6d3da.8557bc","order":1,"disp":true,"width":"16","collapse":false},{"id":"1da6d3da.8557bc","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
1 Like

Wow, thanks Chris for getting back to me so quickly! I have tried part of your suggestions and got it working. :smiley: I still need to reread your other suggestions regarding call backs so as to better understand how they work. (I'm still a newbie to all this stuff).

After doing a bit of testing, I noticed that I need to deselect all rows first. (I read somewhere earlier today that setting "selectable" = 1, should only "select ONE row"). This behaviour appears to be a little "different" with code versus clicking on the table. In code, I first need to do a "deselect" and then select the desired row. Using this method I always end up with one row selected which is what I want.

On the table, if I click on a record and then click on it again, it will select and deselect it (or vice-versa). I need to think about this some more as I always need 1 row to be selected. An explanation as to why I need this functionality is in the next paragraph.

With regards to "row selection is not designed as an indicator", I agree and maybe I am not doing this in the best way. The desire is to always have one row selected as some of that that row information will be copied to "Detail text boxes" below the table, much like a Master - Detail form. Below these text boxes will be a pull down selection box to allow the user to change some data in this row along with another button to confirm the change. For this reason, I always need one table row highlighted so that the wrong row is not inadvertently changed.

I will look at your suggestions in more detail and give this some more thought to see if there is a better way for me to do this. I understand that clicking on a selected row again allows one to deselect it and that is probably why it works like this. Thanks so much for your help!

var cmd = {
    command:"deselectRow",
    arguments: [],
    returnPromise: true
}

msg.payload = cmd;
node.send(msg);

cmd = {
    command:"selectRow",
    arguments: [0],
    returnPromise: true
};

msg.payload = cmd;
node.send(msg);

return msg;

Full code below:

[{"id":"a65059e8.23da28","type":"tab","label":"Test","disabled":false,"info":""},{"id":"942b3e2f.fb4ac","type":"function","z":"a65059e8.23da28","name":"Format Table","func":"\n//var DT_List = global.get(\"DT_List\");\n//var i;\n//var Line = msg.payload;\n\n\n\n// Can change color in CSS, but not sure where / how to do this:\n    //.tabulator .tabulator-row.selected{\n    //\tbackground: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/\n    //}\n\n// Display up to 12 rows, select row 0, and highlight in red.\nmsg.ui_control = {\n    \"customHeight\":12,\n    \"tabulator\": {\n        \"selectable\":1,\n        \"table\": {\n            \"selectRow\": 0,\n            \"row\": {\n                \"selected\": {\n                    \"background\": 'red'\n                    }\n                }    \n            }\n        }\n    };\n\n\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":260,"wires":[["520b519d.77404"]]},{"id":"520b519d.77404","type":"ui_table","z":"a65059e8.23da28","group":"7f42618c.dfc0e","name":"Table1","order":1,"width":"16","height":"10","columns":[{"field":"RecNo","title":"RecNo","width":"11px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"EvtStartTime","title":"Event Start Time","width":"20px","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"L_Code","title":"L_Code","width":"12px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Dur","title":"Dur","width":"10px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":670,"y":260,"wires":[["19e495c0.6f4d7a"]]},{"id":"19e495c0.6f4d7a","type":"debug","z":"a65059e8.23da28","name":"A","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":790,"y":260,"wires":[]},{"id":"c228fb13.cc0c88","type":"function","z":"a65059e8.23da28","name":"InitializeData","func":"msg.payload = [{\n\t\t\t\"ID\": 20879,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:29:11\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 49,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 45,\n\t\t\t\"Dur\": 0.07,\n\t\t\t\"L_Reason\": \"45 - Filler - Idle Blocked - Outfeed Conveyor Full\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20878,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:28:43\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 48,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 144,\n\t\t\t\"Dur\": 0.47,\n\t\t\t\"L_Reason\": \"144 - Labeler - Low Low Labels\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20877,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:29\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 46,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 91,\n\t\t\t\"Dur\": 4.22,\n\t\t\t\"L_Reason\": \"91 - Seamer - System Manual Mode\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20875,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:25\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 44,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 9,\n\t\t\t\"Dur\": 0.02,\n\t\t\t\"L_Reason\": \"9 - Can Cleaner - Door #2 Open\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20874,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:00:00\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 42,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 35,\n\t\t\t\"Dur\": 9.43,\n\t\t\t\"L_Reason\": \"35 - Filler - Inspection Door 2 Open\"\n\t\t}];\n\t\t\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":220,"wires":[["942b3e2f.fb4ac"]]},{"id":"62a40173.6d601","type":"inject","z":"a65059e8.23da28","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":380,"y":180,"wires":[["c228fb13.cc0c88"]]},{"id":"136b3942.51ea67","type":"function","z":"a65059e8.23da28","name":"Select Row","func":"\nvar cmd = {\n    command:\"deselectRow\",\n    arguments: [],\n    returnPromise: true\n}\n\nmsg.payload = cmd;\nnode.send(msg);\n\n\n\ncmd = {\n    command:\"selectRow\",\n    arguments: [0],\n    returnPromise: true\n};\n\nmsg.payload = cmd;\nnode.send(msg);\n\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":160,"wires":[["520b519d.77404"]],"info":"# deleteRow(row / [rows])\n\n`row=singleId`\n\nor\n\n`row=[array of IDs]` // seems there is a bug/issue in tabulator\n\ndelete a single the row with an id in the middle from 1 to lastId, hope it exists.\n\nWill fail on the second hit if you inject this two times because the id wad deleteted on the first"},{"id":"43a7c00c.56f16","type":"inject","z":"a65059e8.23da28","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":640,"y":120,"wires":[["136b3942.51ea67"]]},{"id":"7f42618c.dfc0e","type":"ui_group","z":"","name":"Group 1","tab":"7b6b84bd.4cc5bc","order":1,"disp":true,"width":"16","collapse":false},{"id":"7b6b84bd.4cc5bc","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

Hi Christian,

Thanks for your help the other day. I still need to spend more time understanding callbacks and learning more about the ui-table which has so many capabilities. I did find a link on how to highlight a row (unfortunately I can't find that link anymore).

Highlighting a row is a simple matter of adding a CSS template and ui-control. I have updated the flow in case you or someone else is interested to see how it works.

[{"id":"a65059e8.23da28","type":"tab","label":"Test","disabled":false,"info":""},{"id":"ba102b3a.7319a8","type":"function","z":"a65059e8.23da28","name":"Format Table","func":"\n//var DT_List = global.get(\"DT_List\");\n//var i;\n//var Line = msg.payload;\n\n\n\n// Can change color in CSS, but not sure where / how to do this:\n    //.tabulator .tabulator-row.selected{\n    //\tbackground: #f00 !important; /*highlight selected row red, make sure it overrides existing styling*/\n    //}\n\n// Display up to 12 rows, select row 0, and highlight in red.\nmsg.ui_control = {\n    \"customHeight\":12,\n    \"tabulator\": {\n        \"selectable\":1,\n        \"renderComplete\":\"function(){this.send({ui_control:{callback:'renderComplete'}})}\"\n    }\n};\n\n\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":620,"wires":[["28893be0.9b6f54"]]},{"id":"28893be0.9b6f54","type":"ui_table","z":"a65059e8.23da28","group":"95d1f5b8.fec938","name":"Table1","order":1,"width":"16","height":"10","columns":[{"field":"RecNo","title":"RecNo","width":"11px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"EvtStartTime","title":"Event Start Time","width":"20px","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"L_Code","title":"L_Code","width":"12px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Dur","title":"Dur","width":"10px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":915,"y":620,"wires":[["c2b8fea0.8095","a5fdb550.df5e48"]]},{"id":"c2b8fea0.8095","type":"debug","z":"a65059e8.23da28","name":"A","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1068,"y":603,"wires":[]},{"id":"725a6131.65486","type":"function","z":"a65059e8.23da28","name":"InitializeData","func":"msg.payload = [{\n\t\t\t\"ID\": 20879,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:29:11\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 49,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 45,\n\t\t\t\"Dur\": 0.07,\n\t\t\t\"L_Reason\": \"45 - Filler - Idle Blocked - Outfeed Conveyor Full\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20878,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:28:43\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 48,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 144,\n\t\t\t\"Dur\": 0.47,\n\t\t\t\"L_Reason\": \"144 - Labeler - Low Low Labels\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20877,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:29\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 46,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 91,\n\t\t\t\"Dur\": 4.22,\n\t\t\t\"L_Reason\": \"91 - Seamer - System Manual Mode\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20875,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:24:25\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 44,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 9,\n\t\t\t\"Dur\": 0.02,\n\t\t\t\"L_Reason\": \"9 - Can Cleaner - Door #2 Open\"\n\t\t},\n\t\t{\n\t\t\t\"ID\": 20874,\n\t\t\t\"WO_StartTime\": \"2020-08-01 16:05:29\",\n\t\t\t\"EvtStartTime\": \"2020-08-01 17:00:00\",\n\t\t\t\"WO_No\": \"AUG1B\",\n\t\t\t\"RecNo\": 42,\n\t\t\t\"ModeNo\": 1,\n\t\t\t\"L_Code\": 35,\n\t\t\t\"Dur\": 9.43,\n\t\t\t\"L_Reason\": \"35 - Filler - Inspection Door 2 Open\"\n\t\t}];\n\t\t\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":569,"wires":[["ba102b3a.7319a8"]]},{"id":"c36f02e7.581b3","type":"inject","z":"a65059e8.23da28","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":313,"y":552,"wires":[["725a6131.65486"]]},{"id":"ae66d03e.f96fb","type":"function","z":"a65059e8.23da28","name":"select row 1","func":"if (msg.hasOwnProperty('ui_control') && msg.ui_control.callback === \"renderComplete\") {\n    var msgOut={\n        payload:{\n            command:\"selectRow\",\n            arguments: [1],\n            returnPromise: false\n        }\n    }\n    return msgOut;\n}","outputs":1,"noerr":0,"x":510,"y":688,"wires":[["28893be0.9b6f54","190f4060.99a39"]]},{"id":"a3d9cd9d.fc7a","type":"ui_ui_control","z":"a65059e8.23da28","name":"","events":"all","x":313,"y":586,"wires":[["725a6131.65486"]]},{"id":"a5fdb550.df5e48","type":"link out","z":"a65059e8.23da28","name":"","links":["932bb72a.8c6df8"],"x":1033,"y":654,"wires":[]},{"id":"932bb72a.8c6df8","type":"link in","z":"a65059e8.23da28","name":"","links":["a5fdb550.df5e48"],"x":370,"y":688,"wires":[["ae66d03e.f96fb"]]},{"id":"190f4060.99a39","type":"debug","z":"a65059e8.23da28","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":745,"y":688,"wires":[]},{"id":"52b617b1.d29588","type":"function","z":"a65059e8.23da28","name":"callback functions","func":"var rowFormatter = function(row){     \n    var data = row.getData();\n    switch (data.$state) {\n        case 'lost':             \n            row.getElement().style.backgroundColor = '#9e2e66';\n            row.getElement().style.color = '#a6a6a6';\n            break;         \n        case 'sleeping':\n            row.getElement().style.backgroundColor = '#336699';\n            break;\n        case 'disconnected':\n            row.getElement().style.backgroundColor = '#cc3300';\n            row.getElement().style.color = '#a6a6a6';\n            break;\n        case 'alert':             \n            row.getElement().style.backgroundColor = '#A6A6DF';\n            break;         \n        case 'init':             \n            row.getElement().style.backgroundColor = '#f2f20d';\n            break;         \n        case 'ready':\n            row.getElement().style.backgroundColor = '';\n            row.getElement().style.color = '';\n            break;         \n        \n    } \n};\n\nreturn msg;","outputs":1,"noerr":0,"x":955,"y":705,"wires":[[]]},{"id":"d40e1fc7.955f9","type":"function","z":"a65059e8.23da28","name":"Test Select","func":"var msg1 =  {};\nvar msg2 =  {};\nvar msg3 =  {};\nvar msg4 =  {};\nvar msg5 =  {};\nvar msg6 =  {};\n\n// var oldRow = flow.get(\"oldRow\");\n// var newRow = flow.get(\"newRow\");\n\n//flow.set(\"oldRow\", oldRow);\n//flow.set(\"oldRow\", oldRow);\n  \nif (msg.topic === \"Select0\") {   \n    msg1.topic = msg.topic;\n    msg1.payload = {\n        \"command\":\"selectRow\",\n        \"arguments\": [0],  \n        \"returnPromise\":false\n        };\n    return msg1;\n}\n   \nif (msg.topic === \"Select1\") {   \n    msg1.topic = msg.topic;\n    msg1.payload = {\n        \"command\":\"selectRow\",\n        \"arguments\": [1],  \n        \"returnPromise\":false\n        };\n    return msg1;\n}\n\nif (msg.topic === \"Select2\") { \n    msg2.topic = msg.topic;\n    msg2.payload = {\n        \"command\":\"selectRow\",\n        \"arguments\": [2],   \n        \"returnPromise\":false\n    }\n    return msg2;\n}\n\nif (msg.topic === \"DeSelect0\") { \n    msg3.topic = msg.topic;\n    msg3.payload = {\n        \"command\":\"deselectRow\",\n        \"arguments\": [0],  \n        \"returnPromise\":false\n    }\n    return msg3;\n}    \n\nif (msg.topic === \"DeSelect1\") { \n    msg3.topic = msg.topic;\n    msg3.payload = {\n        \"command\":\"deselectRow\",\n        \"arguments\": [1],  \n        \"returnPromise\":false\n    }\n    return msg3;\n}    \n\nif (msg.topic === \"DeSelect2\") { \n    msg4.topic = msg.topic;\n    msg4.payload = {\n        \"command\":\"deselectRow\",\n        \"arguments\": [2],   \n        \"returnPromise\":false\n    }\n    return msg4;\n}    \n\nif (msg.topic === \"SelectAll\") { \n    msg5.topic = msg.topic;\n    msg5.payload = {\n        \"command\":\"selectRow\",\n        \"arguments\": [],   \n        \"returnPromise\":false\n    }\n    return msg5;\n}    \n    \nif (msg.topic === \"DeSelectAll\") { \n    msg6.topic = msg.topic;\n    msg6.payload = {\n        \"command\":\"deselectRow\",\n        \"arguments\": [],   \n        \"returnPromise\":false\n    }\n    return msg6;\n}    \n    \n    ","outputs":1,"noerr":0,"x":710,"y":400,"wires":[["28893be0.9b6f54"]]},{"id":"f9738581.6e8408","type":"inject","z":"a65059e8.23da28","name":"Select 1","topic":"Select1","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":260,"wires":[["d40e1fc7.955f9"]]},{"id":"4d6700c0.e7b1","type":"inject","z":"a65059e8.23da28","name":"Select 2","topic":"Select2","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":340,"wires":[["d40e1fc7.955f9"]]},{"id":"fc031e90.33807","type":"inject","z":"a65059e8.23da28","name":"DeSelect 1","topic":"DeSelect1","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":300,"wires":[["d40e1fc7.955f9"]]},{"id":"76a95f90.23894","type":"inject","z":"a65059e8.23da28","name":"DeSelect 2","topic":"DeSelect2","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":380,"wires":[["d40e1fc7.955f9"]]},{"id":"f710e2fb.7ebc7","type":"inject","z":"a65059e8.23da28","name":"SelectAll","topic":"SelectAll","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":420,"wires":[["d40e1fc7.955f9"]]},{"id":"21203b42.126d64","type":"inject","z":"a65059e8.23da28","name":"DeSelect All","topic":"DeSelectAll","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":530,"y":460,"wires":[["d40e1fc7.955f9"]]},{"id":"41ac3f2f.f76ec","type":"inject","z":"a65059e8.23da28","name":"Select 0","topic":"Select0","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":180,"wires":[["d40e1fc7.955f9"]]},{"id":"29f6b693.cb0e9a","type":"inject","z":"a65059e8.23da28","name":"DeSelect 0","topic":"DeSelect0","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":220,"wires":[["d40e1fc7.955f9"]]},{"id":"a16debbf.3be6d8","type":"ui_template","z":"a65059e8.23da28","d":true,"group":"f314211.befcae","name":"","order":1,"width":0,"height":0,"format":"<style>\n.tabulator-row.tabulator-selected {\n\tbackground: #eaa !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":920,"y":560,"wires":[[]]},{"id":"95d1f5b8.fec938","type":"ui_group","z":"","name":"Group 1","tab":"7d788f33.2e1a2","order":1,"disp":true,"width":"16","collapse":false},{"id":"f314211.befcae","type":"ui_group","z":"","name":"Default","tab":"a5efeed4.d5236","order":3,"disp":false,"width":"6","collapse":false},{"id":"7d788f33.2e1a2","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":6,"disabled":false,"hidden":false},{"id":"a5efeed4.d5236","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

Hi,
Sorry to reply late - was busy with other things

If you look into the example flow that come with ui-node you find a way to highlight rows were a cell value match a certain condition.

Perhaps this helps.

BTW: perhaps reply to one of my messages next time - in this way I get notified if you post a question in my direction.

Hi Christian,

Actually you have been replying quite quickly – so no concerns from my end. I have used the solution you provided and it has resolved my issue.

I have previously downloaded the 5 examples, but will download them again and take another look. The table capabilities are quite powerful, so I expect that I will be using them for some other requirements and will need to learn more about them.

I also just want to confirm that I am replying properly. When I reply, I normally use the “Reply” button on the bottom of the page. Is this the correct way or should I be replying to the email that I get? If I reply to the email, will it be posted in the Node-Red forum website?

Hi - you should use the grey Reply button at the end of the message
image
rather than the Blue Reply button at the bottom of the page.
image
That way the previous sender gets an alert that someone replied.
(Please don't ask me why it's like this... :slight_smile:

Fine. Happy to help you if I can.

Nope I did not received a notification ... perhaps take a look onto the top of your message if you really got the correct recipient:

OK, thanks! Trying it now. :smiley:

1 Like

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