Hello,
I have a ui template node where i am using tabulator to display data, i want to be able to pass data from ui template to another function node, more specifically updated the entire table data updated, after changes have been done to the table, so i can later update the table in mysql.
This is where I am so far, I try to use the cellEdited and cellClick functions in tabulator but nothing seems to work.
[ { "id": "8254a60e2478b19c", "type": "ui_template", "z": "3598975a.97f988", "group": "76eb703ccdefd471", "name": "", "order": 1, "width": 14, "height": 7, "format": "<link href=\"/dist/css/tabulator_materialize.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\" src=\"tabulator-master/dist/js/tabulator.min.js\"></script>\n\n\n\n\n<div id=\"example-table\"></div>\n<script>\n\n //Load data from function node\n\n\n var table = new Tabulator(\"#example-table\", {\n //load row data from array\n data:data,\n layout:\"fitColumns\", //fit columns to width of table\n responsiveLayout:\"hide\", //hide columns that don't fit on the table\n addRowPos:\"top\", //when adding a new row, add it to the top of the table\n history:true, //allow undo and redo actions on the table\n pagination:\"local\", //paginate the data\n paginationSize:7, //allow 7 rows per page of data\n paginationCounter:\"rows\", //display count of paginated rows in footer\n movableColumns:true, //allow column order to be changed\n initialSort:[ //set the initial sort order of the data\n {column:\"name\", dir:\"asc\"},\n ],\n columnDefaults:{\n tooltip:true, //show tool tips on cells\n },\n columns:[ //define the table columns\n {formatter:\"rowSelection\", titleFormatter:\"rowSelection\", hozAlign:\"center\", headerSort:false, cellClick:function(e,\n cell){\n cell.getRow().toggleSelect();\n }},\n {title:\"Name\", field:\"name\", editor:\"input\"},\n {title:\"Task Progress\", field:\"progress\", hozAlign:\"left\", formatter:\"progress\", editor:true},\n {title:\"Gender\", field:\"gender\", width:95, editor:\"list\", editorParams:{values:[\"male\", \"female\"]}},\n {title:\"Rating\", field:\"rating\", formatter:\"star\", hozAlign:\"center\", width:100, editor:true},\n {title:\"Color\", field:\"col\", width:130, editor:\"input\"},\n {title:\"Date Of Birth\", field:\"dob\", width:130, sorter:\"date\", hozAlign:\"center\"},\n {title:\"Driver\", field:\"car\", width:90, hozAlign:\"center\", formatter:\"tickCross\", sorter:\"boolean\", editor:true},\n ],\n });\n \n (function(scope) {\n scope.$watch('msg', function(msg) {\n if(msg) {\n setTimeout(function() {\n var tabledata = msg.payload;\n table.replaceData(tabledata);\n }, 200);\n }\n });\n })(scope);\n table.on(\"renderComplete\", function() {\n let data = table.getData();\n console.log(\"Table data:\", data);\n });\n \n // Handle cell edited event\n table.options.cellEdited = function(cell) {\n var editedData = cell.getData();\n \n // Log the entire table data to the console\n var tableData = table.getData();\n msg.payload = tableData;\n };\n \n // Handle cell click event\n table.options.cellClick = function(e, cell) {\n console.log(\"Cell clicked:\", cell.getData());\n };\n //msg.payload = JSON.stringify(data);\n</script>", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 600, "y": 320, "wires": [ [ "2f438d62116a8ca3" ] ] }, { "id": "cd2ad93cc554faf3", "type": "inject", "z": "3598975a.97f988", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 170, "y": 320, "wires": [ [ "6e598c5ad254b734", "6fe791d03631b24c" ] ] }, { "id": "6e598c5ad254b734", "type": "function", "z": "3598975a.97f988", "name": "function 20", "func": "var tabledata = [\n { id: 1, name: \"Oli ob\", progress: 12, gender: \"male\", rating: 1, col: \"red\", dob: \"19/02/1984\", car: 1 },\n { id: 2, name: \"Mary May\", progress: 1, gender: \"female\", rating: 2, col: \"blue\", dob: \"14/05/1982\", car: true },\n { id: 3, name: \"Christine Lobowski\", progress: 42, gender: \"female\", rating: 0, col: \"green\", dob: \"22/05/1982\", car: \"true\" },\n { id: 4, name: \"Brendon Philips\", progress: 100, gender: \"male\", rating: 1, col: \"orange\", dob: \"01/08/1980\" },\n { id: 5, name: \"Margret Marmajuke\", progress: 16, gender: \"female\", rating: 5, col: \"yellow\", dob: \"31/01/1999\" },\n { id: 6, name: \"Frank Harbours\", progress: 38, gender: \"male\", rating: 4, col: \"red\", dob: \"12/05/1966\", car: 1 },\n];\n\nmsg.data = tabledata;\nreturn msg;", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 390, "y": 320, "wires": [ [] ] }, { "id": "2f438d62116a8ca3", "type": "debug", "z": "3598975a.97f988", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 850, "y": 320, "wires": [] }, { "id": "6fe791d03631b24c", "type": "mysql-r2", "z": "3598975a.97f988", "name": "", "host": "localhost", "database": "test1", "username": "root", "password": "", "sql": "select * from table_name", "port": "3306", "pooling": false, "waitForConnections": true, "connectionLimit": "10", "queueTimeout": "10000", "x": 400, "y": 220, "wires": [ [ "625a2e87efe44b70", "8254a60e2478b19c" ] ] }, { "id": "625a2e87efe44b70", "type": "debug", "z": "3598975a.97f988", "name": "debug 39", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 620, "y": 220, "wires": [] }, { "id": "76eb703ccdefd471", "type": "ui_group", "name": "Group2", "tab": "3b08fac0.8f06b6", "order": 4, "disp": true, "width": 14, "collapse": false, "className": "" }, { "id": "3b08fac0.8f06b6", "type": "ui_tab", "name": "Home", "icon": "track_changes", "order": 1, "disabled": false, "hidden": false } ]
