From da645e4073d0bd4057f4c4a547839d09e4f6ee28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Wed, 3 Jul 2024 12:43:27 +0200
Subject: [PATCH] fix(dashboard): reset table scroll on page change (#7916)

---
 .../data-table-root/data-table-root.tsx          | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
index 050d10330a..be3774e014 100644
--- a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
+++ b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
@@ -5,7 +5,14 @@ import {
   Row,
   flexRender,
 } from "@tanstack/react-table"
-import { ComponentPropsWithoutRef, Fragment, UIEvent, useState } from "react"
+import {
+  ComponentPropsWithoutRef,
+  Fragment,
+  UIEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { NoResults } from "../../../common/empty-table-content"
@@ -79,6 +86,8 @@ export const DataTableRoot = <TData,>({
   const navigate = useNavigate()
   const [showStickyBorder, setShowStickyBorder] = useState(false)
 
+  const scrollableRef = useRef()
+
   const hasSelect = columns.find((c) => c.id === "select")
   const hasActions = columns.find((c) => c.id === "actions")
   const hasCommandBar = commands && commands.length > 0
@@ -105,6 +114,10 @@ export const DataTableRoot = <TData,>({
     })
   }
 
+  useEffect(() => {
+    scrollableRef.current?.scroll({ top: 0, left: 0 })
+  }, [pageIndex])
+
   return (
     <div
       className={clx("flex w-full flex-col overflow-hidden", {
@@ -112,6 +125,7 @@ export const DataTableRoot = <TData,>({
       })}
     >
       <div
+        ref={scrollableRef}
         onScroll={handleHorizontalScroll}
         className={clx("w-full", {
           "min-h-0 flex-grow overflow-auto": layout === "fill",