Added checked column (optional via prop)

Author: BitTheCat

.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
         ],
         "vue/html-indent": 0,
         "vue/max-attributes-per-line": 0,
+        "vue/html-self-closing": 0,
     }
 } 

README.md

@@ -30,8 +30,11 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 
 <img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvpagination.jpg"/>
 
-- Select row column (with checkbox)
+- Select row column (with checkbox) ✔️
+
+<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_checkbox.jpg"/>
 - Row detail
+- Row Clicked event
 - ...
 <hr>
 
@@ -45,6 +48,7 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 | perPage | 15 | number of rows displayed for page (used by the paginator) |
 | hidePagination | false | enables for hide paginator |
 | multipleSortable | false | enables multiple sortable for table header |
+| enableCheck | false | enables checkbox for table row |
 
 ### Slots
 
@@ -79,6 +83,7 @@ data retrieves the field value
 | --- | --- |
 | updateSortable | emit the sortable field/fields |
 | changePage | emit the page change |
+| checkRow | emit the row item |
 
 <hr>
 

assets/tvtable_checkbox.jpg

@@ -17,12 +17,18 @@
                 multiple-sortable
                 :total-rows="items.length"
                 :per-page="perPage"
+                enable-check
                 @change-page="changePage"
+                @check-row="checkRow"
             >
                 <template #cell:username="{ item }">
                     {{ item.emoji }} - {{ item.username }}
                 </template>
             </TVTable>
+            Selected: 
+            <pre>
+                {{ selectRow }}
+            </pre>
         </div>
     </div>
 </template>
@@ -106,4 +112,15 @@ 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)
+    } else {
+        selectRow.value.push(value)
+    }
+}
+
 </script>

dev/TableShow.vue

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

package.json

@@ -6,6 +6,12 @@
     <table class="min-w-full">
         <thead class="bg-gray-300 border">
             <tr class="divide-x divide-y">
+                <th 
+                    v-if="enableCheck" 
+                    class="px-2 py-1.5" 
+                    style="width: 30px" 
+                />
+
                 <th
                     v-for="field in fields"
                     :key="field.label"
@@ -51,6 +57,14 @@
                 :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"
+                >
+                    <input id="checkbox" v-model="selectedRow" :value="item" type="checkbox" @change="emit('checkRow', item)" />
+                </td>
+
                 <td
                     v-for="field in fields"
                     :key="field.key"
@@ -105,9 +119,10 @@ const props = defineProps({
     },
     hidePagination: Boolean,
     multipleSortable: Boolean,
+    enableCheck: Boolean,
 })
 
-const emit = defineEmits(['updateSortable', 'changePage'])
+const emit = defineEmits(['updateSortable', 'changePage', 'checkRow'])
 
 const localTotalRows = ref(props.totalRows || props.items.length || 0)
 const fromRow = ref(0)
@@ -119,6 +134,7 @@ const getField = (item, field) => {
 }
 
 const sortable = ref({})
+const selectedRow = ref([])
 
 const updateSortable = (key, sort) => {
     props.multipleSortable