fix(ListView): implement AntD pagination for ListView component (#35057)

superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { ensureIsArray, GenericDataType, styled, t } from '@superset-ui/core';
 import {
   TableView,
@@ -104,6 +104,11 @@ export const SamplesPane = ({
   );
   const filteredData = useFilteredTableData(filterText, data);
 
+  const handleInputChange = useCallback(
+    (input: string) => setFilterText(input),
+    [],
+  );
+
   if (isLoading) {
     return <Loading />;
   }
@@ -117,7 +122,7 @@ export const SamplesPane = ({
           columnTypes={coltypes}
           rowcount={rowcount}
           datasourceId={datasourceId}
-          onInputChange={input => setFilterText(input)}
+          onInputChange={handleInputChange}
           isLoading={isLoading}
           canDownload={canDownload}
         />
@@ -139,7 +144,7 @@ export const SamplesPane = ({
         columnTypes={coltypes}
         rowcount={rowcount}
         datasourceId={datasourceId}
-        onInputChange={input => setFilterText(input)}
+        onInputChange={handleInputChange}
         isLoading={isLoading}
         canDownload={canDownload}
       />

superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { t } from '@superset-ui/core';
 import {
   TableView,
@@ -55,6 +55,11 @@ export const SingleQueryResultPane = ({
   );
   const filteredData = useFilteredTableData(filterText, data);
 
+  const handleInputChange = useCallback(
+    (input: string) => setFilterText(input),
+    [],
+  );
+
   return (
     <>
       <TableControls
@@ -63,7 +68,7 @@ export const SingleQueryResultPane = ({
         columnTypes={coltypes}
         rowcount={rowcount}
         datasourceId={datasourceId}
-        onInputChange={input => setFilterText(input)}
+        onInputChange={handleInputChange}
         isLoading={false}
         canDownload={canDownload}
       />

superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useEffect, ReactElement } from 'react';
+import { useState, useEffect, ReactElement, useCallback } from 'react';
 
 import {
   ensureIsArray,
@@ -35,6 +35,14 @@ const Error = styled.pre`
   margin-top: ${({ theme }) => `${theme.sizeUnit * 4}px`};
 `;
 
+const StyledDiv = styled.div`
+  ${() => `
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    `}
+`;
+
 const cache = new WeakMap();
 
 export const useResultsPane = ({
@@ -58,6 +66,8 @@ export const useResultsPane = ({
   const queryCount = metadata?.queryObjectCount ?? 1;
   const isQueryCountDynamic = metadata?.dynamicQueryObjectCount;
 
+  const noOpInputChange = useCallback(() => {}, []);
+
   useEffect(() => {
     // it's an invalid formData when gets a errorMessage
     if (errorMessage) return;
@@ -123,7 +133,7 @@ export const useResultsPane = ({
           columnTypes={[]}
           rowcount={0}
           datasourceId={queryFormData.datasource}
-          onInputChange={() => {}}
+          onInputChange={noOpInputChange}
           isLoading={false}
           canDownload={canDownload}
         />
@@ -144,16 +154,17 @@ export const useResultsPane = ({
     : resultResp.slice(0, queryCount);
 
   return resultRespToDisplay.map((result, idx) => (
-    <SingleQueryResultPane
-      data={result.data}
-      colnames={result.colnames}
-      coltypes={result.coltypes}
-      rowcount={result.rowcount}
-      dataSize={dataSize}
-      datasourceId={queryFormData.datasource}
-      key={idx}
-      isVisible={isVisible}
-      canDownload={canDownload}
-    />
+    <StyledDiv key={idx}>
+      <SingleQueryResultPane
+        data={result.data}
+        colnames={result.colnames}
+        coltypes={result.coltypes}
+        rowcount={result.rowcount}
+        dataSize={dataSize}
+        datasourceId={queryFormData.datasource}
+        isVisible={isVisible}
+        canDownload={canDownload}
+      />
+    </StyledDiv>
   ));
 };