images in ui-table

docs/nodes/widgets/ui-table.md

@@ -139,6 +139,7 @@ _An example of a ui-table displaying various of the cell types available_
 - **Sparkline - Bar**: Renders the cell as a small bar chart without axes. The `Value` field should contain an array of numbers to be plotted.
 - **Button**: Renders a clickable button in the cell. The label of the button will be either the `row[key]` or the fixed string entered on the manual column configuration.
 - **Row Number**: Renders the row number into the cell.
+- **Image**: Renders the cell as an image. The "Image" value provided should be a valid URL.  A data url is also supported for base64 encoded images. When an invalid url is specified, an empty space will appear.
 
 #### Interaction: Buttons
 
@@ -200,4 +201,4 @@ If you want to hide the pagination ("Items per page") options, then you can set
 
 ## 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](../../user/template-examples.md#custom-tables) for more details.
+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](../../user/template-examples.md#custom-tables) for more details.

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

@@ -65,5 +65,11 @@ <h3>Cell Types</h3>
         <dd>Renders an interactive button in the cell. Will emit a <code>msg.action</code> of "button_click" and <code>msg.column</code> of the corresponding key</dd>
         <dt>Row Number <span class="property-type">number</span></dt>
         <dd>Requires no "key" to be provided as this will just render the row number (1 -> n).</dd>
+        <dt>Image <span class="property-type">url</span></dt>
+        <dd>
+            Renders the cell as an image. The "Image" value provided should be a valid URL.
+            A data url is also supported for base64 encoded images.
+            When an invalid url is specified, an empty space will appear.
+        </dd>
     </dl>
-</script>
+</script>

nodes/widgets/ui_table.html

@@ -56,7 +56,8 @@
             { value: 'sparkline-trend', label: 'Sparkline - Trend (Array)' },
             { value: 'sparkline-bar', label: 'Sparkline - Bar (Array)' },
             { value: 'button', label: 'Button' },
-            { value: 'row', label: 'Row Number' }
+            { value: 'row', label: 'Row Number' },
+            { value: 'image', label: 'Image (https://...)' }
         ]
         RED.nodes.registerType('ui-table', {
             category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),

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

@@ -29,6 +29,9 @@
     <template v-else-if="type === 'button'">
         <v-btn color="primary" variant="flat" @click="onButtonClick($event, item)">{{ value }}</v-btn>
     </template>
+    <template v-else-if="type === 'image'">
+        <v-img :src="value" />
+    </template>
     <template v-else>
         {{ value }}
     </template>