diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index b20ac84889..02f1603114 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -236,7 +236,6 @@ 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 b88558c822..d27754ee29 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -25,28 +25,29 @@ import { CatalogTableToolbar } from './CatalogTableToolbar'; * @internal */ export function OffsetPaginatedCatalogTable( - props: TableProps & { - // If true, the pagination will be handled client side, the table will use all rows provided in the data prop - clientPagination?: boolean; - }, + props: TableProps, ) { - const { columns, data, options, clientPagination, ...restProps } = props; - const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); + const { columns, data, options, ...restProps } = props; + const { setLimit, setOffset, limit, totalItems, offset, paginationMode } = + useEntityList(); + const clientPagination = paginationMode === 'none'; const [page, setPage] = useState( offset && limit ? Math.floor(offset / limit) : 0, ); useEffect(() => { + if (clientPagination) { + return; + } if (totalItems && page * limit >= totalItems) { setOffset?.(Math.max(0, totalItems - limit)); } else { setOffset?.(Math.max(0, page * limit)); } - }, [setOffset, page, limit, totalItems]); + }, [setOffset, page, limit, totalItems, clientPagination]); - const showPagination = - (clientPagination ? data.length : totalItems ?? data.length) > limit; + const showPagination = (totalItems ?? data.length) > limit; return ( setPage(newPage)} - onRowsPerPageChange={ - clientPagination ? undefined : pageSize => setLimit(pageSize) - } - totalCount={clientPagination ? undefined : totalItems} + {...(clientPagination + ? {} + : { + page, + onPageChange: newPage => setPage(newPage), + onRowsPerPageChange: pageSize => setLimit(pageSize), + totalCount: totalItems, + })} {...restProps} /> );