distinguish between client and server side paging

Signed-off-by: Andreas Berger <andreas@berger-ecommerce.com>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -23,6 +23,7 @@ import {
 } from '@backstage/catalog-model';
 import {
   CodeSnippet,
+  FavoriteToggleIcon,
   TableColumn,
   TableProps,
   WarningPanel,
@@ -47,7 +48,6 @@ import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable';
 import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { catalogTranslationRef } from '../../alpha';
-import { FavoriteToggleIcon } from '@backstage/core-components';
 
 /**
  * Props for {@link CatalogTable}.
@@ -236,6 +236,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       subtitle={subtitle}
       options={options}
       data={rows}
+      clientPagination={paginationMode === 'none'}
     />
   );
 };

plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx

@@ -25,9 +25,12 @@ import { CatalogTableToolbar } from './CatalogTableToolbar';
  * @internal
  */
 export function OffsetPaginatedCatalogTable(
-  props: TableProps<CatalogTableRow>,
+  props: TableProps<CatalogTableRow> & {
+    // If true, the pagination will be handled client side, the table will use all rows provided in the data prop
+    clientPagination?: boolean;
+  },
 ) {
-  const { columns, data, options, ...restProps } = props;
+  const { columns, data, options, clientPagination, ...restProps } = props;
   const { setLimit, setOffset, limit, totalItems, offset } = useEntityList();
 
   const [page, setPage] = useState(
@@ -42,7 +45,8 @@ export function OffsetPaginatedCatalogTable(
     }
   }, [setOffset, page, limit, totalItems]);
 
-  const showPagination = (totalItems ?? data.length) > limit;
+  const showPagination =
+    (clientPagination ? data.length : totalItems ?? data.length) > limit;
 
   return (
     <Table
@@ -58,14 +62,12 @@ export function OffsetPaginatedCatalogTable(
       components={{
         Toolbar: CatalogTableToolbar,
       }}
-      page={page}
-      onPageChange={newPage => {
-        setPage(newPage);
-      }}
-      onRowsPerPageChange={pageSize => {
-        setLimit(pageSize);
-      }}
-      totalCount={totalItems}
+      page={clientPagination ? undefined : page}
+      onPageChange={clientPagination ? undefined : newPage => setPage(newPage)}
+      onRowsPerPageChange={
+        clientPagination ? undefined : pageSize => setLimit(pageSize)
+      }
+      totalCount={clientPagination ? undefined : totalItems}
       {...restProps}
     />
   );