From d65ea8351c6061c45ac8fd8c00ef943e86f15b28 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Thu, 24 Oct 2024 07:05:52 +0100
Subject: [PATCH] images in ui-table

---
 docs/nodes/widgets/ui-table.md            | 3 ++-
 nodes/widgets/locales/en-US/ui_table.html | 8 +++++++-
 nodes/widgets/ui_table.html               | 3 ++-
 ui/src/widgets/ui-table/UITableCell.vue   | 3 +++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index 1c96e4bf2..af4f900cb 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/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.
\ No newline at end of file
+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.
diff --git a/nodes/widgets/locales/en-US/ui_table.html b/nodes/widgets/locales/en-US/ui_table.html
index 82a056af4..07c2790be 100644
--- a/nodes/widgets/locales/en-US/ui_table.html
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
index 2bc40eab0..0fe4e3776 100644
--- a/nodes/widgets/ui_table.html
+++ b/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'),
diff --git a/ui/src/widgets/ui-table/UITableCell.vue b/ui/src/widgets/ui-table/UITableCell.vue
index b96ce799d..74e3932b7 100644
--- a/ui/src/widgets/ui-table/UITableCell.vue
+++ b/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>