From 52e8147e8432cfcdeb1828baf76fef2c39e1a984 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Thu, 31 Jul 2025 20:23:26 +0200
Subject: [PATCH] (nouns) scroll to top of <Table> when page navigation is used

---
 components/Table.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/Table.vue b/components/Table.vue
index 1cba4a24d..7b07abb5e 100644
--- a/components/Table.vue
+++ b/components/Table.vue
@@ -42,14 +42,21 @@ const pagesRange = computed((): VPage[] => {
     return vPages;
 });
 
+const navigateToPage = (to: number) => {
+    page.value = to;
+    focus();
+};
+
 const section = useTemplateRef<HTMLElement>('section');
+const focus = () => {
+    section.value?.scrollIntoView();
+};
+
 defineExpose({
     reset() {
-        page.value = 0;
-    },
-    focus() {
-        section.value?.scrollIntoView();
+        navigateToPage(0);
     },
+    focus,
 });
 </script>
 
@@ -63,9 +70,9 @@ defineExpose({
                         :key="p.text"
                         :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']"
                     >
-                        <a v-if="p.enabled" class="page-link" href="#" @click.prevent="page = p.page">
+                        <button v-if="p.enabled" type="button" class="page-link" @click="navigateToPage(p.page)">
                             {{ p.text }}
-                        </a>
+                        </button>
                         <span v-else class="page-link">
                             {{ p.text }}
                         </span>
@@ -108,9 +115,9 @@ defineExpose({
                         :key="p.text"
                         :class="['page-item', p.page === page ? 'active' : '', p.enabled ? '' : 'disabled']"
                     >
-                        <a v-if="p.enabled" class="page-link" href="#" @click.prevent="page = p.page">
+                        <button v-if="p.enabled" type="button" class="page-link" @click="navigateToPage(p.page)">
                             {{ p.text }}
-                        </a>
+                        </button>
                         <span v-else class="page-link">
                             {{ p.text }}
                         </span>