Merge pull request #3 from BitTheCat:selected-row

Added selected row (visual)

Author: BitTheCat

README.md

@@ -52,7 +52,7 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 
 - Additional rows up the header ✔️
 
-- Select rows
+- Select rows (visual) ✔️
 
 - Provide item from api url
 

dev/TableShow.vue

@@ -6,7 +6,6 @@
                 ref="tvtTableSimple"
                 :items="cloneItems"
                 :fields="fieldsSimple"
-                enable-check
                 :busy="busy"
                 @check-row="checkRow"
                 @row-clicked="checkRow"

src/components/TVTable.vue

@@ -69,7 +69,7 @@
                 <tr 
                     :id="`TVTABLE_row_${index}_${item.id}`"  
                     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'"
+                    :class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'} ${checkSelectedForRow(item) ? 'bg-gray-500/50' : ''}`"
                     @click="rowClicked(item)"
                 >
                     <td
@@ -213,6 +213,10 @@ const refreshCounter = () => {
     toRow.value = to
 }
 
+const checkSelectedForRow = (item) => {
+    return selectedRows.value.includes(item)
+}
+
 watch(() => localCurrentPage.value, (value) => {
     refreshCounter()
     emit('changePage', {page: value, from: fromRow.value, to: toRow.value})