fix(data-table#4421): correct key on expandable table (#4427)

epicmaxco · Nov 15, 2024 · 0418759 · 0418759
1 parent 121fbaa
commit 0418759
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 4 deletions.
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.stories.ts b/packages/ui/src/components/va-data-table/VaDataTable.stories.ts
@@ -228,3 +228,88 @@ export const NoFilteredDataText = () => ({
     <VaDataTable :items="[{ name: 'BbB' }]" :columns="columns" filter="Aaa" no-data-filtered-html="Test no filtered data" />
   `,
 })
+
+export const ExpandableRowFilter = () => ({
+  components: { VaDataTable, VaPagination },
+  data () {
+    const items = [
+      {
+        id: 1,
+        name: 'Leanne Graham',
+        username: 'Bret',
+        email: '[email protected]',
+        phone: '1-770-736-8031',
+        website: 'hildegard.org',
+      },
+      {
+        id: 2,
+        name: 'Ervin Howell',
+        username: 'Antonette',
+        email: '[email protected]',
+        phone: '010-692-6593',
+        website: 'anastasia.net',
+      },
+      {
+        id: 3,
+        name: 'Clementine Bauch',
+        username: 'Samantha',
+        email: '[email protected]',
+        phone: '1-463-123-4447',
+        website: 'ramiro.info',
+      },
+      {
+        id: 4,
+        name: 'Patricia Lebsack',
+        username: 'Karianne',
+        email: '[email protected]',
+        phone: '493-170-9623',
+        website: 'kale.biz',
+      },
+      {
+        id: 5,
+        name: 'Chelsey Dietrich',
+        username: 'Kamren',
+        email: '[email protected]',
+        phone: '(254)954-1289',
+        website: 'demarco.info',
+      },
+    ]
+
+    const columns = [
+      { key: 'name' },
+      { key: 'username' },
+      { key: 'email' },
+      { key: 'actions', width: 80 },
+    ]
+    const filter = ref('')
+
+    return {
+      items,
+      columns,
+      filter,
+    }
+  },
+
+  template: `
+    <input v-model="filter"/>
+    <VaDataTable
+      :items="items"
+      :columns="columns"
+      :filter="filter"
+    >
+      <template #cell(actions)="{ row, isExpanded }">
+          <button
+            @click="row.toggleRowDetails()"
+          >
+            {{ isExpanded ? 'Hide': 'More info' }}
+          </button>
+      </template>
+
+      <template #expandableRow="{ rowData }" >
+        <div>
+          {{ rowData }}
+        </div>
+      </template>
+    </VaDataTable>
+  `,
+})
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.vue b/packages/ui/src/components/va-data-table/VaDataTable.vue
@@ -153,11 +153,10 @@
                     </slot>
                   </td>
                 </tr>
-                <tr v-if="row.isExpandableRowVisible" class="va-data-table__table-tr">
+                <tr v-if="row.isExpandableRowVisible" class="va-data-table__table-tr" :key="`table-expandable-row_${uniqueKey(row, index)}`">
                   <td
                     class="va-data-table__table-expanded-content"
-                    colspan="99999"
-                    :key="uniqueKey(row, index)"
+                    colspan="100%"
                   >
                     <slot
                       name="expandableRow"

diff --git a/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.vue b/packages/ui/src/components/va-virtual-scroller/VaVirtualScroller.vue
@@ -66,7 +66,7 @@ if (!props.disabled) { useEvent('scroll', handleScroll, true) }
 const { list, wrapper, itemSize, wrapperSize } = useVirtualScrollerSizes(props, listScrollPosition)
 
 const { getKey } = useTrackBy(props)
-const uniqueKey = (item: Array<any> | Record<string, any>, index: number, defaultValue?: any) => getKey(item, index, defaultValue)
+const uniqueKey = getKey
 
 watch(listScrollPosition, (newValue) => {
   if (newValue + wrapperSize.value === containerSize.value) {