node-red-node-ui-table - npm Package Compare versions

Comparing version 0.1.5 to 0.2.1

node.js

@@ -66,4 +66,8 @@ /**
                     forwardInputMessages: false,
+
                     beforeEmit: function (msg, value) {
-                        return { msg: { payload: value } };
+                        return {msg: {
+                            payload: value, 
+                            ui_control: (msg.hasOwnProperty("ui_control")) ? msg.ui_control : undefined,
+                        }};
                     },
@@ -77,17 +81,31 @@ beforeSend: function (msg, orig) {
                         var tablediv;
-                        var createTable = function(basediv, tabledata, columndata, outputs) {
-                            var y = (columndata.length === 0) ? 25 : 32;
-                            var opts = {
-                                data: tabledata,
-                                layout: 'fitColumns',
-                                columns: columndata,
-                                autoColumns: columndata.length == 0,
-                                movableColumns: true,
-                                height: tabledata.length * y + 26
-                            }
+                        var createTable = function(basediv, tabledata, columndata, outputs, ui_control) {
+                            if (!ui_control || !ui_control.tabulator) {
+                                var y = (columndata.length === 0) ? 25 : 32;
+                                var opts = {
+                                    data: tabledata,
+                                    layout: 'fitColumns',
+                                    columns: columndata,
+                                    autoColumns: columndata.length == 0,
+                                    movableColumns: true,
+                                    height: tabledata.length * y + 26
+                                }
+                            } else { // configuration via ui_control
+                                var y = (ui_control.tabulator.columns.length > 0) ? 32 : 25;
+                                var opts = ui_control.tabulator;
+                                opts.data = tabledata;
+                                if (!ui_control.tabulator.layout) opts.layout = 'fitColumns';
+                                if (!ui_control.tabulator.movableColumns) opts.movableColumns = true;
+                                if (!ui_control.tabulator.columns) opts.columns = columndata;
+                                if (!ui_control.tabulator.autoColumns) autoColumns = columndata.length == 0;
+                                if (!ui_control.customHeight) opts.height= tabledata.length * y + 26;
+                                    else opts.height= ui_control.customHeight * y + 26;
+                            } // end of configuration via ui_control
+
                             if (outputs > 0) {
                                 opts.cellClick = function(e, cell) {
-                                    $scope.send({topic:cell.getField(),payload:cell.getData()});
+                                    $scope.send({topic:cell.getField(), payload:cell.getData(), row:(cell.getRow()).getPosition()});
                                 };
                             }
+
                             var table = new Tabulator(basediv, opts);
@@ -102,14 +120,55 @@ };
                                     $scope.inited = true;
-                                    createTable(tablediv,$scope.tabledata,$scope.config.columns,$scope.config.outputs);
+                                    createTable(tablediv,$scope.tabledata,$scope.config.columns,$scope.config.outputs,$scope.config.ui_control);
                                     $scope.tabledata = [];
                                 }
-                            }, 40);
+                            }, 200); // lowest setting on my side ... still fails sometimes ;)
                         };
                         $scope.$watch('msg', function (msg) {
+                            if (msg && msg.hasOwnProperty("ui_control") && msg.ui_control.hasOwnProperty("callback")) return; // to avoid loopback from callbacks. No better solution jet. Help needed.
                             if (msg && msg.hasOwnProperty("payload") && Array.isArray(msg.payload)) {
-                                if ($scope.inited == false) {
-                                    $scope.tabledata = msg.payload;
-                                    return;
+                                $scope.tabledata = msg.payload;
+                            }
+                            
+                            // configuration via ui_control
+                            if (msg && msg.hasOwnProperty("ui_control")) {
+
+                                var addValueOrFunction = function (config,param,value) {
+                                    if (typeof String.prototype.parseFunction != 'function') {
+                                        String.prototype.parseFunction = function () {
+                                            var funcReg = /function *\(([^()]*)\)[ \n\t]*{(.*)}/gmi;
+                                            var match = funcReg.exec(this.replace(/\n/g, ' '));
+                                            if(match) {
+                                                return new Function(match[1].split(','), match[2]);
+                                            }
+                                            return null;
+                                        };
+                                    }
+                                    var valueFunction;
+                                    if (typeof value === "string" && (valueFunction = value.parseFunction())) {
+                                        config[param]=valueFunction.bind($scope); // to enable this.send() for callback functions.
+                                    }
+                                    else config[param]= value;
                                 }
-                                createTable(tablediv,msg.payload,$scope.config.columns,$scope.config.outputs);
+
+                                var addObject = function (destinationObject,sourceObject) {
+                                    for (var element in sourceObject) {
+                                        if (!destinationObject[element]) destinationObject[element]=(Array.isArray(sourceObject[element]))? [] : {};
+                                        if (typeof sourceObject[element] === "object") {
+                                            addObject(destinationObject[element],sourceObject[element])
+                                        } else {
+                                            addValueOrFunction(destinationObject,element,sourceObject[element]);
+                                        }
+                                    }
+                                }
+
+                                if (!$scope.config.ui_control) { $scope.config.ui_control={}; }
+
+                                addObject($scope.config.ui_control,msg.ui_control);
+
+                            } // end off configuration via ui_control
+
+                            if ($scope.inited == false) {
+                                return;
+                            } else {
+                                createTable(tablediv, $scope.tabledata, $scope.config.columns, $scope.config.outputs, $scope.config.ui_control);
                             }
@@ -140,2 +199,2 @@ });
     });
-};
+};

package.json

 {
   "name": "node-red-node-ui-table",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Table UI widget node for Node-RED Dashboard",
   "author": "Kazuhito Yokoi",
-  "contributors": ["Dave Conway-Jones","@hotNipi"],
+  "contributors": ["Dave Conway-Jones","@hotNipi","@Christian-Me"],
   "license": "Apache-2.0",
@@ -8,0 +8,0 @@ "node-red": {

README.md

@@ -65,1 +65,62 @@ node-red-node-ui-table
 ```
+
+## control ui-table by sending ```msg.ui_control``` messages
+
+ui-table is based on the **tabulator** module and can be customized by sending configuration data to `msg.ui_control.tabulator`. You can find an excellent in depth [documentation here](http://tabulator.info/docs/4.4) with many [examples here](http://tabulator.info/examples/4.4).
+
+![customized table](./ui-table-custom.png)
+
+by adding ***headers***, ***footers***, ***line*** or ***column grouping*** it is sometimes not possible to determine the amount of lines. Therefore the height can be defined by sending `msg.ui_control.customHeight=lines`. 
+
+Example flow "3 ui_control table.json" file can be found in the examples folder
+
+- grouped columns by nesting column definition in ` ui_control.tabulator.columns`
+- first column ```frozen``` from horizontal scrolling
+- `formatterParams` to define min/max, color, legend or other parameters for `progress` and `planText` formatters 
+- functions to format legend values
+``` javascript
+// add a unit
+var function(cell, formatterParams, onRendered){
+    return cell.getValue()+"°C";
+}
+```
+or more sophisticated using html
+``` javascript
+// convert Number to Icons
+var function(cell, formatterParams, onRendered){
+    var html="<i class=\"";
+    switch(cell.getValue()) {
+        case 0: html+="fa fa-calendar-check-o"; break;
+        case 1: html+="fa fa-hand-o-up"; break;
+        case 2: html+="fa fa-suitcase"; break;
+        case 3: html+="fa fa-spinner fa-spin fa-fw"; break;
+    }
+    html+='\"></i>';
+    return html;
+}
+```
+- `topCalc` for average and min/max calculations
+- custom icons for `tickCross` formatter
+- `tick` formatter
+- `groupBy` parameter to use group lines. `groupHeader` function to format legend and adding html tags (Insert a field name in the groupBy paramter at the end of json in the change node to use this feature)
+- `columnResized` callback function to receive a message when the user resize a column
+``` javascript
+columnResized = function(column){
+    var newColumn = {
+        field: column._column.field,
+        visible: column._column.visible,
+        width: column._column.width,
+        widthFixed: column._column.widthFixed,
+        widthStyled: column._column.widthStyled
+    };
+    this.send({
+        ui_control:{callback:'columnResized',columnWidths:newColumn}
+    });
+}
+```
+- use `this.send({})` to pass result to Node-RED. (to avoid a loopback add`ui_control.callback="someText"`)
+```javascript
+ this.send({topic: "anyTopic",payload:"anyPayload",ui_control: {callback:"myCallback"}});
+```
+- all parameters are named according to tabulator documentation. Use ```field``` instead of ```Property``` used in node configuration
+- no validation of `msg.ui_control` data is performed! So if you don`t get the results you expect take a look on your browsers console.

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1087623

increased by5.24%

Number of package files

17

increased by13.33%

Lines of code

17502

increased by1.02%

Number of lines in readme file

126

increased by93.85%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes