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 @@

Cell Types

Renders an interactive button in the cell. Will emit a msg.action of "button_click" and msg.column of the corresponding key
Row Number number
Requires no "key" to be provided as this will just render the row number (1 -> n).
+
Image url
+
+ 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. +
- \ No newline at end of file + 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 @@ +