Added Row Details

Author: BitTheCat

README.md

@@ -33,8 +33,10 @@ 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
+- Row detail ✔️
+  
 - Row Clicked event
+  
 - ...
 <hr>
 
@@ -98,4 +100,5 @@ data retrieves the field value
 | thStyle | used for overwrite the th style |
 | tdStyle | used for overwrite the td style |
 | thClass | used for overwrite the th class |
-| tdClass | used for overwrite the td class |
+| tdClass | used for overwrite the td class |
+| _showDetails | used for show row details (default false) |

dev/TableShow.vue

@@ -3,14 +3,18 @@
         <div class="mb-3">
             <span class="text-xs "> Simple </span> 
             <TVTable
-                :items="items"
+                ref="tvtTableSimple"
+                :items="cloneItems"
                 :fields="fieldsSimple"
+                enable-check
+                @check-row="checkRow"
             />
         </div>
         <hr>
         <div>
             <span class="text-xs">With Props</span>
             <TVTable
+                ref="tvtTableProps"
                 v-model:currentPage="currentPage"
                 :items="filterItems"
                 :fields="fields"
@@ -21,8 +25,13 @@
                 @change-page="changePage"
                 @check-row="checkRow"
             >
-                <template #cell:username="{ item }">
-                    {{ item.emoji }} - {{ item.username }}
+                <template #cell:username="row">
+                    {{ row.item.emoji }} - {{ row.item.username }}
+                    <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @change="row.toggleDetails(row.item)" />
+                </template>
+
+                <template #row-details>
+                    ROW-DETAILS ROW-DETAILS ROW-DETAILS
                 </template>
             </TVTable>
             Selected: 
@@ -54,7 +63,7 @@ const fields = ref([
         thStyle: 'background: lightblue',
         thClass: 'text-white',
         tdClass: 'text-center',
-        sortable: true
+        sortable: true,
     },
     {
         label: 'email',
@@ -86,7 +95,8 @@ const items = ref([
         id: '1',
         username: 'cat',
         email: '[email protected]',
-        emoji: '🐈'
+        emoji: '🐈',
+        _showDetails: true
     },
     {
         id: '2',
@@ -108,13 +118,15 @@ const perPage = ref(2)
 
 const filterItems = ref(items.value.slice(0, 1 * perPage.value))
 
+const cloneItems = JSON.parse(JSON.stringify(items.value))
+
 const changePage = (values) => {
     filterItems.value = items.value.slice(values.from, values.to)
 }
 
 const selectRow = ref([])
+
 const checkRow = (value) => {
-    console.log(selectRow.value.includes(value))
     if (selectRow.value.includes(value)) {
         let index = selectRow.value.indexOf(value)
         selectRow.value.splice(index, 1)

package.json

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

src/components/TVTable.vue

@@ -52,31 +52,41 @@
             </tr>
         </thead>
         <tbody class="px-2 py-1.5 text-left text-xs font-medium border">
-            <tr 
-                v-for="(item) in items" 
-                :key="item.label" 
-                class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left text-xs font-medium border odd:bg-gray-300/50 even:bg-gray-100/50 hover:bg-gray-400/50"
-            >
-                <td
-                    v-if="enableCheck"
-                    :key="`check_${item.label}`"
-                    class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
+            <template v-for="(item) in items" :key="item.label">
+                <tr  
+                    class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left text-xs font-medium border odd:bg-gray-300/50 even:bg-gray-100/50 hover:bg-gray-400/50"
                 >
-                    <input id="checkbox" v-model="selectedRow" :value="item" type="checkbox" @change="emit('checkRow', item)" />
-                </td>
+                    <td
+                        v-if="enableCheck"
+                        :key="`check_${item.label}`"
+                        class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
+                    >
+                        <input id="checkbox" v-model="selectedRow" :value="item" type="checkbox" @change="emit('checkRow', item)" />
+                    </td>
 
-                <td
-                    v-for="field in fields"
-                    :key="field.key"
-                    class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
-                    :class="field.tdClass"
-                    :style="field.tdStyle"
-                >
-                    <slot :item="item" :data="getField(item, field.key)" :name="`cell:${field.label}`">
-                        {{ getField(item, field.key) }}
-                    </slot>
-                </td>
-            </tr>
+                    <td
+                        v-for="field in fields"
+                        :key="field.key"
+                        class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
+                        :class="field.tdClass"
+                        :style="field.tdStyle"
+                    >
+                        <slot 
+                            :name="`cell:${field.label}`"
+                            :item="item" 
+                            :data="getField(item, field.key)"
+                            :toggle-details="toggleDetails"
+                        >
+                            {{ getField(item, field.key, '') }}
+                        </slot>
+                    </td>
+                </tr>
+                <tr v-if="item._showDetails">
+                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                        <slot name="row-details" :item="item" />  
+                    </td>
+                </tr>
+            </template>
         </tbody>
     </table>
 
@@ -89,7 +99,7 @@
 </template>
 
 <script setup>
-import {defineComponent, ref, watch} from 'vue';
+import {computed, defineComponent, ref, watch} from 'vue';
 import TVPagination from './TVPagination.vue';
 
 defineComponent({
@@ -124,13 +134,21 @@ const props = defineProps({
 
 const emit = defineEmits(['updateSortable', 'changePage', 'checkRow'])
 
-const localTotalRows = ref(props.totalRows || props.items.length || 0)
+
+const localTotalRows = computed(() => {
+    return props.totalRows || props.items.length || 0
+})
+
 const fromRow = ref(0)
 const toRow = ref(0)
 const localCurrentPage = ref(props.currentPage)
 
-const getField = (item, field) => {
-    return item[field]
+const getField = (item, field, def) => {
+    return item[field] || def
+}
+
+const toggleDetails = (value) => {
+    return value._showDetails = !value._showDetails
 }
 
 const sortable = ref({})