New feature - VueUiTable - Add optional title #255

Author: graphieros

TestingArena/ArenaVueUiTable.vue

@@ -241,6 +241,22 @@ onMounted(() => {
 
 const config = ref({
   style: {
+    title: {
+      text: 'Some title that can be long',
+      color: '#FF0000',
+      fontSize: 18,
+      bold: false,
+      textAlign: 'left',
+      paddingLeft: 12,
+      paddingRight: 0,
+      backgroundColor: '#00FF00',
+      subtitle: {
+        text: 'Some subtitle',
+        fontSize: 12,
+        color: '#0000FF',
+        bold: true,
+      }
+    },
     exportMenu: {
       show: true,
     }

src/components/vue-ui-table.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="vue-ui-table-main" :style="`font-family: ${FINAL_CONFIG.fontFamily}`">
-        <div class="vue-ui-table-export-hub" v-if="FINAL_CONFIG.style.exportMenu.show">
+        <div class="vue-ui-table-export-hub" 
+            :style="{ top: exportButtonTop + 'px' }" v-if="FINAL_CONFIG.style.exportMenu.show">
             <button @click="isExportRequest = !isExportRequest" v-html="icons.export"
                 :style="`background:${FINAL_CONFIG.style.exportMenu.backgroundColor};color:${FINAL_CONFIG.style.exportMenu.color}`" />
             <div class="vue-ui-table-export-hub-dropdown" :data-is-open="isExportRequest || 'false'"
@@ -48,10 +49,45 @@
         </div>
         <div class="vue-ui-table__wrapper" :style="`max-height:${FINAL_CONFIG.maxHeight}px`" ref="tableWrapper">
             <table class="vue-ui-table">
+                <caption
+                    class="vue-ui-table__caption"
+                    ref="tableCaption" 
+                    v-if="FINAL_CONFIG.style.title.text"
+                    :style="{
+                        textAlign: FINAL_CONFIG.style.title.textAlign,
+                        paddingLeft: FINAL_CONFIG.style.title.paddingLeft + 'px',
+                        paddingRight: FINAL_CONFIG.style.title.paddingRight + 'px',
+                        backgroundColor: FINAL_CONFIG.style.title.backgroundColor,
+                        boxShadow: `${FINAL_CONFIG.style.title.backgroundColor} -1px 0px 0px 0px`
+                    }"
+                >
+                    <span
+                        :style="{
+                            fontSize: FINAL_CONFIG.style.title.fontSize + 'px',
+                            fontWeight: FINAL_CONFIG.style.title.bold ? 'bold' : 'normal',
+                            color: FINAL_CONFIG.style.title.color
+                        }"
+                    >
+                        {{ FINAL_CONFIG.style.title.text }}
+                    </span>
+                    <template v-if="FINAL_CONFIG.style.title.subtitle.text">
+                        <br>
+                        <span
+                            :style="{
+                                fontSize: FINAL_CONFIG.style.title.subtitle.fontSize,
+                                fontWeight: FINAL_CONFIG.style.title.subtitle.bold ? 'bold' : 'normal',
+                                color: FINAL_CONFIG.style.title.subtitle.color
+                            }"
+                        >
+                            {{ FINAL_CONFIG.style.title.subtitle.text }}
+                        </span>
+                    </template>
+                </caption>
                 <!-- TABLE HEAD -->
                 <thead id="tableHead" class="vue-ui-table__head" :style="{
                     background: FINAL_CONFIG.style.th.backgroundColor,
-                    boxShadow: `-1px 0 0 ${FINAL_CONFIG.style.th.backgroundColor}`
+                    boxShadow: `-1px 0 0 ${FINAL_CONFIG.style.th.backgroundColor}`,
+                    top: exportButtonTop - 3 + 'px'
                 }">
                     <!-- HEADERS -->
                     <tr>
@@ -573,6 +609,7 @@ import { useConfig } from "../useConfig";
 import VueUiXy from "./vue-ui-xy.vue";
 import VueUiDonut from "./vue-ui-donut.vue";
 import BaseIcon from "../atoms/BaseIcon.vue";
+import { computed, ref } from "vue";
 
 export default {
     name: "vue-ui-table",
@@ -691,6 +728,19 @@ export default {
             filename: '',
         }
     },
+    setup() {
+        const tableCaption = ref(null);
+
+        const exportButtonTop = computed(() => {
+            if (!tableCaption.value) return 3;
+            return tableCaption.value.getBoundingClientRect().height + 3;
+        });
+
+        return {
+            tableCaption,
+            exportButtonTop
+        }
+    },
     mounted() {
         if (this.dataset.header.length === 0) {
             throw new Error("vue-ui-table error: missing header data.\nProvide an array of objects of type:\n{\n name: string;\n type: string; ('text' | 'numeric' | 'date')\n average: boolean;\n decimals: number | undefined;\n sum: boolean;\n isSort:boolean;\n isSearch: boolean;\n isMultiselect: boolean;\n isPercentage: boolean;\n percentageTo: string; (or '')\n}");
@@ -1866,6 +1916,13 @@ export default {
     top: 0;
 }
 
+.vue-ui-table-main caption {
+    caption-side: top;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
 .vue-ui-table {
     width: 100%;
     position: relative;
@@ -2396,7 +2453,6 @@ button.th-reset:not(:disabled) {
 .vue-ui-table-main .vue-ui-table-export-hub {
     left: 20px;
     position: absolute;
-    top: 3px;
     z-index: 1001;
 }
 

src/useConfig.js

@@ -5284,6 +5284,10 @@ export function useConfig() {
         maxHeight: 500,
         rowsPerPage: 25,
         style: {
+            title: {
+                ...TITLE,
+                backgroundColor: COLOR_WHITE,
+            },
             th: {
                 backgroundColor: COLOR_GREY_LIGHT,
                 color: COLOR_BLACK,

types/vue-data-ui.d.ts

@@ -5566,6 +5566,7 @@ declare module "vue-data-ui" {
         maxHeight?: number;
         rowsPerPage?: number;
         style?: {
+            title?: ChartTitle & { backgroundColor?: string };
             th?: ChartTableCell & {
                 selected?: {
                     backgroundColor?: string;