Fix 16805: pagination dropdown issue (#18611)

* fix: pagination dropdown * fix: remove handlePageChange dependency * fix: api url for database schema response --------- Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
2025-08-26 09:55:52 +00:00 · 2024-11-13 17:47:19 +05:30 · 2024-11-13 17:47:19 +05:30 · 00357f68fc
commit 00357f68fc
parent 089fa785a8
11 changed files with 116 additions and 78 deletions
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts
@ -1235,7 +1235,7 @@ export const softDeleteEntity = async (
  if (endPoint === EntityTypeEndpoint.Table) {
    await page.click('[data-testid="breadcrumb-link"]:last-child');
    const deletedTableResponse = page.waitForResponse(
-      '/api/v1/tables?databaseSchema=*'
+      '/api/v1/tables?*databaseSchema=*'
    );
    await page.click('[data-testid="show-deleted"]');
    await deletedTableResponse;
--- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.tsx
@ -15,7 +15,7 @@ import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import React, {
  FunctionComponent,
  useCallback,
@ -46,6 +46,7 @@ import {
  getEntityDetailsPath,
  getVersionPath,
  INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
  ROUTES,
 } from '../../constants/constants';
 import { FEED_COUNT_INITIAL_DATA } from '../../constants/entity.constants';
@ -69,6 +70,7 @@ import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
 import { TagLabel } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { FeedCounts } from '../../interface/feed.interface';
 import {
@ -99,6 +101,9 @@ const APICollectionPage: FunctionComponent = () => {
  const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
  const { t } = useTranslation();
  const { getEntityPermissionByFqn } = usePermissionProvider();
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;

  const { tab: activeTab = EntityTabs.API_ENDPOINT } =
    useParams<{ tab: EntityTabs }>();
@ -112,12 +117,7 @@ const APICollectionPage: FunctionComponent = () => {
  const [apiCollection, setAPICollection] = useState<APICollection>(
    {} as APICollection
  );
-  const [apiEndpoints, setAPIEndpoints] = useState<
-    PagingResponse<APIEndpoint[]>
-  >({
-    data: [],
-    paging: { total: 0 },
-  });
+  const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);
  const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);
  const [isAPICollectionLoading, setIsAPICollectionLoading] =
    useState<boolean>(true);
@ -239,7 +239,8 @@ const APICollectionPage: FunctionComponent = () => {
          service: apiCollection?.service?.fullyQualifiedName ?? '',
          include: showDeletedEndpoints ? Include.Deleted : Include.NonDeleted,
        });
-        setAPIEndpoints(res);
+        setAPIEndpoints(res.data);
+        handlePagingChange(res.paging);
      } catch (err) {
        showErrorToast(err as AxiosError);
      } finally {
@ -454,13 +455,13 @@ const APICollectionPage: FunctionComponent = () => {
      if (cursorType) {
        getAPICollectionEndpoints({
          paging: {
-            [cursorType]: apiEndpoints.paging[cursorType],
+            [cursorType]: paging[cursorType],
          },
        });
      }
      setCurrentEndpointsPage(currentPage);
    },
-    [apiEndpoints, getAPICollectionEndpoints]
+    [paging, getAPICollectionEndpoints]
  );

  const versionHandler = useCallback(() => {
@ -503,13 +504,16 @@ const APICollectionPage: FunctionComponent = () => {

  useEffect(() => {
    if (viewAPICollectionPermission && decodedAPICollectionFQN) {
-      getAPICollectionEndpoints();
+      getAPICollectionEndpoints({
+        paging: { limit: pageSize },
+      });
    }
  }, [
    showDeletedEndpoints,
    decodedAPICollectionFQN,
    viewAPICollectionPermission,
    apiCollection,
+    pageSize,
  ]);

  const {
@ -556,7 +560,7 @@ const APICollectionPage: FunctionComponent = () => {
    {
      label: (
        <TabsLabel
-          count={apiEndpoints.paging.total}
+          count={paging.total}
          id={EntityTabs.API_ENDPOINT}
          isActive={activeTab === EntityTabs.API_ENDPOINT}
          name={t('label.endpoint-plural')}
@ -580,6 +584,7 @@ const APICollectionPage: FunctionComponent = () => {
                      editDescriptionPermission={editDescriptionPermission}
                      endpointPaginationHandler={endpointPaginationHandler}
                      isEdit={isEdit}
+                      pagingInfo={pagingInfo}
                      showDeletedEndpoints={showDeletedEndpoints}
                      onCancel={onEditCancel}
                      onDescriptionEdit={onDescriptionEdit}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
@ -15,7 +15,6 @@ import { Col, Row, Space, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEmpty, isUndefined, toString } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@ -34,6 +33,7 @@ import {
  getEntityDetailsPath,
  getVersionPath,
  INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
 } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import {
@ -52,6 +52,7 @@ import { ChangeDescription } from '../../generated/entity/type';
 import { EntityHistory } from '../../generated/type/entityHistory';
 import { Include } from '../../generated/type/include';
 import { TagSource } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import {
  getApiCollectionByFQN,
@ -83,6 +84,10 @@ const APICollectionVersionPage = () => {

  const { fqn: decodedEntityFQN } = useFqn();

+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
+
  const [collectionPermissions, setCollectionPermissions] =
    useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
  const [isLoading, setIsLoading] = useState<boolean>(true);
@ -99,12 +104,7 @@ const APICollectionVersionPage = () => {

  const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);

-  const [apiEndpoints, setAPIEndpoints] = useState<
-    PagingResponse<APIEndpoint[]>
-  >({
-    data: [],
-    paging: { total: 0 },
-  });
+  const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);

  const [currentEndpointsPage, setCurrentEndpointsPage] =
    useState<number>(INITIAL_PAGING_VALUE);
@ -182,7 +182,8 @@ const APICollectionVersionPage = () => {
          service: collection?.service?.fullyQualifiedName ?? '',
          include: Include.All,
        });
-        setAPIEndpoints(res);
+        setAPIEndpoints(res.data);
+        handlePagingChange(res.paging);
      } catch (err) {
        showErrorToast(err as AxiosError);
      } finally {
@ -203,13 +204,15 @@ const APICollectionVersionPage = () => {
          );

          setCurrentVersionData(response);
-          await getAPICollectionEndpoints();
+          await getAPICollectionEndpoints({
+            paging: { limit: pageSize },
+          });
        }
      } finally {
        setIsVersionDataLoading(false);
      }
    },
-    [viewVersionPermission, version, getAPICollectionEndpoints]
+    [viewVersionPermission, version, getAPICollectionEndpoints, pageSize]
  );

  const handleTabChange = (activeKey: string) => {
@ -228,13 +231,13 @@ const APICollectionVersionPage = () => {
      if (cursorType) {
        getAPICollectionEndpoints({
          paging: {
-            [cursorType]: apiEndpoints.paging[cursorType],
+            [cursorType]: paging[cursorType],
          },
        });
      }
      setCurrentEndpointsPage(currentPage);
    },
-    [apiEndpoints, getAPICollectionEndpoints]
+    [paging, getAPICollectionEndpoints]
  );

  const { versionHandler, backHandler } = useMemo(
@ -268,7 +271,7 @@ const APICollectionVersionPage = () => {
      {
        label: (
          <TabsLabel
-            count={apiEndpoints.paging.total}
+            count={paging.total}
            id={EntityTabs.API_ENDPOINT}
            isActive={tab === EntityTabs.API_ENDPOINT}
            name={t('label.endpoint-plural')}
@ -286,6 +289,7 @@ const APICollectionVersionPage = () => {
                currentEndpointsPage={currentEndpointsPage}
                description={description}
                endpointPaginationHandler={endpointPaginationHandler}
+                pagingInfo={pagingInfo}
              />
            </Col>
            <Col
@ -432,7 +436,7 @@ const APICollectionVersionPage = () => {
    if (!isUndefined(collection)) {
      fetchCurrentVersionData(collection);
    }
-  }, [version, collection]);
+  }, [version, collection, pageSize]);

  return (
    <PageLayoutV1
--- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APIEndpointsTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APIEndpointsTab.tsx
@ -13,8 +13,7 @@

 import { Col, Row, Switch, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty } from 'lodash';
-import { PagingResponse } from 'Models';
+import { isEmpty, isUndefined } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@ -24,11 +23,12 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import RichTextEditorPreviewer from '../../components/common/RichTextEditor/RichTextEditorPreviewer';
 import TableAntd from '../../components/common/Table/Table';
-import { NO_DATA, PAGE_SIZE } from '../../constants/constants';
+import { NO_DATA } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityType } from '../../enums/entity.enum';
 import { APICollection } from '../../generated/entity/data/apiCollection';
 import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../utils/EntityUtils';

@ -39,7 +39,7 @@ interface APIEndpointsTabProps {
  editDescriptionPermission?: boolean;
  isEdit?: boolean;
  showDeletedEndpoints?: boolean;
-  apiEndpoints: PagingResponse<APIEndpoint[]>;
+  apiEndpoints: APIEndpoint[];
  currentEndpointsPage: number;
  endpointPaginationHandler: NextPreviousProps['pagingHandler'];
  onCancel?: () => void;
@ -48,6 +48,7 @@ interface APIEndpointsTabProps {
  onThreadLinkSelect?: (link: string) => void;
  onShowDeletedEndpointsChange?: (value: boolean) => void;
  isVersionView?: boolean;
+  pagingInfo: UsePagingInterface;
 }

 function APIEndpointsTab({
@ -66,6 +67,7 @@ function APIEndpointsTab({
  showDeletedEndpoints = false,
  onShowDeletedEndpointsChange,
  isVersionView = false,
+  pagingInfo,
 }: Readonly<APIEndpointsTabProps>) {
  const { t } = useTranslation();

@ -124,7 +126,7 @@ function APIEndpointsTab({
            description={description}
            entityFqn={apiCollectionDetails.fullyQualifiedName}
            entityType={EntityType.API_COLLECTION}
-            isDescriptionExpanded={isEmpty(apiEndpoints.data)}
+            isDescriptionExpanded={isEmpty(apiEndpoints)}
            showActions={false}
          />
        ) : (
@ -134,7 +136,7 @@ function APIEndpointsTab({
            entityName={getEntityName(apiCollectionDetails)}
            entityType={EntityType.API_COLLECTION}
            hasEditAccess={editDescriptionPermission}
-            isDescriptionExpanded={isEmpty(apiEndpoints.data)}
+            isDescriptionExpanded={isEmpty(apiEndpoints)}
            isEdit={isEdit}
            showActions={!apiCollectionDetails.deleted}
            onCancel={onCancel}
@ -166,7 +168,7 @@ function APIEndpointsTab({
          bordered
          columns={tableColumn}
          data-testid="databaseSchema-tables"
-          dataSource={apiEndpoints.data}
+          dataSource={apiEndpoints}
          loading={apiEndpointsLoading}
          locale={{
            emptyText: (
@ -181,14 +183,15 @@ function APIEndpointsTab({
          size="small"
        />
      </Col>
-      {apiEndpoints.paging.total > PAGE_SIZE && apiEndpoints.data.length > 0 && (
+      {!isUndefined(pagingInfo) && pagingInfo.showPagination && (
        <Col span={24}>
          <NextPrevious
            currentPage={currentEndpointsPage}
            isLoading={apiEndpointsLoading}
-            pageSize={PAGE_SIZE}
-            paging={apiEndpoints.paging}
+            pageSize={pagingInfo.pageSize}
+            paging={pagingInfo.paging}
            pagingHandler={endpointPaginationHandler}
+            onShowSizeChange={pagingInfo.handlePageSizeChange}
          />
        </Col>
      )}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@ -15,7 +15,7 @@ import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import React, {
  FunctionComponent,
  useCallback,
@ -40,6 +40,7 @@ import {
  getEntityDetailsPath,
  getVersionPath,
  INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
  ROUTES,
 } from '../../constants/constants';
 import { FEED_COUNT_INITIAL_DATA } from '../../constants/entity.constants';
@ -62,6 +63,7 @@ import { Table } from '../../generated/entity/data/table';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
 import { TagLabel } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { FeedCounts } from '../../interface/feed.interface';
 import {
@ -90,6 +92,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
  const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
  const { t } = useTranslation();
  const { getEntityPermissionByFqn } = usePermissionProvider();
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;

  const { tab: activeTab = EntityTabs.TABLE } =
    useParams<{ tab: EntityTabs }>();
@ -103,10 +108,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
  const [databaseSchema, setDatabaseSchema] = useState<DatabaseSchema>(
    {} as DatabaseSchema
  );
-  const [tableData, setTableData] = useState<PagingResponse<Table[]>>({
-    data: [],
-    paging: { total: 0 },
-  });
+  const [tableData, setTableData] = useState<Array<Table>>([]);
  const [tableDataLoading, setTableDataLoading] = useState<boolean>(true);
  const [isSchemaDetailsLoading, setIsSchemaDetailsLoading] =
    useState<boolean>(true);
@ -240,7 +242,8 @@ const DatabaseSchemaPage: FunctionComponent = () => {
          databaseSchema: decodedDatabaseSchemaFQN,
          include: showDeletedTables ? Include.Deleted : Include.NonDeleted,
        });
-        setTableData(res);
+        setTableData(res.data);
+        handlePagingChange(res.paging);
      } catch (err) {
        showErrorToast(err as AxiosError);
      } finally {
@ -452,11 +455,11 @@ const DatabaseSchemaPage: FunctionComponent = () => {
  const tablePaginationHandler = useCallback(
    ({ cursorType, currentPage }: PagingHandlerParams) => {
      if (cursorType) {
-        getSchemaTables({ [cursorType]: tableData.paging[cursorType] });
+        getSchemaTables({ [cursorType]: paging[cursorType] });
      }
      setCurrentTablesPage(currentPage);
    },
-    [tableData, getSchemaTables]
+    [paging, getSchemaTables]
  );

  const versionHandler = useCallback(() => {
@ -513,13 +516,14 @@ const DatabaseSchemaPage: FunctionComponent = () => {

  useEffect(() => {
    if (viewDatabaseSchemaPermission && decodedDatabaseSchemaFQN) {
-      getSchemaTables();
+      getSchemaTables({ limit: pageSize });
    }
  }, [
    showDeletedTables,
    decodedDatabaseSchemaFQN,
    viewDatabaseSchemaPermission,
    deleted,
+    pageSize,
  ]);

  const {
@ -593,6 +597,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
        getEntityFeedCount,
        fetchDatabaseSchemaDetails,
        handleFeedCount,
+        pagingInfo,
      }),
    [
      feedCount,
@ -622,6 +627,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
      getEntityFeedCount,
      fetchDatabaseSchemaDetails,
      handleFeedCount,
+      pagingInfo,
    ]
  );

--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx
@ -13,8 +13,7 @@

 import { Col, Row, Switch, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty } from 'lodash';
-import { PagingResponse } from 'Models';
+import { isEmpty, isUndefined } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@ -24,11 +23,11 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import RichTextEditorPreviewer from '../../components/common/RichTextEditor/RichTextEditorPreviewer';
 import TableAntd from '../../components/common/Table/Table';
-import { PAGE_SIZE } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityType } from '../../enums/entity.enum';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { Table } from '../../generated/entity/data/table';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../utils/EntityUtils';

@ -39,7 +38,7 @@ interface SchemaTablesTabProps {
  editDescriptionPermission?: boolean;
  isEdit?: boolean;
  showDeletedTables?: boolean;
-  tableData: PagingResponse<Table[]>;
+  tableData: Table[];
  currentTablesPage: number;
  tablePaginationHandler: NextPreviousProps['pagingHandler'];
  onCancel?: () => void;
@ -48,6 +47,7 @@ interface SchemaTablesTabProps {
  onThreadLinkSelect?: (link: string) => void;
  onShowDeletedTablesChange?: (value: boolean) => void;
  isVersionView?: boolean;
+  pagingInfo: UsePagingInterface;
 }

 function SchemaTablesTab({
@ -66,6 +66,7 @@ function SchemaTablesTab({
  showDeletedTables = false,
  onShowDeletedTablesChange,
  isVersionView = false,
+  pagingInfo,
 }: Readonly<SchemaTablesTabProps>) {
  const { t } = useTranslation();

@ -115,7 +116,7 @@ function SchemaTablesTab({
            description={description}
            entityFqn={databaseSchemaDetails.fullyQualifiedName}
            entityType={EntityType.DATABASE_SCHEMA}
-            isDescriptionExpanded={isEmpty(tableData.data)}
+            isDescriptionExpanded={isEmpty(tableData)}
            showActions={false}
          />
        ) : (
@ -125,7 +126,7 @@ function SchemaTablesTab({
            entityName={getEntityName(databaseSchemaDetails)}
            entityType={EntityType.DATABASE_SCHEMA}
            hasEditAccess={editDescriptionPermission}
-            isDescriptionExpanded={isEmpty(tableData.data)}
+            isDescriptionExpanded={isEmpty(tableData)}
            isEdit={isEdit}
            showActions={!databaseSchemaDetails.deleted}
            onCancel={onCancel}
@ -157,7 +158,7 @@ function SchemaTablesTab({
          bordered
          columns={tableColumn}
          data-testid="databaseSchema-tables"
-          dataSource={tableData.data}
+          dataSource={tableData}
          loading={tableDataLoading}
          locale={{
            emptyText: (
@ -172,14 +173,15 @@ function SchemaTablesTab({
          size="small"
        />
      </Col>
-      {tableData.paging.total > PAGE_SIZE && tableData.data.length > 0 && (
+      {!isUndefined(pagingInfo) && pagingInfo.showPagination && (
        <Col span={24}>
          <NextPrevious
            currentPage={currentTablesPage}
            isLoading={tableDataLoading}
-            pageSize={PAGE_SIZE}
-            paging={tableData.paging}
+            pageSize={pagingInfo.pageSize}
+            paging={pagingInfo.paging}
            pagingHandler={tablePaginationHandler}
+            onShowSizeChange={pagingInfo.handlePageSizeChange}
          />
        </Col>
      )}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
@ -14,7 +14,6 @@
 import { Col, Row, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import { isEmpty, toString } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@ -33,6 +32,7 @@ import {
  getEntityDetailsPath,
  getVersionPath,
  INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
 } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import {
@ -47,6 +47,7 @@ import { ChangeDescription } from '../../generated/entity/type';
 import { EntityHistory } from '../../generated/type/entityHistory';
 import { Include } from '../../generated/type/include';
 import { TagSource } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import SchemaTablesTab from '../../pages/DatabaseSchemaPage/SchemaTablesTab';
 import {
@ -72,11 +73,13 @@ function DatabaseSchemaVersionPage() {
    tab: EntityTabs;
  }>();
  const { fqn: decodedEntityFQN } = useFqn();
+
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
+
  const [currentPage, setCurrentPage] = useState(INITIAL_PAGING_VALUE);
-  const [tableData, setTableData] = useState<PagingResponse<Table[]>>({
-    data: [],
-    paging: { total: 0 },
-  });
+  const [tableData, setTableData] = useState<Array<Table>>([]);
  const [servicePermissions, setServicePermissions] =
    useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
  const [isLoading, setIsLoading] = useState<boolean>(true);
@ -173,7 +176,8 @@ function DatabaseSchemaVersionPage() {
          ...params,
          databaseSchema: decodedEntityFQN,
        });
-        setTableData(res);
+        setTableData(res.data);
+        handlePagingChange(res.paging);
      } finally {
        setIsTableDataLoading(false);
      }
@ -189,11 +193,11 @@ function DatabaseSchemaVersionPage() {
  const tablePaginationHandler = useCallback(
    ({ cursorType, currentPage }: PagingHandlerParams) => {
      if (cursorType) {
-        getSchemaTables({ [cursorType]: tableData.paging[cursorType] });
+        getSchemaTables({ [cursorType]: paging[cursorType] });
      }
      setCurrentPage(currentPage);
    },
-    [tableData, getSchemaTables]
+    [paging, getSchemaTables]
  );

  const { versionHandler, backHandler } = useMemo(
@ -247,6 +251,7 @@ function DatabaseSchemaVersionPage() {
                currentTablesPage={currentPage}
                databaseSchemaDetails={currentVersionData}
                description={description}
+                pagingInfo={pagingInfo}
                tableData={tableData}
                tableDataLoading={isTableDataLoading}
                tablePaginationHandler={tablePaginationHandler}
@ -401,9 +406,9 @@ function DatabaseSchemaVersionPage() {

  useEffect(() => {
    if (!isEmpty(currentVersionData)) {
-      getSchemaTables();
+      getSchemaTables({ limit: pageSize });
    }
-  }, [currentVersionData]);
+  }, [currentVersionData, pageSize]);

  return (
    <PageLayoutV1
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
@ -179,8 +179,13 @@ const ServiceDetailsPage: FunctionComponent = () => {
    handlePagingChange: handleIngestionPagingChange,
  } = ingestionPagingInfo;

-  const { paging, currentPage, handlePageChange, handlePagingChange } =
-    pagingInfo;
+  const {
+    paging,
+    pageSize: databasePageSize,
+    currentPage,
+    handlePageChange,
+    handlePagingChange,
+  } = pagingInfo;

  const [serviceDetails, setServiceDetails] = useState<ServicesType>(
    {} as ServicesType
@ -848,8 +853,8 @@ const ServiceDetailsPage: FunctionComponent = () => {

  useEffect(() => {
    handlePageChange(INITIAL_PAGING_VALUE);
-    getOtherDetails();
-  }, [activeTab, showDeleted, deleted]);
+    getOtherDetails({ limit: databasePageSize });
+  }, [activeTab, showDeleted, deleted, databasePageSize]);

  useEffect(() => {
    // fetch count for data modal tab, its need only when its dashboard page and data modal tab is not active
@ -1014,6 +1019,7 @@ const ServiceDetailsPage: FunctionComponent = () => {
            isServiceLoading={isServiceLoading}
            paging={paging}
            pagingHandler={pagingHandler}
+            pagingInfo={pagingInfo}
            saveUpdatedServiceData={saveUpdatedServiceData}
            serviceDetails={serviceDetails}
            serviceName={serviceCategory}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx
@ -13,7 +13,7 @@

 import { Col, Row, Space, Switch, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty, isNil } from 'lodash';
+import { isUndefined } from 'lodash';
 import { EntityTags, ServiceTypes } from 'Models';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -25,12 +25,12 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
 import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
-import { PAGE_SIZE } from '../../constants/constants';
 import { COMMON_RESIZABLE_PANEL_CONFIG } from '../../constants/ResizablePanel.constants';
 import { OperationPermission } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { EntityType } from '../../enums/entity.enum';
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { Paging } from '../../generated/type/paging';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { ServicesType } from '../../interface/service.interface';
 import { getServiceMainTabColumns } from '../../utils/ServiceMainTabContentUtils';
@ -52,6 +52,7 @@ interface ServiceMainTabContentProps {
  currentPage: number;
  pagingHandler: NextPreviousProps['pagingHandler'];
  saveUpdatedServiceData: (updatedData: ServicesType) => Promise<void>;
+  pagingInfo: UsePagingInterface;
 }

 function ServiceMainTabContent({
@ -67,6 +68,7 @@ function ServiceMainTabContent({
  currentPage,
  serviceDetails,
  saveUpdatedServiceData,
+  pagingInfo,
 }: Readonly<ServiceMainTabContentProps>) {
  const { t } = useTranslation();
  const { serviceCategory } = useParams<{
@ -210,14 +212,15 @@ function ServiceMainTabContent({
                          size="small"
                        />
                      )}
-                      {Boolean(!isNil(paging.after) || !isNil(paging.before)) &&
-                        !isEmpty(data) && (
+                      {!isUndefined(pagingInfo) &&
+                        pagingInfo.showPagination && (
                          <NextPrevious
                            currentPage={currentPage}
                            isLoading={isServiceLoading}
-                            pageSize={PAGE_SIZE}
+                            pageSize={pagingInfo.pageSize}
                            paging={paging}
                            pagingHandler={pagingHandler}
+                            onShowSizeChange={pagingInfo.handlePageSizeChange}
                          />
                        )}
                    </Space>
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaClassBase.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaClassBase.ts
@ -10,7 +10,7 @@
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import { PagingHandlerParams } from '../components/common/NextPrevious/NextPrevious.interface';
 import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface';
 import { DetailPageWidgetKeys } from '../enums/CustomizeDetailPage.enum';
@ -18,12 +18,13 @@ import { EntityTabs } from '../enums/entity.enum';
 import { DatabaseSchema } from '../generated/entity/data/databaseSchema';
 import { Table } from '../generated/entity/data/table';
 import { ThreadType } from '../generated/entity/feed/thread';
+import { UsePagingInterface } from '../hooks/paging/usePaging';
 import { FeedCounts } from '../interface/feed.interface';
 import { getDataBaseSchemaPageBaseTabs } from './DatabaseSchemaDetailsUtils';

 export interface DatabaseSchemaPageTabProps {
  feedCount: FeedCounts;
-  tableData: PagingResponse<Table[]>;
+  tableData: Table[];
  activeTab: EntityTabs;
  currentTablesPage: number;
  databaseSchema: DatabaseSchema;
@ -52,6 +53,7 @@ export interface DatabaseSchemaPageTabProps {
  getEntityFeedCount: () => void;
  fetchDatabaseSchemaDetails: () => Promise<void>;
  handleFeedCount: (data: FeedCounts) => void;
+  pagingInfo: UsePagingInterface;
 }

 class DatabaseSchemaClassBase {
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaDetailsUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaDetailsUtils.tsx
@ -58,12 +58,13 @@ export const getDataBaseSchemaPageBaseTabs = ({
  getEntityFeedCount,
  fetchDatabaseSchemaDetails,
  handleFeedCount,
+  pagingInfo,
 }: DatabaseSchemaPageTabProps): TabProps[] => {
  return [
    {
      label: (
        <TabsLabel
-          count={tableData.paging.total}
+          count={pagingInfo.paging.total}
          id={EntityTabs.TABLE}
          isActive={activeTab === EntityTabs.TABLE}
          name={t('label.table-plural')}
@ -84,6 +85,7 @@ export const getDataBaseSchemaPageBaseTabs = ({
                      description={description}
                      editDescriptionPermission={editDescriptionPermission}
                      isEdit={isEdit}
+                      pagingInfo={pagingInfo}
                      showDeletedTables={showDeletedTables}
                      tableData={tableData}
                      tableDataLoading={tableDataLoading}