diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md
new file mode 100644
index 0000000000000..d3c58e95c31fe
--- /dev/null
+++ b/.changeset/funny-papayas-tell.md
@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Harmonize `CatalogTable`
+
+- Show pagination text for `OffsetPagination`
+- Use same `OffsetPaginatedCatalogTable` also as fallback if no pagination is set
+- Do not show paging if there is only one page
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 0b2d2e4a4cdd0..838216c8bc0dc 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -23,7 +23,7 @@ import {
} from '@backstage/catalog-model';
import {
CodeSnippet,
- Table,
+ FavoriteToggleIcon,
TableColumn,
TableProps,
WarningPanel,
@@ -47,8 +47,7 @@ import { OffsetPaginatedCatalogTable } from './OffsetPaginatedCatalogTable';
import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable';
import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { catalogTranslationRef } from '../../alpha/translation';
-import { FavoriteToggleIcon } from '@backstage/core-components';
+import { catalogTranslationRef } from '../../alpha';
/**
* Props for {@link CatalogTable}.
@@ -194,7 +193,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
.join(' ');
const actions = props.actions || defaultActions;
- const options = {
+ const options: TableProps['options'] = {
+ paginationPosition: 'both',
actionsColumnIndex: -1,
loadingType: 'linear' as const,
showEmptyDataSourceMessage: !loading,
@@ -202,6 +202,12 @@ export const CatalogTable = (props: CatalogTableProps) => {
...tableOptions,
};
+ if (paginationMode !== 'cursor' && paginationMode !== 'offset') {
+ entities.sort(refCompare);
+ }
+
+ const rows = entities.map(toEntityRow);
+
if (paginationMode === 'cursor') {
return (
{
actions={actions}
subtitle={subtitle}
options={options}
- data={entities.map(toEntityRow)}
+ data={rows}
next={pageInfo?.next}
prev={pageInfo?.prev}
/>
);
- } else if (paginationMode === 'offset') {
- return (
-
- );
}
- const rows = entities.sort(refCompare).map(toEntityRow);
- const pageSize = 20;
- const showPagination = rows.length > pageSize;
-
+ // else use offset paging
return (
-
- isLoading={loading}
+
);
};
diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
index 843d5be2c83c1..8f490fc2698b2 100644
--- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
@@ -37,7 +37,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
columns={columns}
data={data}
options={{
- paginationPosition: 'both',
...options,
// These settings are configured to force server side pagination
pageSizeOptions: [],
diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx
index e2e73c5af86a8..e506ccfa99a51 100644
--- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx
+++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx
@@ -108,7 +108,13 @@ describe('OffsetPaginatedCatalogTable', () => {
await renderInTestApp(
wrapInContext(
,
- { setOffset: offsetFn, limit: 10, totalItems: data.length, offset: 0 },
+ {
+ setOffset: offsetFn,
+ limit: 10,
+ totalItems: data.length,
+ offset: 0,
+ paginationMode: 'offset',
+ },
),
);
diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
index 7ebf791046357..9bae10a403781 100644
--- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
@@ -28,26 +28,30 @@ export function OffsetPaginatedCatalogTable(
props: TableProps,
) {
const { columns, data, options, ...restProps } = props;
- const { setLimit, setOffset, limit, totalItems, offset } = useEntityList();
+ const { setLimit, setOffset, limit, totalItems, offset, paginationMode } =
+ useEntityList();
+ const clientPagination = paginationMode === 'none';
const [page, setPage] = React.useState(
offset && limit ? Math.floor(offset / limit) : 0,
);
useEffect(() => {
- if (totalItems && page * limit >= totalItems) {
- setOffset!(Math.max(0, totalItems - limit));
- } else {
- setOffset!(Math.max(0, page * limit));
+ if (clientPagination || !setOffset) {
+ return;
}
- }, [setOffset, page, limit, totalItems]);
+ let newOffset = page * limit;
+ if (totalItems && newOffset >= totalItems) {
+ newOffset = totalItems - limit;
+ }
+ setOffset(Math.max(0, newOffset));
+ }, [setOffset, page, limit, totalItems, clientPagination]);
return (
{
- setPage(newPage);
- }}
- onRowsPerPageChange={pageSize => {
- setLimit(pageSize);
- }}
- totalCount={totalItems}
- localization={{ pagination: { labelDisplayedRows: '' } }}
+ {...(clientPagination
+ ? {}
+ : {
+ page,
+ onPageChange: setPage,
+ onRowsPerPageChange: setLimit,
+ totalCount: totalItems,
+ })}
{...restProps}
/>
);