[{"data":1,"prerenderedAt":66},["ShallowReactive",2],{"integration-node-red-node-ui-table\u002F":3},{"_id":4,"categories":5,"author":8,"description":10,"npmOwners":11,"npmScope":15,"name":4,"ffCertified":16,"downloads":17,"version":19,"updatedAt":20,"maintainers":21,"homepage":28,"bugs":29,"repository":31,"time":34,"lastUpdated":20,"created":35,"license":61,"githubOwner":62,"githubRepo":63,"examples":64,"readme":65},"node-red-node-ui-table",[6,7],"catalogue_ui","catalogue",{"name":9},"Kazuhito Yokoi","Table UI widget node for Node-RED Dashboard",[12,13,14],"knolleary","dceejay","kazuhitoyokoi",null,false,{"week":18},14750,"0.4.5","2025-07-26T20:08:23.957Z",[22,24,26],{"name":12,"email":23},"nick.oleary@gmail.com",{"name":13,"email":25},"dceejay@gmail.com",{"name":14,"email":27},"kazuhitoyokoi@nodered.jp","https:\u002F\u002Fgithub.com\u002Fnode-red\u002Fnode-red-ui-nodes\u002Ftree\u002Fmaster\u002Fnode-red-node-ui-table#README.md",{"url":30},"https:\u002F\u002Fgithub.com\u002Fnode-red\u002Fnode-red-ui-nodes\u002Fissues",{"type":32,"url":33},"git","git+https:\u002F\u002Fgithub.com\u002Fnode-red\u002Fnode-red-ui-nodes.git",{"created":35,"modified":20,"0.1.0":36,"0.1.1":37,"0.1.2":38,"0.1.3":39,"0.1.4":40,"0.1.5":41,"0.2.1":42,"0.2.2":43,"0.3.0":44,"0.3.1":45,"0.3.2":46,"0.3.3":47,"0.3.4":48,"0.3.5":49,"0.3.6":50,"0.3.7":51,"0.3.8":52,"0.3.10":53,"0.3.11":54,"0.3.12":55,"0.4.0":56,"0.4.1":57,"0.4.3":58,"0.4.4":59,"0.4.5":60},"2019-08-22T16:29:44.702Z","2019-08-22T16:29:44.854Z","2019-08-22T16:32:46.932Z","2019-08-23T08:58:56.990Z","2019-08-23T09:43:08.733Z","2019-09-08T18:59:51.629Z","2019-09-09T07:48:08.285Z","2019-12-04T13:34:30.840Z","2020-02-18T17:03:31.011Z","2020-02-28T15:59:55.931Z","2020-03-19T08:36:59.593Z","2020-07-17T09:47:46.870Z","2020-07-19T17:24:12.212Z","2020-07-26T22:29:53.170Z","2020-09-07T22:08:07.552Z","2020-10-15T10:57:02.300Z","2020-10-30T16:01:39.397Z","2020-11-17T23:14:56.789Z","2020-12-04T09:45:26.663Z","2021-07-08T07:31:23.098Z","2022-01-30T11:30:06.598Z","2022-08-19T13:54:41.470Z","2022-08-24T14:13:52.517Z","2022-08-25T14:01:44.133Z","2024-09-24T21:15:09.909Z","2025-07-26T20:08:23.778Z","Apache-2.0","node-red","node-red-ui-nodes",[],"\u003Ch1 id=\"node-red-node-ui-table\">\u003Ca class=\"header-anchor\" href=\"#node-red-node-ui-table\">node-red-node-ui-table\u003C\u002Fa>\u003C\u002Fh1>\n\u003Cp>A Node-RED UI widget node which displays data as a table.\u003C\u002Fp>\n\u003Ch2 id=\"install\">\u003Ca class=\"header-anchor\" href=\"#install\">Install\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Either use the Editor - Menu - Manage Palette - Install option, or run the following command in your Node-RED user directory (typically \u003Ccode>~\u002F.node-red\u003C\u002Fcode>) after installing Node-RED-dashboard.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    npm i node-red-node-ui-table\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"usage\">\u003Ca class=\"header-anchor\" href=\"#usage\">Usage\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>This table node expects \u003Ccode>msg.payload\u003C\u002Fcode> to contain an array of data, one object per row.\nEach data row object should have the same set of keys because the keys in the object are used as the column names.\u003C\u002Fp>\n\u003Cp>Both examples can be imported from the Node-RED Editor - Menu - Import - Examples\u003C\u002Fp>\n\u003Ch3 id=\"simple-table\">\u003Ca class=\"header-anchor\" href=\"#simple-table\">Simple Table\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>With no configuration the node will try to create a table with equally spaced columns of simple text for each row provided, using the keys as column titles.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fnode-red\u002Fnode-red-ui-nodes\u002Fmaster\u002Fnode-red-node-ui-table\u002Fscreenshot.png\" alt=\"screenshot\" \u002F>\u003C\u002Fp>\n\u003Ch3 id=\"richer-table\">\u003Ca class=\"header-anchor\" href=\"#richer-table\">Richer Table\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>The columns can be configured manually. If so then only the \u003Ccode>msg.payload\u003C\u002Fcode> properties defined will be displayed. You can then also define the Title, Width, Alignment and Format of the column.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fnode-red\u002Fnode-red-ui-nodes\u002Fmaster\u002Fnode-red-node-ui-table\u002Fscreenshot2.png\" alt=\"screenshot2\" \u002F>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Title\u003C\u002Fstrong>: Text for the column title (or blank).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Width\u003C\u002Fstrong>: Either a number of pixels or percentage of the overall table width. e.g. 150 or 20%. Leave blank for automatic, equally spaced to fill the available space.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Align\u003C\u002Fstrong>: Column alignment, left, centre or right.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Format\u003C\u002Fstrong>: Formatting of the input.\n\u003Cul>\n\u003Cli>\u003Cstrong>Plain Text\u003C\u002Fstrong> - Simple text values.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>HTML\u003C\u002Fstrong> - Rich html to allow text Formatting - \u003Cem>NOTE\u003C\u002Fem>: this is raw un-sanitised HTML.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Link\u003C\u002Fstrong> - URL link to a web page.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Image\u003C\u002Fstrong> - Source (src) URL of an image to display.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Progress\u003C\u002Fstrong> - a progress bar from 0 to 100.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Traffic\u003C\u002Fstrong> - Red\u002FAmber\u002FGreen indicator light set by numbers in the range 0-33-67-100.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Color\u003C\u002Fstrong> - HTML color name, or hex value (#rrggbb) to fill the cell.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tick\u002FCross\u003C\u002Fstrong> - Tick or Cross symbol, boolean true\u002Ffalse, numeric 1\u002F0 or text \"1\"\u002F\"0\".\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Stars\u003C\u002Fstrong> - Number of stars - numeric 0 to 5.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Row Number\u003C\u002Fstrong> - Current row number.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"example-data\">\u003Ca class=\"header-anchor\" href=\"#example-data\">Example data\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>[\n    {\n        \"Name\": \"Kazuhito Yokoi\",\n        \"Age\": \"35\",\n        \"Favourite Color\": \"red\",\n        \"Date Of Birth\": \"12\u002F09\u002F1983\"\n    },\n    {\n        \"Name\": \"Oli Bob\",\n        \"Age\": \"12\",\n        \"Favourite Color\": \"cyan\",\n        \"Date Of Birth\": \"12\u002F08\u002F2017\"\n    }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"advanced-features\">\u003Ca class=\"header-anchor\" href=\"#advanced-features\">advanced features\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>ui-table is based on the \u003Cstrong>tabulator\u003C\u002Fstrong> module. You can find an excellent in depth \u003Ca href=\"http:\u002F\u002Ftabulator.info\u002Fdocs\u002F4.4\">documentation here\u003C\u002Fa> with many \u003Ca href=\"http:\u002F\u002Ftabulator.info\u002Fexamples\u002F4.4\">examples here\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"send-commands-to-ui-table\">\u003Ca class=\"header-anchor\" href=\"#send-commands-to-ui-table\">send commands to ui-table\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Instead of sending an array to ui-table this node to replace the complete table data ui-table also accepts an object as payload to send commands. Beside data manipulation you can \u003Ca href=\"http:\u002F\u002Ftabulator.info\u002Fdocs\u002F4.5\u002Ffilter#func\">set filters\u003C\u002Fa> and do many other things with commands. The object must have the following properties\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>command\u003C\u002Fcode> a valid tabulator function such as \u003Ccode>addRow\u003C\u002Fcode>, \u003Ccode>replaceData\u003C\u002Fcode> or \u003Ccode>addFilter\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>arguments\u003C\u002Fcode> \u003Cem>(optional)\u003C\u002Fem> array of arguments for that function\u003C\u002Fli>\n\u003Cli>\u003Ccode>returnPromise\u003C\u002Fcode> \u003Cem>(optional)\u003C\u002Fem> a boolean value. \u003Ccode>true\u003C\u002Fcode> if the function should return a promise message. See tabulator documentation which commands will return promises\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>example\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{\"payload\":{\n    \"command\":\"addData\",\n    \"arguments\":[\n        {\n            \"facility\":\"daemon\",\n            \"facilityCode\":3,\n            \"severity\":\"info\",\n            \"severityCode\":6,\n            \"tag\":\"systemd[1]\",\n            \"timestamp\":\"2020-01-02T19:17:39.793Z\",\n            \"hostname\":\"localhost\",\n            \"address\":\"127.0.0.1\",\n            \"family\":\"IPv4\",\n            \"port\":38514,\n            \"size\":80,\n            \"msg\":\"some demo data\",\n            \"id\":2351\n        },\n        true\n    ],\n    \"returnPromise\":true\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>By sending only changed or new data to ui-table it is possible to update the table very fast by only sending the new data down to cell level. Or huge amounts of data could be sent like logs.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>important notices\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Data which is sent to ui-table through commands is \u003Cstrong>not\u003C\u002Fstrong> cached by ui-table! The flow has to take care to update the table for new clients connection or dashboard tab changes!\nTabulator does not limit the amount of data it holds. It is quite efficient in showing tables with a couple of thousand rows. If it the data exceeds the capabilities of the clients browser it will crash with an \u003Cstrong>out of memory\u003C\u002Fstrong> error without notice.\u003C\u002Fp>\n\u003Cp>Example flow \"4 sending commands.json\" file can be found in the examples folder or installed directly using \u003Cstrong>menu\u002Fimport\u002Fexamples\u002Fui-table\u003C\u002Fstrong>.\nThis flow shows a basic implementation how the flow can keep a cached copy of all table data and add\u002Fdelete or update selective rows.\nMost nodes have info text available in the info\u002Fhelp tab.\u003C\u002Fp>\n\u003Ch2 id=\"control-ui-table-by-sending-msgui_control-messages\">\u003Ca class=\"header-anchor\" href=\"#control-ui-table-by-sending-msgui_control-messages\">control ui-table by sending \u003Ccode>msg.ui_control\u003C\u002Fcode> messages\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>ui-table can be customized by sending configuration data to \u003Ccode>msg.ui_control.tabulator\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fnode-red\u002Fnode-red-ui-nodes\u002Fmaster\u002Fnode-red-node-ui-table\u002F\u002Fui-table-custom.png\" alt=\"customized table\" \u002F>\u003C\u002Fp>\n\u003Cp>by adding \u003Cem>\u003Cstrong>headers\u003C\u002Fstrong>\u003C\u002Fem>, \u003Cem>\u003Cstrong>footers\u003C\u002Fstrong>\u003C\u002Fem>, \u003Cem>\u003Cstrong>line\u003C\u002Fstrong>\u003C\u002Fem> or \u003Cem>\u003Cstrong>column grouping\u003C\u002Fstrong>\u003C\u002Fem> it is sometimes not possible to determine the amount of lines. Therefore the height can be defined by sending \u003Ccode>msg.ui_control.customHeight=lines\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Example flow \"3 ui_control table.json\" file can be found in the examples folder\u003C\u002Fp>\n\u003Cul>\n\u003Cli>grouped columns by nesting column definition in \u003Ccode> ui_control.tabulator.columns\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>first column \u003Ccode>frozen\u003C\u002Fcode> from horizontal scrolling\u003C\u002Fli>\n\u003Cli>\u003Ccode>formatterParams\u003C\u002Fcode> to define min\u002Fmax, color, legend or other parameters for \u003Ccode>progress\u003C\u002Fcode> and \u003Ccode>planText\u003C\u002Fcode> formatters\u003C\u002Fli>\n\u003Cli>functions to format legend values\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F add a unit\nfunction(cell, formatterParams, onRendered){\n    return cell.getValue()+\"°C\";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>or more sophisticated using html\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F convert Number to Icons\nfunction(cell, formatterParams, onRendered){\n    var html=\"<i class=\\\"\";\n    switch(cell.getValue()) {\n        case 0: html+=\"fa fa-calendar-check-o\"; break;\n        case 1: html+=\"fa fa-hand-o-up\"; break;\n        case 2: html+=\"fa fa-suitcase\"; break;\n        case 3: html+=\"fa fa-spinner fa-spin fa-fw\"; break;\n    }\n    html+='\\\"><\u002Fi>';\n    return html;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Ccode>topCalc\u003C\u002Fcode> for average and min\u002Fmax calculations\u003C\u002Fli>\n\u003Cli>custom icons for \u003Ccode>tickCross\u003C\u002Fcode> formatter\u003C\u002Fli>\n\u003Cli>\u003Ccode>tick\u003C\u002Fcode> formatter\u003C\u002Fli>\n\u003Cli>\u003Ccode>groupBy\u003C\u002Fcode> parameter to use group lines. \u003Ccode>groupHeader\u003C\u002Fcode> 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)\u003C\u002Fli>\n\u003Cli>\u003Ccode>columnResized\u003C\u002Fcode> callback function to receive a message when the user resize a column\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\">function(column){\n    var newColumn = {\n        field: column._column.field,\n        visible: column._column.visible,\n        width: column._column.width,\n        widthFixed: column._column.widthFixed,\n        widthStyled: column._column.widthStyled\n    };\n    this.send({\n        ui_control:{callback:'columnResized',columnWidths:newColumn}\n    });\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>use \u003Ccode>this.send({})\u003C\u002Fcode> to pass result to Node-RED. (to avoid a loopback add\u003Ccode>ui_control.callback=\"someText\"\u003C\u002Fcode>)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\"> this.send({topic: \"anyTopic\",payload:\"anyPayload\",ui_control: {callback:\"myCallback\"}});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>all parameters are named according to tabulator documentation. Use \u003Ccode>field\u003C\u002Fcode> instead of \u003Ccode>Property\u003C\u002Fcode> used in node configuration\u003C\u002Fli>\n\u003Cli>no validation of \u003Ccode>msg.ui_control\u003C\u002Fcode> data is performed! So if you don`t get the results you expect take a look on your browsers console.\u003C\u002Fli>\n\u003C\u002Ful>\n",1784738654143]