From c843518de4a3125671f75878b3c30ce6929f0e04 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 12 Sep 2025 10:40:48 +0200
Subject: [PATCH] chore: scroll to the top of table when changing page (#10657)

Makes it so that if you change the page in a paginated table, you'll
scroll to the top of the table. Makes the experience more user friendly.

Will only scroll if the top of the table isn't in view already.

Also scrolls to the top of the table when you change the page size
unless: you are on the first page **and** increasing the page size.

The reason for this behavior is:
- we already send you back to page 1 if you change the page size (so it
makes sense to also scroll you to the top)
- if you're increasing the page size because you're at the bottom of the
table, you probably wanna keep your place
- if you're decreasing the page size, you might be below where the
actual table cuts off, so you'll end up at the bottom of the table (or
below the table completely if that's possible on that page)
---
 .../Table/PaginatedTable/PaginatedTable.tsx   | 44 ++++++++++++++-----
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
index 7cd5bf92a2..dbdc5a2afb 100644
--- a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
+++ b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
@@ -1,4 +1,5 @@
 import { TableBody, TableRow, TableHead } from '@mui/material';
+import { useRef } from 'react';
 import { Table } from 'component/common/Table/Table/Table';
 import {
     type Header,
@@ -59,10 +60,22 @@ export const PaginatedTable = <T extends object>({
     totalItems?: number;
 }) => {
     const { pagination } = tableInstance.getState();
+    const tableRef = useRef<HTMLDivElement>(null);
+
+    const scrollToTopIfNeeded = () => {
+        if (!tableRef.current) return;
+
+        const rect = tableRef.current.getBoundingClientRect();
+        const isTableTopVisible = rect.top >= 0;
+
+        if (!isTableTopVisible) {
+            tableRef.current.scrollIntoView({ block: 'start' });
+        }
+    };
 
     return (
         <>
-            <TableContainer>
+            <TableContainer ref={tableRef}>
                 <Table>
                     <TableHead>
                         {tableInstance.getHeaderGroups().map((headerGroup) => (
@@ -110,24 +123,35 @@ export const PaginatedTable = <T extends object>({
                         totalItems={totalItems}
                         pageIndex={pagination.pageIndex}
                         pageSize={pagination.pageSize}
-                        fetchNextPage={() =>
+                        fetchNextPage={() => {
                             tableInstance.setPagination({
                                 pageIndex: pagination.pageIndex + 1,
                                 pageSize: pagination.pageSize,
-                            })
-                        }
-                        fetchPrevPage={() =>
+                            });
+                            scrollToTopIfNeeded();
+                        }}
+                        fetchPrevPage={() => {
                             tableInstance.setPagination({
                                 pageIndex: pagination.pageIndex - 1,
                                 pageSize: pagination.pageSize,
-                            })
-                        }
-                        setPageLimit={(pageSize) =>
+                            });
+                            scrollToTopIfNeeded();
+                        }}
+                        setPageLimit={(pageSize) => {
                             tableInstance.setPagination({
                                 pageIndex: 0,
                                 pageSize,
-                            })
-                        }
+                            });
+
+                            if (
+                                pagination.pageIndex > 0 ||
+                                pagination.pageSize > pageSize
+                            ) {
+                                // scroll to table top unless you are on the
+                                // first page and increasing the page size.
+                                scrollToTopIfNeeded();
+                            }
+                        }}
                     />
                 }
             />