diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 60ad89eca7..e495c993a9 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -46,6 +46,7 @@ import pluralize from 'pluralize';
import React, { ReactNode, useMemo } from 'react';
import { columnFactories } from './columns';
import { CatalogTableColumnsFunc, CatalogTableRow } from './types';
+import { PaginatedCatalogTable } from './PaginatedCatalogTable';
/**
* Props for {@link CatalogTable}.
@@ -138,9 +139,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
[columns, entityListContext],
);
- // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
- const titlePreamble = capitalize(filters.user?.value ?? 'all');
-
if (error) {
return (
@@ -211,19 +209,66 @@ export const CatalogTable = (props: CatalogTableProps) => {
},
];
- const rows = entities.sort(refCompare).map(toEntityRow);
-
- const showPagination = rows.length > 20;
const currentKind = filters.kind?.value || '';
const currentType = filters.type?.value || '';
+ // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
+ const titlePreamble = capitalize(filters.user?.value ?? 'all');
const titleDisplay = [titlePreamble, currentType, pluralize(currentKind)]
.filter(s => s)
.join(' ');
+ if (props.enablePagination) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+/** @internal */
+function LegacyCatalogTable(props: {
+ actions?: TableProps
['actions'];
+ columns: TableColumn[];
+ emptyContent: React.ReactNode;
+ entities: Entity[];
+ loading: boolean;
+ options?: TableProps['options'];
+ subtitle?: string;
+ title: string;
+}) {
+ const {
+ actions,
+ columns,
+ emptyContent,
+ entities,
+ loading,
+ subtitle,
+ options,
+ title,
+ } = props;
+
+ const rows = entities.sort(refCompare).map(toEntityRow);
+ const showPagination = rows.length > 20;
+
return (
isLoading={loading}
- columns={tableColumns}
+ columns={columns}
options={{
paging: showPagination,
pageSize: 20,
@@ -232,16 +277,16 @@ export const CatalogTable = (props: CatalogTableProps) => {
showEmptyDataSourceMessage: !loading,
padding: 'dense',
pageSizeOptions: [20, 50, 100],
- ...tableOptions,
+ ...options,
}}
- title={`${titleDisplay} (${entities.length})`}
+ title={title}
data={rows}
- actions={actions || defaultActions}
+ actions={actions}
subtitle={subtitle}
emptyContent={emptyContent}
/>
);
-};
+}
CatalogTable.columns = columnFactories;