{"id":11448,"library":"node-red-node-ui-table","title":"Node-RED UI Table Widget","description":"This Node-RED UI widget node, currently at version 0.4.5, displays dynamic data as an interactive table within the Node-RED Dashboard. It expects `msg.payload` to contain an array of objects, with each object representing a row and its keys defining the column names. The node is actively maintained as part of the `node-red-ui-nodes` collection and leverages the powerful Tabulator.js library for its core table functionality. It offers extensive configuration options for columns, including width, alignment, and various data formatting options such as plain text, raw HTML, links, images, progress bars, traffic lights, color fills, and star ratings. Advanced users can also send commands to the table via `msg.payload` to manipulate data, apply filters, and interact directly with the underlying Tabulator API. Its key differentiator lies in its seamless integration into the Node-RED flow paradigm, making it straightforward to visualize dynamic data streams from IoT devices, APIs, or other Node-RED sources directly within a web-based dashboard.","status":"active","version":"0.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/node-red/node-red-ui-nodes","tags":["javascript","node-red","node-red-dashboard","table"],"install":[{"cmd":"npm install node-red-node-ui-table","lang":"bash","label":"npm"},{"cmd":"yarn add node-red-node-ui-table","lang":"bash","label":"yarn"},{"cmd":"pnpm add node-red-node-ui-table","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the UI widget to function and be displayed within the Node-RED Dashboard environment.","package":"node-red-dashboard","optional":false}],"imports":[{"note":"This package is a Node-RED runtime node, not a traditional JavaScript library imported into user code. It is installed into your Node-RED user directory (typically `~/.node-red`) and then appears in the Node-RED flow editor palette for configuration.","wrong":"import { UITable } from 'node-red-node-ui-table'","symbol":"Node-RED Palette Integration","correct":"npm i node-red-node-ui-table"},{"note":"The node expects `msg.payload` to be an array of objects, where each object is a row and its keys define column names. Incorrect payload structure is a common reason for the table not displaying data.","wrong":"msg.payload = 'some string' or msg.payload = { 'key': 'value' } (for simple table)","symbol":"Data Input (msg.payload)","correct":"msg.payload = [{ 'col1': 'value1' }, { 'col2': 'value2' }];"},{"note":"For advanced interactions, `msg.payload` can be an object with a `command` property corresponding to a Tabulator.js function, an optional `arguments` array, and `returnPromise` boolean. Refer to Tabulator.js documentation for valid commands.","wrong":"msg.payload = { 'command-name': [...] } or direct Tabulator function calls","symbol":"Tabulator Commands (msg.payload.command)","correct":"msg.payload = { command: 'addData', arguments: [{ rowData: '...' }], returnPromise: true };"}],"quickstart":{"code":"{\n  \"id\": \"a1b2c3d4.e5f6g7h8\",\n  \"type\": \"tab\",\n  \"label\": \"UI Table Quickstart\",\n  \"disabled\": false,\n  \"info\": \"\",\n  \"nodes\": [\n    {\n      \"id\": \"1a2b3c4d.5e6f7a8b\",\n      \"type\": \"inject\",\n      \"z\": \"a1b2c3d4.e5f6g7h8\",\n      \"name\": \"Send Simple Data\",\n      \"props\": [\n        { \"p\": \"payload\" },\n        { \"p\": \"topic\", \"vt\": \"str\" }\n      ],\n      \"repeat\": \"\",\n      \"crontab\": \"\",\n      \"once\": true,\n      \"onceDelay\": 0.1,\n      \"topic\": \"\",\n      \"payload\": \"[ { \\\"Name\\\": \\\"Kazuhito Yokoi\\\", \\\"Age\\\": \\\"35\\\", \\\"Favourite Color\\\": \\\"red\\\", \\\"Date Of Birth\\\": \\\"12/09/1983\\\" }, { \\\"Name\\\": \\\"Oli Bob\\\", \\\"Age\\\": \\\"12\\\", \\\"Favourite Color\\\": \\\"cyan\\\", \\\"Date Of Birth\\\": \\\"12/08/2017\\\" } ]\",\n      \"payloadType\": \"json\",\n      \"x\": 180,\n      \"y\": 100,\n      \"wires\": [\n        [\"f9e8d7c6.b5a4a3a2\"]\n      ]\n    },\n    {\n      \"id\": \"f9e8d7c6.b5a4a3a2\",\n      \"type\": \"ui_table\",\n      \"z\": \"a1b2c3d4.e5f6g7h8\",\n      \"name\": \"My Simple Table\",\n      \"group\": \"group_1\",\n      \"order\": 1,\n      \"width\": \"0\",\n      \"height\": \"0\",\n      \"columns\": [],\n      \"outputs\": 0,\n      \"cts\": false,\n      \"x\": 450,\n      \"y\": 100,\n      \"wires\": []\n    },\n    {\n      \"id\": \"7a6b5c4d.3e2f1a0b\",\n      \"type\": \"inject\",\n      \"z\": \"a1b2c3d4.e5f6g7h8\",\n      \"name\": \"Send Command: Add Row\",\n      \"props\": [\n        { \"p\": \"payload\" },\n        { \"p\": \"topic\", \"vt\": \"str\" }\n      ],\n      \"repeat\": \"\",\n      \"crontab\": \"\",\n      \"once\": false,\n      \"onceDelay\": 0.1,\n      \"topic\": \"\",\n      \"payload\": \"{\\n    \\\"command\\\":\\\"addData\\\",\\n    \\\"arguments\\\":[\\n        {\\n            \\\"Name\\\":\\\"New Row\\\",\\n            \\\"Age\\\":\\\"25\\\",\\n            \\\"Favourite Color\\\":\\\"green\\\",\\n            \\\"Date Of Birth\\\":\\\"01/01/2025\\\"\\n        },\\n        true\\n    ],\\n    \\\"returnPromise\\\":false\\n}\",\n      \"payloadType\": \"json\",\n      \"x\": 210,\n      \"y\": 160,\n      \"wires\": [\n        [\"f9e8d7c6.b5a4a3a2\"]\n      ]\n    },\n    {\n      \"id\": \"group_1\",\n      \"type\": \"ui_group\",\n      \"name\": \"Default\",\n      \"tab\": \"tab_1\",\n      \"order\": 1,\n      \"disp\": true,\n      \"width\": \"6\",\n      \"collapse\": false,\n      \"className\": \"\"\n    },\n    {\n      \"id\": \"tab_1\",\n      \"type\": \"ui_tab\",\n      \"name\": \"Home\",\n      \"icon\": \"dashboard\",\n      \"order\": 1,\n      \"disabled\": false,\n      \"hidden\": false\n    }\n  ]\n}","lang":"javascript","description":"This Node-RED flow demonstrates basic installation via `npm` and how to populate the `ui-table` node with simple array data and send advanced commands to add rows dynamically. Import this JSON into Node-RED, ensure `node-red-dashboard` is installed, and deploy to see the table."},"warnings":[{"fix":"Only use the 'HTML' format with data from trusted sources. For untrusted input, implement a sanitization step in a preceding Node-RED function node using a library like `dompurify` before passing the data to `ui-table`.","message":"Unsanitized HTML in 'HTML' column format: When using the 'HTML' column format option, the input HTML from `msg.payload` is rendered directly into the browser without any sanitization. This introduces a Cross-Site Scripting (XSS) vulnerability if data originates from untrusted sources.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade your Node.js runtime environment to version 16 or higher. Tools like `nvm` (Node Version Manager) can facilitate this upgrade process.","message":"Node.js version compatibility: This node explicitly requires Node.js version 16 or newer as per its `engines` specification. Running Node-RED on older Node.js versions may lead to installation failures, runtime errors, or unexpected behavior.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Ensure `node-red-dashboard` is installed in your Node-RED user directory (typically `~/.node-red`) by running `npm i node-red-dashboard`, or by installing it via the Node-RED Palette Manager, then restart Node-RED.","message":"Peer dependency on `node-red-dashboard`: The `ui-table` node is a UI widget for the Node-RED Dashboard and will not function or appear in the palette without `node-red-dashboard` being installed alongside it.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `msg.payload` is an array of uniform objects (e.g., `[{\"col1\": \"value1\"}, {\"col2\": \"value2\"}]`). Use the Node-RED debug tab to inspect the exact structure of the message entering the `ui-table` node.","cause":"Incorrect `msg.payload` format. The node expects an array of objects, where each object represents a row and its keys define column names.","error":"Table is empty or not displaying any data in the Node-RED Dashboard."},{"fix":"Run `npm i node-red-node-ui-table` (and `npm i node-red-dashboard` if missing) in your Node-RED user directory (typically `~/.node-red`), then restart Node-RED. Alternatively, use the 'Manage Palette' option within the Node-RED editor.","cause":"The package or its peer dependencies are not correctly installed in the Node-RED user directory, or Node-RED has not been restarted after installation.","error":"Node-RED reports 'Error: Cannot find module 'node-red-node-ui-table'' or the UI Table node is missing from the palette."},{"fix":"Verify that `msg.payload` adheres to the command structure: `{\"command\":\"functionName\", \"arguments\":[...], \"returnPromise\":true/false}`. Consult the Tabulator documentation (linked in the `ui-table` README) for valid commands and their required arguments.","cause":"Incorrect command object structure in `msg.payload`. The command object must have specific `command` and `arguments` properties.","error":"Advanced commands (e.g., `addRow`, `addFilter`) sent to `ui-table` are not working or cause errors."}],"ecosystem":"npm"}