From 0fa8fb6250e364b8720d50d3de1468187f8833f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Teixeira?= <joao@indielayer.com>
Date: Wed, 23 Oct 2024 00:19:15 +0100
Subject: [PATCH] fix(table): keep position after list updates

---
 .changeset/silly-pillows-hope.md              |  5 ++++
 .../ui/docs/pages/component/table/virtual.vue | 25 ++++++++++++++-----
 packages/ui/src/composables/useVirtualList.ts | 13 ++++++----
 3 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/silly-pillows-hope.md

diff --git a/.changeset/silly-pillows-hope.md b/.changeset/silly-pillows-hope.md
new file mode 100644
index 0000000..b7b7ad8
--- /dev/null
+++ b/.changeset/silly-pillows-hope.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(table): keep position after list updates
diff --git a/packages/ui/docs/pages/component/table/virtual.vue b/packages/ui/docs/pages/component/table/virtual.vue
index 0880900..300ffd8 100644
--- a/packages/ui/docs/pages/component/table/virtual.vue
+++ b/packages/ui/docs/pages/component/table/virtual.vue
@@ -3,11 +3,12 @@ import { type TableHeader } from '@indielayer/ui'
 import { computed, ref } from 'vue'
 
 const headers: TableHeader[] = [
-  { text: '#', value: 'id', sortable: true, align: 'center' },
-  { text: 'Title', value: 'title' },
-  { text: 'Description', value: 'description' },
-  { text: 'Published', value: 'published' },
+  { text: '#', value: 'id', sortable: true, align: 'center', width: 50 },
+  { text: 'Title', value: 'title', width: 120, truncate: true },
+  { text: 'Description', value: 'description', width: 240, truncate: true },
+  { text: 'Published', value: 'published', width: 140, truncate: true },
   { text: 'Status', value: 'status' },
+  { value: 'action', align: 'right' },
 ]
 
 const sort = ref([])
@@ -43,11 +44,23 @@ const items = ref(generateItems(1000))
   <x-card>
     <x-table
       v-model:sort="sort"
-      class="!h-80"
       :headers="headers"
       :items="itemsSorted"
+      class="!h-80"
+      fixed
       virtual-list
       :virtual-list-item-height="54"
-    />
+    >
+      <template #item-action="{ item }">
+        <x-button
+          icon="x"
+          light
+          outlined
+          color="error"
+          size="xs"
+          @click="items = items.filter((i) => i.id !== item.id)"
+        />
+      </template>
+    </x-table>
   </x-card>
 </template>
diff --git a/packages/ui/src/composables/useVirtualList.ts b/packages/ui/src/composables/useVirtualList.ts
index f46c94e..e1b8086 100644
--- a/packages/ui/src/composables/useVirtualList.ts
+++ b/packages/ui/src/composables/useVirtualList.ts
@@ -196,6 +196,7 @@ function createCalculateRange<T>(type: 'horizontal' | 'vertical', overscan: numb
 
 function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtualListResources<T>['source']) {
   return (index: number) => {
+
     if (typeof itemSize === 'number') {
       const size = index * itemSize
 
@@ -210,10 +211,9 @@ function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtu
   }
 }
 
-function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void, scrollTo: (index: number) => void) {
+function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void) {
   watch([size.width, size.height, list, containerRef], () => {
     calculateRange()
-    scrollTo(0)
   })
 }
 
@@ -263,14 +263,17 @@ function useVerticalVirtualList<T>(options: UseVirtualListOptions, list: MaybeRe
 
   const scrollTo = createScrollTo('vertical', calculateRange, getDistanceTop, containerRef)
 
-  useWatchForSizes(size, list, containerRef, calculateRange, scrollTo)
+  useWatchForSizes(size, source, containerRef, calculateRange)
 
   const wrapperProps = computed(() => {
+    const total = totalHeight.value + topOffset + bottomOffset
+    const offTop = offsetTop.value > total ? total : offsetTop.value
+
     return {
       style: {
         width: '100%',
-        height: `${totalHeight.value - offsetTop.value + topOffset + bottomOffset}px`,
-        marginTop: `${offsetTop.value}px`,
+        height: `${totalHeight.value - offTop + topOffset + bottomOffset}px`,
+        marginTop: `${offTop}px`,
       },
     }
   })