From ecbb0612ec05fb3dded297f2c788154a12b25e97 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 20 Jan 2026 22:34:08 +0900
Subject: [PATCH] improve DataTableLayout scrolling behavior

---
 src/components/Emoji.vue                         |  1 +
 src/components/ui/data-table/DataTableLayout.vue | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Emoji.vue b/src/components/Emoji.vue
index b77035d0..60ebe224 100644
--- a/src/components/Emoji.vue
+++ b/src/components/Emoji.vue
@@ -37,6 +37,7 @@
                 return;
             }
         }
+        if (!fileId) return;
         image.value = await getCachedEmoji(fileId);
     }
 
diff --git a/src/components/ui/data-table/DataTableLayout.vue b/src/components/ui/data-table/DataTableLayout.vue
index 42f05510..e6af6c32 100644
--- a/src/components/ui/data-table/DataTableLayout.vue
+++ b/src/components/ui/data-table/DataTableLayout.vue
@@ -5,7 +5,7 @@
         </div>
 
         <div class="rounded-md border">
-            <div class="max-w-full overflow-auto relative" :style="tableStyle">
+            <div ref="tableScrollRef" class="max-w-full overflow-auto relative" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
                     <colgroup>
                         <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -116,9 +116,9 @@
 </template>
 
 <script setup>
+    import { computed, nextTick, ref, watch } from 'vue';
     import { FlexRender } from '@tanstack/vue-table';
     import { Spinner } from '@/components/ui/spinner';
-    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useAppearanceSettingsStore } from '@/stores/';
     import { useI18n } from 'vue-i18n';
@@ -185,6 +185,7 @@
     });
 
     const { t } = useI18n();
+    const tableScrollRef = ref(null);
 
     const expandedRenderer = computed(() => {
         const columns = props.table.getAllColumns?.() ?? [];
@@ -319,6 +320,13 @@
         }
     });
 
+    watch([currentPage, pageSizeProxy], async () => {
+        await nextTick();
+        if (tableScrollRef.value) {
+            tableScrollRef.value.scrollTop = 0;
+        }
+    });
+
     const handleRowClick = (row) => {
         if (!props.onRowClick) return;
         props.onRowClick(row);