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. Set to "0" for no pagination.
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.

Configuring Columns

Screenshot of the configuration options available for column types in Node-RED

If you toggle "off" the "Auto Columns" option, you will have more control to define the columns for your table. For each column, you can define the following:

• Key: The key in the object to use for the column data.
• Label: The text to display in the column header.
• Width: The width of the column, can be in px, %, or any other valid CSS sizing.
• Align: The alignment of the text in the column. Can be Left, Center, or Right. Note that some columns do look odd with "Center" alignment as the header does also contain space for the sorting icon.
• Type: Defines the cell's type and controls how your data will be rendered for this column.

Cell Types Added In: v1.10.0

An example of a ui-table displaying various of the cell types available

• Text: Renders the cell as plain text.
• HTML: Will respect new line breaks (e.g. \n) and basic HTML tags.
• Link: Renders the cell as a hyperlink. The Link field should contain the URL to link to.
• Color: Renders the cell as a colored box. The Color field should contain a valid CSS color.
• Tick/Cross: Renders the cell as a tick or cross. The Value field should contain a boolean (true/false) value.
• Progress: Renders the cell as a progress bar. The Value field should contain a number between 0 and 100.
• Sparkline - Trend: Renders the cell as a small line chart without axes. The Value field should contain an array of numbers to be plotted.
• Sparkline - Bar: Renders the cell as a small bar chart without axes. The Value field should contain an array of numbers to be plotted.
• Row Number: Renders the row number into the cell.

Example

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

Table Configuration

Search & Filter

The ui-table node can be configured to include a search bar above the table. This will allow users to search and filter across all columns, and automatically search across all columns when you type.

Example

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

Interaction

Example that show how a table will appear with different selection types chosen.

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.

If you want to hide the pagination ("Items per page") options, then you can set "Max Rows" to 0.

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.