improve DataTableLayout scrolling behavior

src/components/Emoji.vue

@@ -37,6 +37,7 @@
                 return;
             }
         }
+        if (!fileId) return;
         image.value = await getCachedEmoji(fileId);
     }
 

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);