Node-RED UI Table Widget

0.4.5 · active · verified Sun Apr 19

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.

Common errors

```
Table is empty or not displaying any data in the Node-RED Dashboard.
```
cause Incorrect `msg.payload` format. The node expects an array of objects, where each object represents a row and its keys define column names.

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.
```
Node-RED reports 'Error: Cannot find module 'node-red-node-ui-table'' or the UI Table node is missing from the palette.
```
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.

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.
```
Advanced commands (e.g., `addRow`, `addFilter`) sent to `ui-table` are not working or cause errors.
```
cause Incorrect command object structure in `msg.payload`. The command object must have specific `command` and `arguments` properties.

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.

Warnings

gotcha 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.
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`.
breaking 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.
Fix: Upgrade your Node.js runtime environment to version 16 or higher. Tools like `nvm` (Node Version Manager) can facilitate this upgrade process.
gotcha 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.
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.

Install

npm install node-red-node-ui-table npm
yarn add node-red-node-ui-table yarn
pnpm add node-red-node-ui-table pnpm

Imports

Node-RED Palette Integration
wrong:
```
import { UITable } from 'node-red-node-ui-table'
```
correct:
```
npm i node-red-node-ui-table
```
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.
Data Input (msg.payload)
wrong:
```
msg.payload = 'some string' or msg.payload = { 'key': 'value' } (for simple table)
```
correct:
```
msg.payload = [{ 'col1': 'value1' }, { 'col2': 'value2' }];
```
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.
Tabulator Commands (msg.payload.command)
wrong:
```
msg.payload = { 'command-name': [...] } or direct Tabulator function calls
```
correct:
```
msg.payload = { command: 'addData', arguments: [{ rowData: '...' }], returnPromise: true };
```
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.

Quickstart

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.

{
  "id": "a1b2c3d4.e5f6g7h8",
  "type": "tab",
  "label": "UI Table Quickstart",
  "disabled": false,
  "info": "",
  "nodes": [
    {
      "id": "1a2b3c4d.5e6f7a8b",
      "type": "inject",
      "z": "a1b2c3d4.e5f6g7h8",
      "name": "Send Simple Data",
      "props": [
        { "p": "payload" },
        { "p": "topic", "vt": "str" }
      ],
      "repeat": "",
      "crontab": "",
      "once": true,
      "onceDelay": 0.1,
      "topic": "",
      "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\" } ]",
      "payloadType": "json",
      "x": 180,
      "y": 100,
      "wires": [
        ["f9e8d7c6.b5a4a3a2"]
      ]
    },
    {
      "id": "f9e8d7c6.b5a4a3a2",
      "type": "ui_table",
      "z": "a1b2c3d4.e5f6g7h8",
      "name": "My Simple Table",
      "group": "group_1",
      "order": 1,
      "width": "0",
      "height": "0",
      "columns": [],
      "outputs": 0,
      "cts": false,
      "x": 450,
      "y": 100,
      "wires": []
    },
    {
      "id": "7a6b5c4d.3e2f1a0b",
      "type": "inject",
      "z": "a1b2c3d4.e5f6g7h8",
      "name": "Send Command: Add Row",
      "props": [
        { "p": "payload" },
        { "p": "topic", "vt": "str" }
      ],
      "repeat": "",
      "crontab": "",
      "once": false,
      "onceDelay": 0.1,
      "topic": "",
      "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}",
      "payloadType": "json",
      "x": 210,
      "y": 160,
      "wires": [
        ["f9e8d7c6.b5a4a3a2"]
      ]
    },
    {
      "id": "group_1",
      "type": "ui_group",
      "name": "Default",
      "tab": "tab_1",
      "order": 1,
      "disp": true,
      "width": "6",
      "collapse": false,
      "className": ""
    },
    {
      "id": "tab_1",
      "type": "ui_tab",
      "name": "Home",
      "icon": "dashboard",
      "order": 1,
      "disabled": false,
      "hidden": false
    }
  ]
}

view raw JSON →