Skip to main content

table

Display tabular data with sorting, filtering, and pagination.

Overview

The table node displays data in a tabular format with advanced features. Supports sorting, filtering, pagination, row selection, and auto-updating. Perfect for displaying sensor logs, device lists, and structured data.

Sort
Columns
Filter
Search
Pages
Navigation
Select
Rows

Properties

Property Type Default Description
group string - Dashboard group
columns array auto Column definitions
pageSize number 10 Rows per page
selectable boolean false Enable row selection
autocols boolean true Auto-detect columns from data

Input Format

// Array of objects
msg.payload = [
  { id: 1, device: "Sensor-01", temperature: 24.5, status: "active" },
  { id: 2, device: "Sensor-02", temperature: 22.1, status: "active" },
  { id: 3, device: "Sensor-03", temperature: 28.7, status: "warning" },
  { id: 4, device: "Sensor-04", temperature: 19.3, status: "inactive" }
];

// Table auto-creates columns: id, device, temperature, status

Custom Column Configuration

// Table node configuration
{
  "autocols": false,
  "columns": [
    {
      "field": "device",
      "title": "Device Name",
      "width": "200px"
    },
    {
      "field": "temperature",
      "title": "Temp (°C)",
      "align": "right",
      "format": "{{value | number:1}}"
    },
    {
      "field": "status",
      "title": "Status",
      "align": "center"
    },
    {
      "field": "timestamp",
      "title": "Last Update",
      "format": "{{value | date:'HH:mm:ss'}}"
    }
  ]
}

Row Selection

// Table with selectable: true

// User clicks row, output:
{
  "payload": {
    "id": 2,
    "device": "Sensor-02",
    "temperature": 22.1,
    "status": "active"
  }
}

// Use selected row for actions:
// → View details
// → Delete device
// → Edit configuration

Append & Update Rows

Append Row

// Add single row to end
msg.payload = {
  id: 5,
  device: "New Sensor",
  temperature: 25.0
};
// Table appends row

Replace All

// Replace entire table
msg.payload = [
  { id: 1, ... },
  { id: 2, ... }
];
// Table replaces all rows

Related Nodes