diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 2076750da8..b20ac84889 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/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'} /> ); }; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 7f599cad76..b88558c822 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -25,9 +25,12 @@ import { CatalogTableToolbar } from './CatalogTableToolbar'; * @internal */ export function OffsetPaginatedCatalogTable( - props: TableProps, + props: TableProps & { + // 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 ( { - 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} /> );