Merge pull request #1446 from cgjgh/UI-Table-Title

Add ui-table Title
FlowFuse · Nov 11, 2024 · 767baa6 · 767baa6
2 parents cc4be98 + 203ce43
commit 767baa6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
@@ -3,7 +3,7 @@ description: Display and manage complex datasets with ease using the ui-table wi
 props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
-    Label: The text shown within the button.
+    Label: The text shown above the table, labelling what the table is showing.
     Max Rows: Defines the maximum number of data-rows to render in the table. Excess rows will be available through pagination control. Set to "0" for no pagination.
     Breakpoint: Controls when a table will render, instead, as a card, with each column from a row rendering as a row in a larger, contain a row, for a single entry.The breakpoint is measured based on the <b>width of the table</b>, not the width of the screen.
     Selection: Provides three options for table interaction - "None", "Click" and "Checkbox"

diff --git a/nodes/widgets/locales/en-US/ui_table.json b/nodes/widgets/locales/en-US/ui_table.json
@@ -9,6 +9,7 @@
             "key": "key:",
             "value": "Value",
             "label": "Label",
+            "optionalTableTitle": "optional label",
             "type": "Type",
             "width": "Width",
             "align": "Align",

diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
@@ -65,7 +65,7 @@
             defaults: {
                 group: { type: 'ui-group', required: true },
                 name: { value: '' },
-                label: { value: 'text' },
+                label: { value: '' },
                 order: { value: 0 },
                 width: {
                     value: 0,
@@ -97,7 +97,7 @@
             icon: 'font-awesome/fa-table',
             paletteLabel: 'table',
             label: function () {
-                return this.name || 'table'
+                return this.name || this.label || 'table'
             },
             oneditprepare: function () {
                 // handle backward compatibility
@@ -332,6 +332,10 @@
         <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-table.label.height">Height</label>
         <input type="hidden" id="node-input-height">
     </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-table.label.label"></span></label>
+        <input type="text" id="node-input-label" data-i18n="[placeholder]ui-table.label.optionalTableTitle">
+    </div>
     <div class="form-row">
         <label for="node-input-maxrows"><i class="fa fa-tag"></i> <span data-i18n="ui-table.label.maxRows"></label>
         <input type="number" id="node-input-maxrows">

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
@@ -1,4 +1,5 @@
 <template>
+    <label v-if="props.label" ref="title" class="nrdb-ui-table-title">{{ props.label }}</label>
     <v-text-field
         v-if="props.showSearch"
         v-model="search"
@@ -155,6 +156,9 @@ export default {
         this.updateIsMobile()
         window.addEventListener('resize', this.updateIsMobile)
     },
+    unmounted () {
+        window.removeEventListener('resize', this.updateIsMobile)
+    },
     methods: {
         formatPayload (value) {
             if (value !== null && typeof value !== 'undefined') {
@@ -254,9 +258,6 @@ export default {
             }
             return true
         }
-    },
-    unounted () {
-        window.removeEventListener('resize', this.updateIsMobile)
     }
 }
 </script>
@@ -325,4 +326,11 @@ export default {
     --mobile-border-opacity: calc(var(--v-border-opacity) * 0.5);
     border-bottom: thin solid rgba(var(--v-border-color), var(--mobile-border-opacity)) !important;
 }
+.nrdb-ui-table-title {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1rem;
+    padding-bottom: 4px;
+}
 </style>