Added rowClicked (event), graphic fixes

Author: BitTheCat

README.md

@@ -85,7 +85,12 @@ data retrieves the field value
 | --- | --- |
 | updateSortable | emit the sortable field/fields |
 | changePage | emit the page change |
-| checkRow | emit the row item |
+| checkRow | emit the row item when user click on row checkbox |
+| rowClicked | emit the row item when user click on row |
+
+##### Notes
+
+##### Any __@click__ event of elements within the row triggers the rowClicked event, to get around this we need to __use @click.stop to prevent the propagation of the event__
 
 <hr>
 
@@ -94,7 +99,7 @@ data retrieves the field value
 
 | Props | Description |
 | --- | --- |
-| key | Th Title |
+| key | th Title |
 | label | index of value |
 | sortable | the default setting is false, if set to true a symbol appears for sorting |
 | thStyle | used for overwrite the th style |

dev/App.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="pb-36">
-
     <div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
-      <div class="flex flex-col items-center flex-grow">
+      <div class="flex flex-col flex-grow">
         <div class="font-semibold mb-2">
             Tailwind Vue DataTable
             <span class="text-xs font-light">by BitTheCat</span>
@@ -18,6 +17,6 @@
 <script>
 import { defineComponent } from 'vue';
 export default defineComponent({
-  name: 'App',
+    name: 'App',
 });
 </script>

dev/TableShow.vue

@@ -1,13 +1,14 @@
 <template>
     <div>
         <div class="mb-3">
-            <span class="text-xs "> Simple </span> 
+            <span class="text-xs"> Simple </span> 
             <TVTable
                 ref="tvtTableSimple"
                 :items="cloneItems"
                 :fields="fieldsSimple"
                 enable-check
                 @check-row="checkRow"
+                @row-clicked="checkRow"
             />
         </div>
         <hr>
@@ -24,10 +25,11 @@
                 enable-check
                 @change-page="changePage"
                 @check-row="checkRow"
+                @row-clicked="checkRow"
             >
                 <template #cell:username="row">
                     {{ row.item.emoji }} - {{ row.item.username }}
-                    <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @change="row.toggleDetails(row.item)" />
+                    <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
                 </template>
 
                 <template #row-details>
@@ -96,7 +98,6 @@ const items = ref([
         username: 'cat',
         email: '[email protected]',
         emoji: '🐈',
-        _showDetails: true
     },
     {
         id: '2',

package.json

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

src/components/TVTable.vue

@@ -52,16 +52,18 @@
             </tr>
         </thead>
         <tbody class="px-2 py-1.5 text-left text-xs font-medium border">
-            <template v-for="(item) in items" :key="item.label">
+            <template v-for="(item, index) 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"
+                    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)"
                 >
                     <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)" />
+                        <input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
                     </td>
 
                     <td
@@ -81,10 +83,13 @@
                         </slot>
                     </td>
                 </tr>
-                <tr v-if="item._showDetails">
-                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
-                        <slot name="row-details" :item="item" />  
-                    </td>
+                <tr 
+                    v-if="item._showDetails" 
+                    :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
+                    >
+                        <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                            <slot name="row-details" :item="item" />
+                        </td>
                 </tr>
             </template>
         </tbody>
@@ -132,7 +137,12 @@ const props = defineProps({
     enableCheck: Boolean,
 })
 
-const emit = defineEmits(['updateSortable', 'changePage', 'checkRow'])
+const emit = defineEmits([
+    'updateSortable', 
+    'changePage', 
+    'checkRow', 
+    'rowClicked'
+])
 
 
 const localTotalRows = computed(() => {
@@ -152,7 +162,17 @@ const toggleDetails = (value) => {
 }
 
 const sortable = ref({})
-const selectedRow = ref([])
+const selectedRows = ref([])
+
+const rowClicked = (item) => {
+    if (selectedRows.value.includes(item)) {
+        let index = selectedRows.value.indexOf(item)
+        selectedRows.value.splice(index, 1)
+    } else {
+        selectedRows.value.push(item)
+    }
+    emit('rowClicked', item)
+} 
 
 const updateSortable = (key, sort) => {
     props.multipleSortable