Merge pull request #14 from BitTheCat/fix/row-selected-add-no-items

fixed selected Row #12, added noItemText prop #13

Author: BitTheCat

README.md

@@ -1,5 +1,8 @@
 # Tailwind Vue Data Table
 
+![](https://img.shields.io/badge/Vue3-318534?logo=vuedotjs&logoColor=white&style=flat-square)
+![](https://img.shields.io/badge/Tailwind-6899C7?logo=tailwindcss&logoColor=white&style=flat-square)
+
 Simple DataTable with slots, class and style modification for tr and td, sortable by columns (only graphics with click event).
 
 Contains the TVPaginator component that can be disabled via prop or used in stand-alone mode.

dev/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="py-8 px-8">
         <div class="font-semibold mb-2">
-            Tailwind Vue DataTable v0.2.3
+            Tailwind Vue DataTable v0.2.4
             <span class="text-xs font-light">by BitTheCat</span>
         </div>
         <div>

dev/TableShow.vue

@@ -1,13 +1,44 @@
 <template>
     <div>
+        <div class="mb-3">
+            <TVTable
+                ref="tvtTableSimple"
+                :items="[]"
+                :fields="fieldsSimple"
+                :busy="busy"
+                :spinner-class="'text-red-500'"
+                multiple-selection
+                enable-check
+            >
+                <template v-if="customText" #no-items>
+                    Overwrite No Item
+                </template>
+            </TVTable>
+
+
+            <input 
+                class="border mt-2 p-1 rounded bg-gray-300 text-sm" 
+                type="button" 
+                :value="`Test custom message: ${customText ? 'on' : 'off' }`" 
+                @click="customText = !customText" 
+            />
+
+
+            <input 
+                class="border ml-2 mt-2 p-1 rounded bg-gray-300 text-sm" 
+                type="button" 
+                :value="`Test busy: ${busy ? 'on' : 'off' }`" 
+                @click="busy = !busy" 
+            />
+        </div>
+        
         <div class="mb-3">
             <span class="text-xs"> Simple </span> 
 
             <TVTable
                 ref="tvtTableSimple"
                 :items="cloneItems"
                 :fields="fieldsSimple"
-                :busy="busy"
                 :spinner-class="'text-red-500'"
                 multiple-selection
                 enable-check
@@ -28,8 +59,6 @@
                     </tr>
                 </template>
             </TVTable>
-
-            <input class="border mt-2 p-1 rounded bg-gray-300 text-sm" type="button" :value="`Test busy: ${busy ? 'on' : 'off' }`" @click="busy = !busy" />
         </div>
         <hr>
         <div>
@@ -161,6 +190,7 @@ const items = ref([
 ])
 
 const busy = ref(false)
+const customText = ref(false)
 
 const currentPage = ref(1)