Data Table ui-table Added In: v0.4.0

Renders a set of data in a tabular format. Expects an input (msg.payload) in the format of:

[{
    "colA": "A",
    "colB": "Hello",
    "colC": 3
}, {
    "colA": "B",
    "colB": "World",
    "colC": 5
}]

The table will be rendered with colums colA, colB and colC, unless "Columns" are explicitely defined on the node, with "Auto Columns" toggled off.

Properties

Prop	Dynamic	Description
Group		Defines which group of the UI Dashboard this widget will render in.
Size		Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
Label		The text shown within the button.
Max Rows		Defines the maximum number of data-rows to render in the table. Excess rows will be available through pagination control.
Selection		Provides three options for table interaction - "None", "Click" and "Checkbox"
Show Search		Defines whether or not to show a search bar above the table. Will permit searching and filtering across all columns.
Auto Columns		If checked, then the columns are calculated automatically based on the contents of received messages.
Columns		If "Auto Columns" is false, then these columns are used when rendering the table instead.

Selection

• None: No selection is allowed. The table will just display the data.
• Click: The full row becomes a clickable entity, and the ui-table node will output the full object associated to a row when clicked.
• Checkbox: Each row has a checkbox, and the ui-table node will output an array of objects associated to the checked rows when a checkbox is selected.

Dynamic Properties

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures
Class	msg.class	String

Examples

Search & Filter

Example of a Data Table with Search & Filter" enabled.

Interaction

Default - No Selection Events

Example of a rendered data table in a Dashboard.

Multi-Selection

Example of a table that has "Multi Selection" enabled.

Single Row Selection

Example of a data table that enables a row to be selected/clicked.

Pagination

Example of a paginated table which has 10 rows of data, but with "Max Rows" set to 5.

Custom Styling & Content

If you're looking to add more customisation to how your data is rendered, you can do so by building your own data table inside a ui-template. Check out this example for more details.