Added useAttrs for table

Author: BitTheCat

dev/TableShow.vue

@@ -50,7 +50,7 @@
                     <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
                 </template>
             </TVTable>
-            
+
             <div class="text-left mt-2">
                 Selected: {{ selectRow }}
             </div>

src/components/TVTable.vue

@@ -3,7 +3,7 @@
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
 
-    <table class="min-w-full">
+    <table ref="TVTABLE" class="min-w-full" v-bind="attrs">
         <thead class="bg-gray-300 border divide-x divide-y">
             <slot v-if="slots['header-row']" name="header-row" />
             <tr class="divide-x divide-y">
@@ -65,9 +65,9 @@
                         </div>
                     </td>
                 </tr>
-            <template v-for="(item, index) in items" v-else :key="item.label">
+            <template v-for="(item, index) in items" v-else :key="item.id">
                 <tr 
-                    :id="`TV_TABLE_row_${item.label}`"  
+                    :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'"
                     @click="rowClicked(item)"
@@ -118,14 +118,15 @@
 </template>
 
 <script setup>
-import {computed, defineComponent, ref, useSlots, watch} from 'vue';
+import {computed, defineComponent, ref, useAttrs, useSlots, watch} from 'vue';
 import TVPagination from './TVPagination.vue';
 
 defineComponent({
     name: 'TVTable'
 })
 
 const slots = useSlots();
+const attrs = useAttrs();
 
 const props = defineProps({
     items: {