Table supports single object along with array of objects

docs/nodes/widgets/ui-table.md

@@ -53,6 +53,18 @@ Renders a set of data in a tabular format. Expects an input (`msg.payload`) in t
 
 The table will be rendered with colums `colA`, `colB` and `colC`, unless "Columns" are explicitely defined on the node, with "Auto Columns" toggled off.
 
+or render just one row by simply passing an object. Expects an input (`msg.payload`) in the format of:
+
+```json
+{
+    "colA": "A",
+    "colB": "Hello",
+    "colC": 3
+}
+```
+
+The table will render same but only one row.
+
 ## Properties
 
 <PropsTable/>

nodes/widgets/locales/en-US/ui_table.html

@@ -4,9 +4,9 @@
     </p>
     <h3>Input</h3>
     <p>
-        The ui-table widget requires an array of data to be sent via <code>msg.payload</code>.
-        The table will then render a row for each object within the array, and, by default, a
-        column for each property in the objects.
+        The ui-table widget requires an array or an object of data to be sent via <code>msg.payload</code>.
+        If an array is provided, the table will render a row for each object within the array, and, by default, a column for each property in the objects.
+        If an object is provided, the table will render a single row with columns for each property in the object.
     </p>
     <h3>Properties</h3>
     <dl class="message-properties">

ui/src/widgets/ui-table/UITable.vue

@@ -14,7 +14,7 @@
         class="nrdb-table"
         :mobile="isMobile"
         :class="{'nrdb-table--mobile': isMobile}"
-        :items="messages[id]?.payload" :return-object="true"
+        :items="payload || []" :return-object="true"
         :items-per-page="itemsPerPage"
         :headers="headers" :show-select="props.selectionType === 'checkbox'"
         :search="search"
@@ -76,23 +76,22 @@ export default {
         ...mapState('data', ['messages']),
         headers () {
             if (this.props.autocols) {
-                if (this.messages[this.id]?.payload) {
+                if (this.payload) {
                     // loop over data and get keys
-                    const cols = []
-                    for (const row of this.messages[this.id].payload) {
+                    let cols = []
+                    for (const row of this.payload) {
                         Object.keys(row).forEach((key) => {
                             if (!cols.includes(key)) {
                                 cols.push(key)
                             }
                         })
                     }
-                    return cols.map((col) => {
+                    cols = cols.map((col) => {
                         return { key: col, title: col }
                     })
+                    return cols
                 } else {
-                    return [{
-                        key: '', title: ''
-                    }]
+                    return []
                 }
             } else if (this.props.columns) {
                 return this.props.columns.map((col) => {
@@ -113,8 +112,8 @@ export default {
         },
         rows () {
             // store full set of data rows
-            if (this.messages[this.id]?.payload) {
-                return this.messages[this.id].payload
+            if (this.payload) {
+                return this.payload
             } else {
                 return undefined
             }
@@ -127,6 +126,17 @@ export default {
                 typeMap[col.key] = col.type
                 return typeMap
             }, {})
+        },
+        payload () {
+            const value = this.messages[this.id]?.payload
+            if (value !== null && typeof value !== 'undefined') {
+                if (typeof value === 'object' && !Array.isArray(value)) {
+                    return [value]
+                } else {
+                    return value
+                }
+            }
+            return value
         }
     },
     watch: {