fix: Add scrollTopOnPagination property to Table (#22115)

superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts

@@ -196,6 +196,23 @@ describe('Drill to detail modal', () => {
           .then($rows => {
             expect($rows).to.contain('Victoria');
           });
+
+        // verify scroll top on pagination
+        cy.getBySelLike('Number-modal')
+          .find('.table-condensed')
+          .scrollTo(0, 100);
+
+        cy.get("[role='rowgroup'] [role='row']")
+          .contains('Miguel')
+          .should('not.be.visible');
+
+        cy.get(".pagination-container [role='navigation'] [role='button']")
+          .eq(1)
+          .click();
+
+        cy.get("[role='rowgroup'] [role='row']")
+          .contains('Aaron')
+          .should('be.visible');
       });
     });
 

superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx

@@ -243,6 +243,7 @@ export default function DrillDetailPane({
             margin-bottom: 0;
           }
         `}
+        scrollTopOnPagination
       />
     );
   }

superset-frontend/src/components/TableView/TableView.stories.tsx

@@ -77,6 +77,7 @@ InteractiveTableView.args = {
   showRowCount: true,
   withPagination: true,
   columnsForWrapText: ['Summary'],
+  scrollTopOnPagination: false,
 };
 
 InteractiveTableView.argTypes = {

superset-frontend/src/components/TableView/TableView.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 import { styled, t } from '@superset-ui/core';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
@@ -49,6 +49,7 @@ export interface TableViewProps {
   isPaginationSticky?: boolean;
   showRowCount?: boolean;
   scrollTable?: boolean;
+  scrollTopOnPagination?: boolean;
   small?: boolean;
   columnsForWrapText?: string[];
 }
@@ -130,6 +131,7 @@ const TableView = ({
   serverPagination = false,
   columnsForWrapText,
   onServerPagination = () => {},
+  scrollTopOnPagination = false,
   ...props
 }: TableViewProps) => {
   const initialState = {
@@ -161,22 +163,6 @@ const TableView = ({
     useSortBy,
     usePagination,
   );
-  useEffect(() => {
-    if (serverPagination && pageIndex !== initialState.pageIndex) {
-      onServerPagination({
-        pageIndex,
-      });
-    }
-  }, [pageIndex]);
-
-  useEffect(() => {
-    if (serverPagination && !isEqual(sortBy, initialState.sortBy)) {
-      onServerPagination({
-        pageIndex: 0,
-        sortBy,
-      });
-    }
-  }, [sortBy]);
 
   const content = withPagination ? page : rows;
 
@@ -194,10 +180,34 @@ const TableView = ({
 
   const isEmpty = !loading && content.length === 0;
   const hasPagination = pageCount > 1 && withPagination;
+  const tableRef = useRef<HTMLTableElement>(null);
+  const handleGotoPage = (p: number) => {
+    if (scrollTopOnPagination) {
+      tableRef?.current?.scroll(0, 0);
+    }
+    gotoPage(p);
+  };
+
+  useEffect(() => {
+    if (serverPagination && pageIndex !== initialState.pageIndex) {
+      onServerPagination({
+        pageIndex,
+      });
+    }
+  }, [pageIndex]);
+
+  useEffect(() => {
+    if (serverPagination && !isEqual(sortBy, initialState.sortBy)) {
+      onServerPagination({
+        pageIndex: 0,
+        sortBy,
+      });
+    }
+  }, [sortBy]);
 
   return (
     <>
-      <TableViewStyles {...props}>
+      <TableViewStyles {...props} ref={tableRef}>
         <TableCollection
           getTableProps={getTableProps}
           getTableBodyProps={getTableBodyProps}
@@ -229,7 +239,7 @@ const TableView = ({
           <Pagination
             totalPages={pageCount || 0}
             currentPage={pageCount ? pageIndex + 1 : 0}
-            onChange={(p: number) => gotoPage(p - 1)}
+            onChange={(p: number) => handleGotoPage(p - 1)}
             hideFirstAndLastPageLinks
           />
           {showRowCount && (