From 4f3032db0bf583d660de6fa358d00587505c9ad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Teixeira?= <joao@indielayer.com>
Date: Mon, 30 Sep 2024 15:11:08 +0100
Subject: [PATCH] fix(table): selected use prop key

---
 .changeset/chilled-dolls-boil.md                 |  5 +++++
 packages/ui/docs/pages/component/table/usage.vue |  7 ++++---
 packages/ui/src/components/table/Table.vue       | 11 ++++++-----
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/chilled-dolls-boil.md

diff --git a/.changeset/chilled-dolls-boil.md b/.changeset/chilled-dolls-boil.md
new file mode 100644
index 00000000..79f99274
--- /dev/null
+++ b/.changeset/chilled-dolls-boil.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(table): selected use prop key
diff --git a/packages/ui/docs/pages/component/table/usage.vue b/packages/ui/docs/pages/component/table/usage.vue
index a437fa17..22555541 100644
--- a/packages/ui/docs/pages/component/table/usage.vue
+++ b/packages/ui/docs/pages/component/table/usage.vue
@@ -61,7 +61,7 @@ const itemsSorted = computed<Book[]>(() => {
   })
 })
 
-const selectedIndex = ref<number>(0)
+const selected = ref<number>(2)
 </script>
 
 <template>
@@ -89,13 +89,14 @@ const selectedIndex = ref<number>(0)
     <x-card>
       <x-table
         v-model:sort="sort"
-        v-model:selected="selectedIndex"
+        v-model:selected="selected"
+        key-prop="id"
         dense
         pointer
         striped
         :headers="headers"
         :items="itemsSorted"
-        @click-row="(event, index) => { notifications?.log(event); selectedIndex = index }"
+        @click-row="(event, index) => { notifications?.log(event); selected = event.id }"
       >
         <template #item-published="{ item }">
           {{ formatDate(item.published) }}
diff --git a/packages/ui/src/components/table/Table.vue b/packages/ui/src/components/table/Table.vue
index c3da1ca8..d3d87394 100644
--- a/packages/ui/src/components/table/Table.vue
+++ b/packages/ui/src/components/table/Table.vue
@@ -43,6 +43,7 @@ const tableProps = {
     type: Number,
     default: 5,
   },
+  keyProp: String,
 }
 
 export type TableHeader = {
@@ -65,7 +66,7 @@ export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import { ref, type ExtractPublicPropTypes, type PropType, watch, computed, type MaybeRef } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch, computed } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useVirtualList } from '../../composables/useVirtualList'
 
@@ -90,9 +91,9 @@ const props = defineProps({
   },
 })
 
-const selectedIndex = defineModel<number | number[]>('selected')
+const selected = defineModel<number | number[]>('selected')
 
-const hasSelectedIndex = computed(() => typeof selectedIndex.value === 'number')
+const hasSelected = computed(() => typeof selected.value === 'number')
 
 type internalT = T & {
   __expanded?: boolean;
@@ -257,11 +258,11 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               </td>
             </tr>
           </template>
-          <template v-for="(item, index) in list" v-else :key="index">
+          <template v-for="(item, index) in list" v-else :key="keyProp ?? index">
             <x-table-row
               :pointer="pointer"
               :striped="striped"
-              :selected="hasSelectedIndex ? selectedIndex === item.index : undefined"
+              :selected="hasSelected ? selected === (keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index) : undefined"
               @click="$emit('click-row', item.data, item.index)"
             >
               <x-table-cell v-if="expandable" width="48" class="!p-1">