Merge pull request #1 from BitTheCat/busy-state

Added busy-state for TVTable (0.1.6)

Author: BitTheCat

README.md

@@ -33,10 +33,26 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 - Select row column (with checkbox) ✔️
 
 <img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_checkbox.jpg"/>
+
 - Row detail ✔️
+
+<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_row_details.jpg"/>
 
 - Row Clicked event ✔️
+
+- Busy state ✔️
+<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_busy_state.jpg"/>
 
+- Additional rows up the header
+
+- Select rows
+
+- Provide item from api url
+
+- Footer
+
+- Refresh table
+
 - ...
 
 <hr>
@@ -52,6 +68,7 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 | hidePagination | false | enables for hide paginator |
 | multipleSortable | false | enables multiple sortable for table header |
 | enableCheck | false | enables checkbox for table row |
+| busy | false | enables spinner for loading data |
 
 ### Slots
 
@@ -107,4 +124,8 @@ data retrieves the field value
 | tdStyle | used for overwrite the td style |
 | thClass | used for overwrite the th class |
 | tdClass | used for overwrite the td class |
-| _showDetails | used for show row details (default false) |
+| _showDetails | used for show row details (default false) |
+
+<hr>
+
+This project is licensed under the MIT license. See [LICENSE](LICENSE).

assets/tvtable_busy_state.png

@@ -7,9 +7,12 @@
                 :items="cloneItems"
                 :fields="fieldsSimple"
                 enable-check
+                :busy="busy"
                 @check-row="checkRow"
                 @row-clicked="checkRow"
             />
+
+            <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>
@@ -29,12 +32,15 @@
             >
                 <template #cell:username="row">
                     {{ row.item.emoji }} - {{ row.item.username }}
-                    <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
                 </template>
 
                 <template #row-details>
                     ROW-DETAILS ROW-DETAILS ROW-DETAILS
                 </template>
+
+                <template #cell:details="row">
+                    <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
+                </template>
             </TVTable>
             Selected: 
             <pre>
@@ -72,6 +78,12 @@ const fields = ref([
         key: 'email',
         tdClass: 'bg-indigo-300'
     },
+    {
+        label: 'details',
+        key: '',
+        thStyle: 'width: 30px',
+        tdClass: 'flex text-center',
+    },
 ])
 
 const fieldsSimple = ref([
@@ -113,6 +125,8 @@ const items = ref([
     },
 ])
 
+const busy = ref(false)
+
 const currentPage = ref(1)
 
 const perPage = ref(2)

assets/tvtable_row_details.png

@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "keywords": [
         "tailwindcss",
         "vue",

dev/TableShow.vue

@@ -52,8 +52,21 @@
             </tr>
         </thead>
         <tbody class="px-2 py-1.5 text-left text-xs font-medium border">
-            <template v-for="(item, index) in items" :key="item.label">
-                <tr  
+            <tr v-if="busy">
+                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                        <div class="flex justify-center mb-3 mt-3">
+                            <slot name="busy">
+                                <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                            </slot>
+                        </div>
+                    </td>
+                </tr>
+            <template v-for="(item, index) in items" v-else :key="item.label">
+                <tr 
+                    :id="`TV_TABLE_row_${item.label}`"  
                     class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left text-xs font-medium border hover:bg-gray-400/50"
                     :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
                     @click="rowClicked(item)"
@@ -135,6 +148,7 @@ const props = defineProps({
     hidePagination: Boolean,
     multipleSortable: Boolean,
     enableCheck: Boolean,
+    busy: Boolean,
 })
 
 const emit = defineEmits([